Join us live as we unveil the all new Hygraph Studio!

Hygraph
Docs

Sidebar element declaration

KeyTypeDescription
nameStringName of Sidebar element
apiIdStringSide element API ID
typeEnum(formSidebar) (required)Type of element
URLStringSidebar element URL
descriptionStringDescription of Sidebar element
sidebarConfigConfigFieldsOptional definition of instance configuration settings

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:

fieldConfig example - SidebarfieldConfig example - Sidebar

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>;
}