App FrameworkConcepts

Target State

The targetState data structure defines where an app will render. It is responsible for assigning an app to specific fields, sidebars, and editors in the web app during the configuration of an app as well as setting any instance parameters required by the app. We use the term targetState because it refers to the state of an environment after the app is configured.

Understanding the targetState object

To get a better understanding of when and how targetState is used, we will go through an example. The following code shows a component that is used for the app.

1class Config extends Component {
2  // We are skipping the render example because it is not relevant to this example.
3  render() { ... }
4  // This method will be called when a user clicks on "Install"
5  // or "Save" in the configuration screen.
6  //
7  // We want to do two things in here:
8  // 1. Persist selected values as a parameter
9  // 2. Assign the app to sidebars of all Content Types
10  async onConfigure() {
11    // Get current state
12    // This will be used as base for next state updates
13    const currentState = await sdk.app.getCurrentState();
14    // The return value of `onConfigure` is used to install
15    // or update the configuration.
16    return {
17      // Parameters to be persisted as the app's installation parameters.
18      parameters: { ... },
19      // Transformation of an environment performed in the
20      // installation process.
21      targetState: {
22        EditorInterface: {
23          // Always pass in the `currentState` to avoid
24          // removing any previous location configuration
25          ...currentState?.EditorInterface,
26          // A content type id where we will assign the app to the sidebar
27          'my-content-type-id': {
28              // assignment to sidebar in position 0 (will show up at the very top of the sidebar)
29              sidebar: { position: 0 }
30          }
31        }
32      },
33    };
34  }
35}

The targetState is part of the object that you can optionally return in your onConfigure function. The keys of the EditorInterface are the IDs of content types we want to configure for the app. In the code example above, my-content-type-id is the ID of a content type that will have our example app in the sidebar at position 0, which means it will be the first thing you see. Apps can leverage different locations to cover different use cases. It is especially important to note here that we always include the currentState to preserve the current EditorInterface state upon configuration updates. In the example above we were only interested in installing the app in the sidebar location. Below, we will illustrate how to install an app into different locations.

Omitting the targetState key in the object returned by onConfigure will remove any previous app location assignment and instance parameters!

Usage

An example of how to use targetState to assign an app to selected Content Types can be found here.

Entry editor location

If you want an app to be rendered as a new entry editor, you need to specify the key editors property for the desired content type. The expected value is an object whose position represents the location (zero-based) of the editor in the list of editors. The editors object can also contain an optional key settings which can be used to set any instance parameters used by the app.

1async onConfigure() {
2  // Get current state
3  // This will be used as base for next state updates.
4  const currentState = await sdk.app.getCurrentState();
5  // The return value of `onConfigure` is used to install
6  // or update the configuration.
7  return {
8    // Parameters to be persisted as the app configuration.
9    parameters: { ... },
10    // Transformation of an environment performed in the
11    // installation process.
12    targetState: {
13      EditorInterface: {
14        // Always pass in the `currentState` to avoid
15        // removing any previous location configuration.
16        ...currentState?.EditorInterface,
17        'my-content-type-id': {
18            editors: {
19              // Places the entry at the second position
20              // (position = 1) in the editors list for the
21              // content type with ID `my-content-type-id`.
22              position: 1,
23
24              // Set values for this location for the app's instance parameters
25              settings: {
26                parameterOne: true,
27                anotherParamter: 'orange'
28              }
29            }
30        }
31      }
32    },
33  };
34}

Field location

If you want an app to render as an entry field, specify the controls property with the field IDs of the content type you want to replace with your app. Each control object can also contain an optional key settings which can be used to set any instance parameters used by the app.

1async onConfigure() {
2  // Get current state
3  // This will be used as base for next state updates
4  const currentState = await sdk.app.getCurrentState();
5  // The return value of `onConfigure` is used to install
6  // or update the configuration.
7  return {
8    // Parameters to be persisted as the app configuration.
9    parameters: { ... },
10    // Transformation of an environment performed in the
11    // installation process.
12    targetState: {
13      EditorInterface: {
14        // Always pass in the `currentState` to avoid
15        // removing any previous location configuration
16        ...currentState?.EditorInterface,
17        // Render the app as two field editors of the content
18        // type with ID `another-content-type` (field: `my-field-id`)
19        'my-content-type-id': {
20            controls: [
21            { fieldId: 'my-field-id' },
22            { fieldId: 'a-field-with-instance-parameters', settings: { parameter: true } },
23          ]
24        }
25      }
26    },
27  };

Entry sidebar location

If you want an app to render in the sidebar of your entry editor, you need to specify the sidebar property as the key for your desired content type. The position value refers to the order in which the app is rendered in the sidebar. 0 means that the app is rendered at the first position. The sidebar object can also contain an optional key settings which can be used to set any instance parameters used by the app.

1async onConfigure() {
2  // Get current state
3  // This will be used as base for next state updates
4  const currentState = await sdk.app.getCurrentState();
5  // The return value of `onConfigure` is used to install
6  // or update the configuration.
7  return {
8    // Parameters to be persisted as the app configuration.
9    parameters: { ... },
10    // Transformation of an environment performed in the
11    // installation process.
12    targetState: {
13      EditorInterface: {
14        // Always pass in the `currentState` to avoid
15        // removing any previous location configuration
16        ...currentState?.EditorInterface,
17        'my-content-type-id': {
18          sidebar: {
19            // Render the app on the top (position = 0) of the
20            // sidebar for the content type with ID `my-content-type-id`.
21            position: 0,
22
23            // Optionally set instance parameters used by the app
24            settings: {
25              parameterOne: true,
26              anotherParamter: 'orange'
27            }
28          }
29        }
30      }
31    },
32  };
33}

Entry dialog location

Dialog locations are enabled by default and do not require any extra properties in the targetState.

Page location

Since the page location is its own route in the web app and does not interfere with the EditorInterface at all, there is no extra property needed for the targetState.

Multiple content types and locations

Since the targetState is a plain JavaScript object, we can add multiple keys to the EditorInterface property. This allows us to support multiple content types and location configurations to build more complex apps. The following example defines a targetState using three content types.

1async onConfigure() {
2   // Get current state
3  // This will be used as base for next state updates
4  const appState = await sdk.app.getCurrentState();
5  // The return value of `onConfigure` is used to install
6  // or update the configuration.
7  return {
8    // Parameters to be persisted as the app configuration.
9    parameters: { ... },
10    // Transformation of an environment performed in the
11    // installation process.
12    targetState: {
13      EditorInterface: {
14        // Always pass in the `currentState` to avoid
15        // removing any previous location configuration
16        ...currentState?.EditorInterface,
17        // Places the entry at the second position in the editors
18        // list for the content type with ID `my-content-type-id`
19        'my-content-type-id': {
20            editors: { position: 1 }
21        },
22        // Places the entry at the first position in the editors
23        // list for the content type `another-content-type-id`
24        'another-content-type-id': {
25            editors: { position: 0 }
26        },
27        // Render the app as two field editors
28        // and render the app on the top (position = 0) of the
29        // sidebar for the content type with ID `another-content-type`
30        'another-content-type': {
31          sidebar: { position: 0 },
32          controls: [
33            { fieldId: 'title' },
34            { fieldId: 'metadata' }
35          ]
36        }
37      }
38    },
39  };
40}