JavaScript customization in Sitecore Content Hub - introducing External Page Components

Posted: 12/13/2019

As in Sitecore Experience Platform customization is hugely important to prepare the best user experience, same is for Sitecore Content Hub driven solutions. In addition to strictly backend methods such as scripts and Azure Functions, it is also possible to manipulate the data displayed to the user on individual pages. This is possible thanks to the External Page Components.

Adding external page component to your page

In order to add an External Page Component to your page, go to Manage tab and choose Pages. For the purpose of this tutorial, we will add a new component to the Asset Detail Page, which is one of the most commonly used pages.

You can search for the page you’re looking for by using search box in left sidebar.

After clicking on Asset Detail Page in left sidebar, the main window will display the structure of the page. It’s divided into sections containing components visible after entering the given page. You can rearrange the components in the section using the drag and drop option available after clicking “dots” icon.

Asset Detail Page structure.

To add a new component, click on ”+” icon in the section you want to edit. From long list of available components, choose External. Add a name to the newly created component and remember to set Visible option on - this is necessary for correct work, even if you don’t plan to add any visible content to the component.

Add external component popup.

After that, your component is ready for customization. Click on its name which will redirect you to the component edit page.

Component settings overview

Configuration

The first tab you will see after going to the component edit option is the configuration tab, divided into three sections - control name, config and resources. It is recommended to follow a naming convention when setting Control name, as in the example below: [project name].Controls.[component name]

In the config section you can add your custom parameters which will be available for the control, e.g. in Code tab. However, the most interesting is the Resources section. Through this button we can attach our custom js file or, as mentioned in the documentation, connect a javascript framework like vue.js. This allows us for almost unlimited configuration options for the component.

How to setup vue.js to work with external page component you can find here.

Code

Code tab is probably the most important and grants the most freedom in customization. It allows you to inject js code which will be run when the component will be iniatialized on the page. Thanks to predefined external component events and options you can create your own flow which can be used e.g. to retrieve data from entity and manipulate it.

Full list of libraries available by default for component you can find here.

Template

The template tab is used for creating HTML markup for component. Default styles will be automatically applied to the markup or we can use our custom CSS classes if we defined them (inside Theme).

Template tab with example component markup.

Messages

Messages are used to inject translations into component. In this example we won’t use them.

Displaying results

To check how your component is displayed, go to the page where you added it. Unlike scripts that require building code to test results, the External Page Component is automatically updated after each save operation, so you can check the status of your current work by refreshing the page to which the component is attached.

REMEMBER
Adding an External Page Component is kind of “hard” customization - requires the use of built-in Sitecore Content Hub libraries, which can change over time and cause that the component will stop working after platform upgrade. It is not recommended to use it unless it is necessary and business viable.