Custom Sidebar is a new hook that joins the many other powerful tools offered by the DatoCMS Plugin SDK. Thanks to it, developers can build plugins that introduce sidebars with custom content into the DatoCMS UI. The possibilities offered by this mechanism are truly endless. The live content preview plugin is just one of the many powerful features that can be implemented in DatoCMS thanks to the hook.
In this guide, you will understand what Custom Sidebar is, why it was added to DatoCMS, and what its main use cases are.
Let's dive right in!
What Is the DatoCMS Custom Sidebar Hook?
Custom Sidebar is a DatoCMS Plugin SDK hook that allows showing contextual information in a custom sidebar. In detail, developers can use it to create plugins that introduce a fully customizable record-related sidebar to the DatoCMS content management dashboard:
In addition, developers can also use the Custom Sidebar hook to add custom panels to the default “Info” sidebar:
What to show in these sidebars or sidebar panels is up to the plugin developers. For example, they could:
Show information about the record being edited.
Display general data about the DatoCMS project.
Preview information related to the logged-in user (personal information, roles, and more).
Similarly, devs can take advantage of these sidebars to integrate functionality from DatoCMS or other services via API. This is what composable architecture is all about.
As you imagine, Custom Sidebar opens up endless possibilities. Stay tuned as we will uncover some game-changing use cases later in the article!
Why the DatoCMS Plugin SDK Needed a Custom Sidebar
The Custom Sidebar hook was born when the DatoCMS development team started to work on the internal live preview feature. Implementing it required a specific mechanism to show the live content close to the record being edited. This is when the idea of a new plugin hook to add custom record-related sidebars was conceived.
The team immediately recognized that the sidebar mechanism could serve a broader purpose. So, we decided to make it a powerful and versatile tool available to all plugin developers. The new hook gives users the ability to see contextual information or access new features without having to leave the page. This boosts the user experience, also leading to improved productivity. Here is why the DatoCMS Plugin SDK needed a hook for custom sidebars.
Check out the May 2023 Update article to learn more about the introduction of Custom Sidebar in DatoCMS. The idea has proven successful because, as you are about to see, there are already several sidebar plugins based on this hook.
DatoCMS Custom Sidebar: Existing Plugins
Let's dig into the most popular and useful DatoCMS plugins based on Custom Sidebar available as of this writing.
Web Previews
The Web Previews plugin adds a side-by-side live preview section where to explore previews of unpublished/draft content directly within DatoCMS. Also, it adds quick links to the preview pages in the “Info” sidebar.
See the Web Previews plugin in action in the video below:
As you can see, this tool is a great ally to editors for at least three good reasons:
Quick content assessment: Editors can instantly see how their content will appear, ensuring that it fits the site's design and layout as desired.
Improved user experience: Live previews enhance the editor's experience, streamlining it and making it way more intuitive.
Efficient editing: Real-time previews reduce the need for a constant back-and-forth between editing and viewing. Editors can now confidently publish content knowing it will need minimal revisions, saving time and effort.
Keep in mind that the Web Previews plugin requires some coding to work properly. Follow the instructions on the GitHub page of the plugin to integrate it into your DatoCMS project. If you are a Next.js user, take a look at our guide on Next.js Preview Mode to better understand what you need to do.
Sidebar Notes
When defining new records, you may have some ideas for future implementations. To avoid losing them, it is essential to write them down. This is what the Sidebar Notes plugin is all about!
Specifically, the plugin adds a sidebar panel where you can add Post-It-like notes related to your records:
Write and store these notes directly on the record definition page to save time and never lose them!
Sidebar To-Do Lists
Sidebar To-Do Lists is a DatoCMS plugin that allows you to add a contextual to-do list associated with the record you are currently editing:
That is critical because content editing does not typically end with adding a new record. Other actions usually follow. For example, a newly published article needs to be promoted on social media. In a similar way, complex records may require a creation procedure involving several steps. Keeping track of these tasks in a to-do list helps achieve the desired goal.
Record Comments
Record Comments is a plugin that enables you and your project collaborators to leave comments under a record:
In most cases, content needs to be reviewed by different team members. That is especially common in large companies. The fact is that each might have a different opinion or thought to share. Instead of having to copy the content into a tool like Google Docs to enable collaboration, this plugin simplifies the feedback delivery process. In particular, it makes it possible to leave comments directly on the DatoCMS record page.
Others
Other useful sidebar plugins to mention are:
Project Exporter: To export records and assets from your project directly from DatoCMS.
Spreadsheet Record Exporter: To export records as a spreadsheet through the editor dashboard.
Crowdin Translations: To integrate Crowdin's localization features into the headless browsers.
Matomo: To integrate Matomo Analytics into your DatoCMS project.
These are only some examples, but there are many more plugins available. Try them all!
Possible Use Cases of Custom Sidebar in DatoCMS
Custom Sidebar offers endless possibilities thanks to its ability to:
Display contextual information.
Allow users to perform actions without leaving the page.
Here we gathered some of the most interesting possible use cases:
Integrate an AI-based assistant: The sidebar section lends itself to integration with external services such as ChatGPT. Imagine having access to an AI chatbot directly on the record editing page. That would help you to get suggestions, feedback, and fresh ideas from ChatGPT while you create great content. It might also introduce impressive automatic content generation capabilities, as in the video mockup below:
Represent record relationships: While viewing a record, display an ERD-like graph showing its relationship with other records to better understand the overall context. Try our ERD Schema plugin as well!
Enhance headless e-commerce integration: Headless e-commerce solutions like Shopify and Snipcart typically expose useful data via API. Instead of replicating it in DatoCMS or researching it by exiting the content editing platform, this info can be retrieved and presented in the sidebar section by a plugin. Every DatoCMS product record linked to a headless e-commerce product will now be enriched with helpful information. Read our article on how to build an ecommerce with Next.js and Snipcart.
Visualize the content workflow: View the progress of a record through the content management process workflows while working on it.
List record edit history: Given a record, fill the sidebar with a complete timeline of edit history, including save, publish, and unpublish operations.
Time to see more specific use cases for sidebar plugins, focusing on real-world industries and applications:
Libraries and bookstores: When editing an author's profile in DatoCMS, display a side-by-side list with all the articles they wrote for efficient catalog management.
Museums: Given a DatoCMS record for an art piece, use the sidebar to display 3D renderings or other details retrieved via API from the catalog management software.
Real estate: Show a large map from Google Maps in the sidebar panel to pinpoint coordinates for various records, such as a series of real estate properties.
Healthcare: Take advantage of a Custom Sidebar plugin to display the patient's medical history when editing their data.
Education: When editing a course, use the sidebar to view its syllabus, materials, and student enrollment stats.
Wow, most of these ideas are awesome! And we only scratched the surface of the possibilities introduced by the Custom Sidebar plugin hook!
Conclusion
In this article on sidebar plugins, you dug into the Custom Sidebar hook from the DatoCMS Plugin SDK. In particular, you understood what the tool has to offer and how it can be used to achieve amazing results.
You now know:
What the Custom Sidebar hook is.
Why it changes forever the way DatoCMS plugins operate on the UI.
How it allows you to live preview content on pages while editing.
What the most interesting use cases for the plugin hook are.
DatoCMS keeps improving and the list of features gets longer every month. Want to give it a try? Sign up for free today and get your hands on one of the most feature-rich headless CMSs on the market!
Thanks for reading! We hope that you found this article helpful. Feel free to reach out to us with any questions, comments, or suggestions. Consider also joining our community on Slack.