Editor Interfaces

An editor interface represents the look and feel of the entry editor in the web app. They are tightly coupled to a content type and define which widgets are rendered in both content fields and the sidebar.

For example, the following content type describes a typical blog post data structure. It has a title, a body, and a category that can be either “General”, “iOS” or “Android”.

1
{
2
  "fields": [
3
    { "id": "title", "name": "Title", "type": "Symbol" },
4
    { "id": "body", "name": "Body", "type": "Text" },
5
    {
6
      "id": "category",
7
      "name": "Category",
8
      "type": "Symbol",
9
      "validations": [{ "in": ["General", "iOS", "Android"] }]
10
    }
11
  ]
12
}

An editor interface could, for example, define that the title field should be rendered as an input field (the widget ID is singleLine and it comes from a builtin widget the web app provides). It could then define that the body should be a normal text area (the widget id is multipleLine), and that the category should be rendered as a dropdown field (the widget id is dropdown).

The editor interface would look like this:

1
{
2
  "controls": [
3
    {
4
      "fieldId": "title",
5
      "widgetNamespace": "builtin",
6
      "widgetId": "singleLine"
7
    },
8
    {
9
      "fieldId": "body",
10
      "widgetNamespace": "builtin",
11
      "widgetId": "multipleLine"
12
    },
13
    {
14
      "fieldId": "category",
15
      "widgetNamespace": "builtin",
16
      "widgetId": "dropdown"
17
    }
18
  ]
19
}

There are sets of compatible builtin widgets per content type field type:

Field control settings

You can pass custom settings to a field control that change the behavior or presentation of a widget.

The entry for a field of type Boolean, for example, would look like this.

1
{
2
  "fieldId": "isFeatured",
3
  "widgetNamespace": "builtin",
4
  "widgetId": "boolean",
5
  "settings": {
6
    "helpText": "Feature this post on the homepage?",
7
    "trueLabel": "yes",
8
    "falseLabel": "no"
9
  }
10
}

If present, the settings object of a control must be an object. All widgets accept the helpText setting and use it to render extra information with the widget. Other settings are widget specific.

Custom field control widgets

Editor interfaces can be used to assign custom widgets to a field, sidebar or the entire entry editor. Currently there are two types of custom widgets: Apps and UI Extension. To do so just use one of app or extension namespaces and provide the widget ID:

1
{
2
  "controls": [
3
    {
4
      "fieldId": "title",
5
      "widgetNamespace": "extension",
6
      "widgetId": "myextension",
7
      "settings": {
8
        "devMode": false
9
      }
10
    },
11
    {
12
      "fieldId": "image",
13
      "widgetNamespace": "app",
14
      "widgetId": "myapp"
15
    }
16
  ]
17
}

Field groups

Field groups allow to organize how fields are displayed in the entry editor. Groups are defined with two properties editorLayout and groupControls, like in the following example:

1
{
2
  ...
3
  "editorLayout": [
4
    {
5
      "groupId": "content",
6
      "name": "Content",
7
      "items": [
8
        { "fieldId": "title" },
9
        { "fieldId": "body" },
10
      ]
11
    },
12
    {
13
      "groupId": "settings",
14
      "name": "Settings",
15
      "items": [
16
        {
17
          "groupId": "seo",
18
          "name": "Seo",
19
          "items": [{"fieldId": "slug"}]
20
        }
21
      ]
22
    }
23
  ],
24
  "groupControls": [
25
    {
26
      "groupId": "content",
27
      "widgetId": "topLevelTab",
28
      "widgetNamespace": "builtin",
29
    },
30
    {
31
      "groupId": "settings",
32
      "widgetId": "topLevelTab",
33
      "widgetNamespace": "builtin",
34
    }
35
  ]
36
}

Editor Layout

editorLayout describes the hierarchical organization of fields and groups. Groups are containers of fields or nested groups.

Items in editorLayout are of two types: group items or field items. These can, respecting some constraints, be positioned in the layout as needed. When it’s present, editorLayout redefines the order in which fields are rendered in the entry editor. Leaf field items are displayed in the order they appear in the hierarchy.

Fields that are not assigned to a group will be automatically added to the first group defined in editorLayout.

