which other content types to process (e.g. for publishing content trees)

what kind of validation to apply

and many more..

Such properties can be externalized from the source code of the UI Extension by defining configuration parameters and providing values for them. Later on configuration values are passed to the UI Extension through the UI Extensions SDK.

(The final UI Extension rendered in the entry editor. The default value of the field is the hex value for yellow which is #FFFF00)

(The appearance dialogue where the user can pick a default value for the color field.)

Preparation

Make sure you understand the concept of UI Extensions before reading this guide.

Types of configuration

There are two types of configuration that can be defined:

Installation parameters which are set on a space level. Values apply globally to every instance of an UI Extension within a space.

Instance parameters which are set when a UI Extension is assigned to a field of a content type. Values apply locally to an instance of a UI Extension.

Building the UI Extension

Step 1: Plan the configuration

For this exercise we will create a very simple UI Extension for short text fields which will assign a default value to every field the UI Extension is assigned to. The values are hex color values we want to pick from a predefined list.

The default options for our color are:

blue (#0000FF)

yellow (#FFFF00)

red (#FF0000)

Step 2: Define the UI Extension's meta data

Instance and installation parameters are defined when an extension is installed into a space. The easiest way to do that is by creating an extensions.json file and using the Contentful CLI to upload the UI Extension into a space.

Under the parameters property we added an instance property which is used to define an enum type parameter with three pre-defined options for the colors.

For a full reference of parameter types and the values they support, please read about the configuration property of the extensions entity in the Content Management API.

Step 3: The code of the extension

We will define a very simple UI Extension for a Symbol field which means the field will hold a short text value of maximum 255 characters. To get going quickly, we were using the Vanilla HTML5 Template as a base. The final code looks like this: