Was this page helpful?

Example - Grouping fields

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

Overview

The demo app 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

A screenshot of the collapsible entry app

How to use the app

When the app 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 app's structure

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

The app is built as a React application, which expects to be rendered inside an iFrame. It relies on the App SDK to work with Contentful's APIs.

The app uses the App 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 accesses the field data from the SDK and the Field module contains the logic for individual fields.

The core logic of the app is defined in the state module. It is built around React's useReducer hook. The module defines a few possible actions, and how the app's state should be changed when those actions happen. This state is stored in localstorage, and saved on each update.

Limitations

This app is intended as a demo rather than as 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.