Group controls

Similar to field controls, groupControls defines the widgets that render the groups present in editorLayout.

At the moment custom group widgets are not supported.

Like field controls, group controls can specify widget settings. The helpText property in settings contains textual information displayed in the group heading. The collapsedByDefault property controls whether the field set is collapsed at page load, false by default.

1
{
2
  "groupId": "seo",
3
  "widgetNamespace": "builtin",
4
  "widgetId": "fieldset",
5
  "settings": {
6
    "helpText": "Fields to configure seo metadata",
7
    "collapsedByDefault": true
8
  }
9
}

Groups constraints

• Top level items in editorLayout must be group items, they must map to a group control with topLevelTab widgetId.
• Non top level groups must not map to to a group control with topLevelTab widgetId.
• Groups cannot be nested more than 1 level, top level group can have groups as children, but those can only contain fields.

Sidebar

By default the web app renders a set of predefined widgets (like “Status” or “Preview”) in the entry editor sidebar. Using the editor interface, it’s possible to alter the default sidebar by hiding, rearranging built-in widgets and/or adding custom widgets.

1
{
2
  "sidebar": [
3
    {
4
      "widgetNamespace": "sidebar-builtin",
5
      "widgetId": "content-preview-widget"
6
    },
7
    {
8
      "widgetNamespace": "app",
9
      "widgetId": "myapp"
10
    }
11
  ]
12
}

Sidebar items are rendered in exactly the same order as they are defined in the sidebar property. The sidebar above will render two widgets, the first being the builtin preview widget and the other one using an app.

Builtin sidebar widgets (widgets in the sidebar-builtin namespace) have the following IDs:

• Status (publish button): publication-widget
• Entry tasks: content-workflows-tasks-widget
• Content preview: content-preview-widget
• Incoming links: incoming-links-widget
• Translations (locale selection): translation-widget
• Entry-level versioning: versions-widget

If the sidebar is in its default state and therefore only displays our built-in widgets, the sidebar property is left out from the editor interface. The default state is:

1
[
2
  {
3
    "widgetId": "publication-widget",
4
    "widgetNamespace": "sidebar-builtin"
5
  },
6
  {
7
    "widgetId": "content-workflows-tasks-widget",
8
    "widgetNamespace": "sidebar-builtin"
9
  },
10
  {
11
    "widgetId": "content-preview-widget",
12
    "widgetNamespace": "sidebar-builtin"
13
  },
14
  {
15
    "widgetId": "incoming-links-widget",
16
    "widgetNamespace": "sidebar-builtin"
17
  },
18
  {
19
    "widgetId": "translation-widget",
20
    "widgetNamespace": "sidebar-builtin"
21
  },
22
  {
23
    "widgetId": "versions-widget",
24
    "widgetNamespace": "sidebar-builtin"
25
  }
26
]

Custom editor

It is possible to add an editor or even completely replace the default entry editor provided by the web app with a custom editor implemented as an App or a UI Extension.

Once you’ve built your custom editor, you can use it by setting an optional editors property with your custom editor. This will render both the custom editor and the default editor. You can also disable the default editor, by including it in the list and marking it as disabled.

1
{
2
  "editors": [
3
    {
4
      "widgetNamespace": "extension",
5
      "widgetId": "mycustomeditor",
6
      "settings": {
7
        "devMode": true
8
      }
9
    },
10
    {
11
      "widgetNamespace": "editor-builtin",
12
      "widgetId": "default-editor",
13
      "disabled": true
14
    }
15
  ]
16
}

Similarly to field and sidebar configuration, instance parameters for an app or UI Extension can be passed as settings.

If the editor is in its default state and therefore only displays the default entry editor, the editor property is left out from the editor interface. The default state is:

1
[
2
  {
3
    "widgetId": "default-editor",
4
    "widgetNamespace": "editor-builtin"
5
  }
6
]

Default configuration

In the EditorInterface entity, editors, sidebar and controls are optional fields. Therefore, general defaults are defined which will be rendered if none of them is specified.

Groups properties editorLayout and groupControls are conditionally required, they are optional, but if one the two is part of an editor interface then the other has to be too.

