Today we're thrilled to release a major upgrade of our plugin system, opening up whole new worlds in terms of customization:
Custom Pages: Create full custom apps that live inside the DatoCMS interface, reachable from the standard navigation.
Custom Sidebar Panels: Enrich the editor experience by adding custom panels in the sidebar of the record form.
Automatic field enhancements: Force a particular interface on a record field, without asking the manual intervention of the user to hook the plugin up.
Custom Config Screens: Offer users a custom configuration page, and save settings as you want, without any limitation in format.
Official React UI Components: Build your plugin interface with a set of React components that mimic the DatoCMS interface.
Custom Modals: Open up custom modals to get more room and build more complex interfaces.
Additional permissions: Retrieve the current user's API token and perform any Content-Management API call on their behalf.
Multi-purpose: Use multiple hooks at once to build complex and omni-comprensive experiences.
In the development of the new SDK we have taken into account all the feedback we have received over the years, and especially the concrete uses you have made of it. We tried to give an answer to every need or pattern that we have seen repeated, and optimize as much as possible the plugin developer experience.
Talking about developer experience, everything we just released is 100% Typescript. This means improved auto-completion, contextual documentation, and of course type safety.
Let's see each point in detail!
Custom Pages
Through plugins it is now possible to enrich the functionalities of DatoCMS by adding new pages and sections to the standard interface. These pages are almost full-screen, 100% customisable, and the end-user can reach them through links/menu items that can be added to the different DatoCMS navigation menus:
Custom Sidebar Panels
Within the form for editing a record, it can be convenient to have some contextual information to keep an eye on while you are writing, without having to keep several tabs open or interrupt the flow.
Through plugins it is possible to add a series of additional and fully customisable panels to the sidebar:
Sidebar Panels have access to the complete state of the record form, and can interact with it so the possibilities are endless here. You can also configure the order in which each panel will be shown in the sidebar.
Automatic field enhancements
Old plugins would have to be manually hooked by admins to every field. The new SDK still offers this behaviour (see Manual Field Extensions), but it also introduces new hooks that allow plugins to automatically augment the way fields are presented to the end user, without the admin intervention.
This is a very powerful addition, as plugin can now pick one strategy or both, depending on what would be the most comfortable and natural way to offer its functionality to the end user.
Custom Config Screens
While old plugins could only offer a limited set of configuration options, new plugins have a way of rendering their own config screen, and storing user preferences in a completely arbitrary format, with no restrictions.
The same applies to Manual Field Extensions too!
Official React UI Components
To reduce the overhead of creating UI and to provide tools and guidance for digital teams building and extending DatoCMS, we released a set of React components under the package datocms-react-ui.
Using them you'll offer a seamless experience to the end user, and cut down precious development time.
Custom Modals
Within all the locations where a plugin can work, it is possible to open custom modal dialogs to "get out" of the reduced space that the original iframe provides, and get more room to build more complex interfaces.
Modals can be opened in various sizes, and return a value to the opener to communicate the final result of the operation.
Additional permissions
Many existing plugins had a configuration option to store a DatoCMS API token, so that they could perform various operations on the Content Management API.
New plugins can now request specific permission to access the current user API token. When installing the plugin, the user must explicitly grant these permissions, otherwise the installation process will be aborted:
Multi-purpose
One of the nicest additions to the new SDK is that you can do all of what you just read, inside a single plugin. That is, plugins can declare multiple hooks, thus adding multiple pages, sidebar panels, field extensions, etc.
No only that, but plugins can also customize their behaviour based on the current user and its role, so some pages might be visible to admins, but not regular editors.
We're just getting started!
With this major upgrade, we've built a solid foundation on which we'll be able to offer all kinds of UI customization in the future. We already have dozens of ideas in mind that we'd like to implement in the near future, and the architecture we've chosen allows to add new hooks with ease.
All plugins already created by the community will continue to work as before, but we strongly encourage everyone to make all new plugins taking advantage of the powerful new SDK.