Sidebar element declaration

Sidebar element propertiesAnchor

Sidebar configurationAnchor

This is an example for the JSON object for the sidebar configuration:

{
  "CUSTOM_SETTING": {
    "type": "string",
    "description": "Field description",
    "displayName": "testString"
  }
}

The schema view of the above example would look as follows:

This information will be sent as metadata to the app element, and will display in the schema editor - as part of the custom sidebar widget that it was configured for - and users will be able to add it to their models.

To later retrieve this information, you can do this:

// Reading config data in Sidebar Extension

function SidebarElement() {
  const {
    extension: { fieldConfig },
  } = useFormSidebarExtension();
  const customField = fieldConfig?.CUSTOM_SETTING;

  return <div>{customField}</div>;
}