UI extensibility
As every user has different needs, the Front Matter extension allows you to extend the UI with your own custom elements and components which can be used in the Front Matter dashboards and the panel.
The approach we choose, is to let you register a JavaScript file which will be loaded in the dashboard and panel.
Extensibility points
Front Matter CMS allows you to extend the UI in the following places:
-
Content dashboard
- Image
- Footer
- Draft status
- Date
- Title
- Description
- Tags
-
Panel
- Custom panel view
- Custom fields
Registering a custom UI extension
To start, you will need to create a JavaScript. To make it easier, you need to make use of the @frontmatter/extensibility dependency which makes all the necessary functions available.
Once you have created the JavaScript file, you can register your UI script in
the frontMatter.extensibility.scripts
setting as follows:
The extensibility framework options
Development mode
To enable development mode, you can use the enableDevelopmentMode
function. This will allow you to
reload the webview and open the developer tools without the need to reload Visual Studio Code.
Once the development mode is enabled, you will see the developer bar at the top of the webview.
Registering a card image
To register a custom card image, you can use the registerCardImage
function. This functionality
allows you to register your own image/element on the content card.
- The
filePath
parameter contains the path to the file which is being rendered in the card. - The
metadata
parameter contains the metadata (front matter) of the file which is being rendered in the card.- On this metadata object, you can find the
fmPreviewImage
property which contains the webview URL of the current project. You can use this property to render your own image located in the project.
- On this metadata object, you can find the
Example of a custom image rendering:
Example of using the fmPreviewImage
property:
Registering a card footer
To register a custom card footer, you can use the registerCardFooter
function. This functionality
allows you to register your own footer/element which will be rendered at the bottom of the content.
Example of a custom footer rendering:
Registering a panel view
To register a custom panel view, you can use the registerPanelView
function. This functionality
allows you to register your own panel view which will be rendered in the panel.
Example of a custom panel view rendering:
Registering a custom field
To register a custom field, you can use the registerCustomField
function. This functionality
allows you to register your own custom field which can be used when editing the front matter.
The custom field requires a bit more work, as it comes with a change handler for the field value updates. To make it easier, it is recommended to use for instance a library like lit to create your custom field.
Once this script has been registered, you can use the customField
type in your content-type.
Register it as follows:
Example of a custom field rendering:
Feedback/comments
Did you spot an issue in our documentation, or want to contribute? Edit this page on Github!