These defaults are defined and provided by the contentful-management.js library. To get these defaults, you can import them from the library as follows:

1
import { editorInterfaceDefaults } from 'contentful-management';
2
3
// sidebar defaults for entries
4
const sidebarEntryDefaults = editorInterfaceDefaults.SidebarEntryConfiguration;
5
6
// sidebar defaults for assets
7
const sidebarAssetDefaults = editorInterfaceDefaults.SidebarAssetConfiguration;
8
9
// entry configuration defaults
10
const entryDefaults = editorInterfaceDefaults.EntryConfiguration;

The default for controls are not constants, because they depend on which fields are defined. To solve this, contentful-management.js provides a function that returns the default control for a given field.

1
import { editorInterfaceDefaults } from 'contentful-management';
2
3
const field = {
4
  apiName: '<field-name>',
5
  id: '<field-id>',
6
  name: '<field-name>',
7
  type: 'Symbol',
8
};
9
10
// sidebar defaults for entries
11
const control = editorInterfaceDefaults.getDefaultControlOfField(field);
12
13
// {
14
//    "fieldId": "title",
15
//    "widgetNamespace": "builtin",
16
//    "widgetId": "singleLine"
17
//    "settings": {
18
//      "helpText": null,
19
//    }
20
// }
21
console.log(control);

Configuring editor interfaces with apps

Apps are able to edit editor interfaces as part of their configuration process. Details on how this works can be in our article about target state.

Access and modify editor interfaces

Using contentful-management.js you can access and modify editor interfaces. The following example shows how to retrieve an editor interface for a content type.

1
import { createClient } from 'contentful-management';
2
const client = createClient(
3
  {
4
    // This is the access token for this space. Normally you get the token in the Contentful web app
5
    accessToken: 'YOUR_ACCESS_TOKEN',
6
  }
7
);
8
9
// use client to access the Contentful Management API and get editor interface for a content type
10
const editorInterface = await client.editorInterface.get({
11
  spaceId: 'YOUR_SPACE_ID',
12
  environmentId: 'YOUR_ENVIRONMENT_ID',
13
  contentTypeId: 'YOUR_CONTENT_TYPE_ID',
14
});

You can also modify editor interfaces using the client. The following example shows how to add (and then remove) a sidebar widget to an editor interface.

1
// Add a sidebar widget to the editor interface (builtin translation widget)
2
await client.editorInterface.update(
3
  {
4
    spaceId: 'YOUR_SPACE_ID',
5
    environmentId: 'YOUR_ENVIRONMENT_ID',
6
    contentTypeId: 'YOUR_CONTENT_TYPE_ID',
7
  },
8
  {
9
    ...updatedEditorInterfaces,
10
    sidebar: [
11
      ...updatedEditorInterfaces.sidebar,
12
      {
13
        widgetId: 'translation-widget',
14
        widgetNamespace: 'sidebar-builtin',
15
        settings: {
16
          defaultLocale: 'en-US',
17
        },
18
      },
19
    ],
20
  }
21
);
22
23
// Delete the builtin translation widget from the editor interface
24
await client.editorInterface.update(
25
  { spaceId: 'b1jn4as0c5ht', environmentId: 'master', contentTypeId: 'item' },
26
  {
27
    ...editorInterface,
28
    sidebar: editorInterface.sidebar.filter(
29
      (entry) => entry.widgetId !== 'translation-widget'
30
    ),
31
  }
32
);

Custom apps can also be added to editor interfaces using the client. The following example shows how to add a custom app to an editor interface.

1
// Add a custom app to the editor interface
2
await client.editorInterface.update(
3
  {
4
    spaceId: 'YOUR_SPACE_ID',
5
    environmentId: 'YOUR_ENVIRONMENT_ID',
6
    contentTypeId: 'YOUR_CONTENT_TYPE_ID',
7
  },
8
  {
9
    ...updatedEditorInterfaces,
10
    sidebar: [
11
      ...updatedEditorInterfaces.sidebar,
12
      {
13
        widgetId: 'YOUR_CUSTOM_WIDGET_ID',
14
        widgetNamespace: 'app',
15
        settings: {
16
          // any app settings
17
        },
18
      },
19
    ],
20
  }
21
);