External component with Handlerbars.js integration

Integration with third-party UI libraries is possible due to the flexibility of the external component.

The following example uses the Handlebars.js library to display information about an asset through the external component.

Configuration tab

Control name: the control should be unique on the page: here we use custom.controls.MyCustomControl.
Config: we do not need additional parameters for this example.
Resources: we add our code library CDN url https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.js.

Code tab

The code illustrates the initialization of a simple Handlebars.js component. Its instance subscribes to the entityLoaded event. When the entity loads, the required information maps to our component. On every entity saved, the entitySaved event triggers to update the information.

In this example, we use the following code:

var source   = document.getElementById("entry-template").innerHTML;
var template = Handlebars.compile(source);

var entityLoadedSubscription = options.mediator.subscribe("entityLoaded", function (entity) {
    updateUI(entity);
    var entitySavedEvent = Utils.format("entitySaved:{id}", { id: entity.systemProperties.id() });
    options._page.mediator.subscribe(entitySavedEvent, updateUI);
});

function updateUI(entity){
    var title = entity.properties.Title();
    var description = entity.properties.Description()[options.culture];
    var context = {title: title, description: description};
    var html    = template(context);
    document.getElementById("handlebars-result-container").innerHTML = html;
}

Template tab

Our external component code requires the following HTML markup:

<template class="entry" id="entry-template" type="text/x-handlebars-template">
    <h1>{{title}}</h1>
    <div class="body">
      {{{description}}}
    </div>
  </template>
  <div id="handlebars-result-container">
  </div>

End result

After saving the changes, we navigate to an Asset details page. Our external component is displayed:

Can we improve this article ? Provide feedback