In order to help you understand how our open source field editors can be used to build custom editor interfaces we have created a demo extension. On this page you will find a video walk through of how the extension works, as well as a general description of how it was developed.

Overview

The demo extension utilises our open source field editors to provide the same experience as the default content editor, but with extra features added on top. Specifically it allows editors to group fields in logical ways, and then hide and show the different groups to make editing content easier

How to use the extension

When the extension is initially enabled, the editing experience is similar to the normal content editor, except with an extra button at the top of the page marked "Edit field groups".

Clicking this button opens a dialog, in which it is possible to create groups and assign different fields to them.

Once you are happy with how your field groups are set up, click save, and notice that the editor view has updated - with fields split into different groups which are closed by default. Clicking on the title of a group allows you to see the fields held within it. Click the title again to close the group.

The extensions structure

We encourage developers who are keen to learn about using Field Editors to review the source code of this demo extension. For those who just want a high level view, the structure of the extension is outlined below.

The extension is built as a React application, which expects to be rendered inside an iFrame. It relies on the ui extensions SDK to easily work with contentfuls APIs.

The extensions uses the SDK to access information about the fields present in the content type, by default these fields are all rendered as they would be in the normal content editor. The index file access the field data from the SDK and the Field module contains the logic for individual fields.

The core logic of the extension is defined in the state module. It is built around React's useReducer hook - and should be fairly straightfoward for a developer who has used Redux or similar state management library. Essentially the module defines a few possible actions, and how the extension's state should be changed when those actions happen. This state is stored in localstorage, and saved on each update.

Current limitations

This extension is intended more as a demo than a production ready feature. It currently has some limitations,

• The field group configuration is stored in the browsers local state. This means it can easily be lost, and is hard to share.
• Validation is not fully implemented
• It has not undergone the same level of testing and validation as core contentful features

That said, if this extensions meets a need for your organisation, we encourage you to use it as a basis for further development.