Use Link as Defaults

This plugin provides the developer with an easy way to configure fields that a CMS user can overwrite manually when linking an entity.

This is a Community Plugin! Learn how create your own plugin, or copy and remix existing ones in our documentation

DatoCMS Plugin: Use Link as Defaults

This plugin provides the developer with an easy way to configure fields that a CMS user can overwrite manually when linking an entity.

The CMS user selects an instance of a model and fields are being prefilled with data coming from the selected entity.

You can add this field addon only to single link fields.

Preview

What this plugin can do for you

Let's imagine the following scenario: You have a website where you want to display certain models on your front page. DatoCMS solves this for you by linking different references. Unfortunately, these linked entities can not be customized for this one specific link to the homepage. Here is where this plugin will help you out. It lets you link whatever model you want and offers you the option to provide a mapping function that will then map fields from the linked element and use them as default values on a custom teaser.

So let's image, an editor wants to feature an article and a product on your frontpage. Let's further assume we have two models defined as follow:

Article Model	Product Model

Let's create four instances of these models:

	Example 1	Example 2
Article
Product

Now we will configure a custom teaser with these settings:

Custom Teaser Model

Where reference is of type single link and has both demo models selected. Within the edit section of the reference field, we set up the config. Go to presentation tab and select "Insert Addon" and select "Use Link as Defaults". A new field will be added called configuration which expects a valid JSON config.

Config for Custom Teaser

1
{
2
  "fields": [ // list all fields of the current model
3
    "title",
4
    "additional_text",
5
    "image",
6
    "category"
7
  ],
8
  "assign": {
9
    "demo_article_model": { // selected models
10
      "title": "title", // map source field to target field
11
      "additional_text": "summary",
12
      "image": "image",
13
      "category": "category"
14
    },
15
    "demo_product_model": {
16
      "title": "name",
17
      "additional_text": "information",
18
      "image": "product_images[0]", // use lodash like selectors
19
      "category": "brand"
20
    }
21
  }
22
}

That's it.

Demo

Use different models as reference and map fields. Demo 1

Overwrite specific fields manually and do not reset them. Empty them for resetting. Demo 2

Plugin Configuration

1
{
2
  "global": [
3
    {
4
      "id": "developmentMode",
5
      "label": "Development Mode",
6
      "type": "boolean",
7
      "default": false,
8
      "hint": "Shows debug messages in console"
9
    },
10
    {
11
      "id": "apiToken",
12
      "label": "Read-Only API Token",
13
      "type": "string",
14
      "required": true,
15
      "default": "",
16
      "hint": "The plugin needs to fetch data in order to display it."
17
    },
18
    {
19
      "id": "textNothingSet",
20
      "label": "Text for nothing set state",
21
      "type": "string",
22
      "hint": "Default: Select a reference above"
23
    },
24
    {
25
      "id": "textClearButton",
26
      "label": "Text for Clear Button",
27
      "type": "string",
28
      "hint": "Default: Clear all fields"
29
    },
30
    {
31
      "id": "textResetButton",
32
      "label": "Text for Reset Button",
33
      "type": "string",
34
      "hint": "Default: Reset empty fields"
35
    }
36
  ],
37
  "instance": [
38
    {
39
      "id": "config",
40
      "label": "Configuration",
41
      "type": "json",
42
      "required": true
43
    }
44
  ]
45
}

Instance Configuration

Structure:

1
{
2
  "fields": ["targetFieldName"]
3
  "assign": {
4
    "model1": {
5
      "targetFieldName": "sourceFieldName1",
6
    },
7
    "model2": {
8
      "targetFieldName": "sourceFieldName2",
9
    }
10
  }
11
}

Examples:

1
{
2
  "fields": [
3
    "title",
4
    "additional_text",
5
    "image",
6
    "category"
7
  ],
8
  "assign": {
9
    "product": {
10
      "title": "brand.name",
11
      "additional_text": "name",
12
      "image": "image",
13
      "category": "categories[0].name" // take the first categorie's name
14
    },
15
    "category_page": {
16
      "title": "title",
17
      "additional_text": "introduction",
18
      "image": "products[1].image", // take the second image from linked field products
19
      "category": "products[0].categories[0].name" // linked field
20
    }
21
  }
22
}
23

24
{
25
  "fields": [ // list all fields of the current model
26
    "title",
27
    "additional_text",
28
    "image",
29
    "category"
30
  ],
31
  "assign": {
32
    "demo_article_model": { // selected models
33
      "title": "title", // map source field to target field
34
      "additional_text": "summary",
35
      "image": "image",
36
      "category": "category"
37
    },
38
    "demo_product_model": {
39
      "title": "name",
40
      "additional_text": "information",
41
      "image": "product_images[0]", // use lodash like selectors
42
      "category": "brand"
43
    }
44
  }
45
}

Development

Install all the project dependencies with:

1
yarn install

Start the local development server with:

1
yarn start

The plugin will be served from <http://localhost:5500/>. Insert this URL as the plugin Entry point URL.