We're transitioning Studio from Beta to Early Availability
Hygraph
Docs

You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

Using UI extensions

#Field extensions

To use a field UI extension in the content editor, add it to a content model like you would with default Hygraph fields. In schema editor, pick your custom field from the list. It will be grouped with other fields according to the fieldType value specified in the declaration.

Available Fields with UI extensionAvailable Fields with UI extension

Just like any other field, it will need a display name and an API ID. Default validation and configuration options are available to custom fields as well.

Add UI ExtensionAdd UI Extension

Once your custom field is ready, go to content editing and add a new entry. You should now see your custom UI extension rendered:

UI Extension Field RendererUI Extension Field Renderer

#Sidebar extensions

To use a Sidebar Extension in the content editor sidebar, do the following steps:

#Customizing sidebar widgets

  1. Go to Schema editor
  2. Click on the model you would like to edit
  3. Below model's name, click on Sidebar tab
  4. Under Sidebar Widgets, click on the widget you would like to add
  5. Click on Create to finish

#Previewing your customized sidebar

  1. Go to Content or click on Go to content editing link at the top right corner
  2. Click on the model you've edited in the previous step
  3. Click on Add New Item or edit an existing one

Now, you should see your customized sidebar and can use your sidebar extensions.

#Next steps