Introduction
Sitecore Content Hub is a great solution for organisations to manage their assets. It has a very clean UI that is built from a range of pre built components. These components are simple to setup and can display the data quickly on pages.
The components work great however depending on the use case you may need to extend the functionality. Minor enhancements like showing/hiding a button to building your own complex view can be accomplished using an external component. More complex use cases though might not be possible with the out of the box functionality.
However there is a solution that allows you to build your own components in a JavaScript framework of your choice and deploy these into the solution for use on your pages.
This is the first in a 5 part series on building React components for Sitecore Content Hub. Here are the all the posts (Links will be added after each post is published)
- Part 1 – The Concept
- Part 2 – Project Setup
- Part 3 – First Component
- Part 4 – Deployment
- Part 5 – Conclusion
For this blog series the component will be build using React. The main reason being that from Content Hub 4.2, React will be used as the main JS framework replacing Knockout.
Sitecore Content Hub 4.2
Anyone thinking of upgrading their Content Hub version to 4.2 now needs to start considering how they want to use external components.
New external components in 4.2 default to a minimised editor experience which removes the ability to add inline HTML and JavaScript. You have to compile your code and add these as portal assets.
This is the method we have used and means then can built in React then added as a portal asset.
The good news is that for now existing external components will still work following an upgrade.
The Problem
The reason we started exploring custom components was due to an issue we found when custom security needed to be applied to a search component.
We tried multiple configuration changes however what we were trying to solve was due to custom schema.
The Concept
The concept I’m going to present here is basically lightweight React files that are written then compiled. Then these are uploaded to Content Hub and referenced using an external component.
In combination with scripts or Azure Functions these components will return the data to the React component.
This example will be a basic component to show how the fundamentals work.
Final Notes
Sitecore Content Hub from version 4.2 onwards introduces React as its JavaScript framework from Knockout. This is a big change and will probably require changes anywhere you use External Components.
Rob Habraken put together a great post on the External Component change here – https://www.robhabraken.nl/index.php/4522/external-page-components-in-ch4-2/
Hopefully this blog post has been interesting and if you are thinking of upgrading to Content Hub 4.2 soon please read the rest in the series to help the migration of external components.
When part 2 is published the link will appear here.
Tim's Blog 
Leave a Reply