Creating Custom Component in Content Hub using External Component

Hello everyone, In this blog, we will see how we can add an custom component in Content Hub. We will create a component which will display all related assets based on loaded Asset title.

Creating custom component depends on utilizing External Component.So we will follow below steps to achieve the same. We will be using Knockout JS for the implementation.

• Step1 : Adding External Page Component to Asset Detail Page
• Step2 : Code Logic implementing Related Asset Component

Step 1

Go To Manage Page --> Search Pages --> Search Asset Details.

Select Any row and click on add component basically the + symbol. In above screenshot, just click the plus symbol below Related Asset component.A popup will come up. Search for External keywork in search bar and click the result which comes up.Another popup will come and we will give our component a name and enable the visisble checkbox as shown below and click Add.The component will be added to layout.

Once the component is added, just click the component and it will open the external page component.If you see the below view, then its will not support Knockout js HTML JS templte. We have to change the system setting version from 3.0 to 2.0

Once you save, the external component view will change.

Select Configuration tab and give a name in control name. Code tab where our js logic will go and Template tab will have the html.This compomemt will look like this on Asset Detail Page

Step 2

HTML Code

       
<div>
    <div>
        <h1>Related Assets:</h1>
        <div>
            <ul data-bind="foreach: items">
                <li>
                    <a data-bind="text: $data.id, attr:{href:$data.detailPageLink}"></a>
                </li>
            </ul>
        </div>
    </div>
</div>
	   
 

JS Code

       
var self = this;
self.items = [];
self.Title = null;
var entitySavedSubscription = null;
var entitySavedEvent = null;
const take = 5;
var skip = 0;
var totalItemCount = 0;
var prevUrl, nextUrl = "";

var url = null;
var entityLoadedSubscription = options.mediator.subscribe("entityLoaded", function(entity) {
    
self.entityId = entity.systemProperties.id();
self.Title = entity.properties["Title"]();
 

url = `https://hostname/api/entities/query?query=Definition.Name=="M.Asset" AND FullText=="${self.Title}"&take=3&skip=0`;
showRelatedAssets(url)
});


function showRelatedAssets(url){
    if(take != null && take >0 && self.Title != null){      
        // empty search results, pageCounter, prev and nextURL, and hide the buttons
        $.get(url,function(data) {
                 // use .forEach on data.items to write the data to the div
                 console.log(data);
                 console.log(data.items[0]);
                 self.items = data.items.map(item=>({
                     ...item,
                     detailPageLink:`https://hostname/en-us/asset/${item.id}`
                 }));
        });
        totalItemCount = data.total_items;
        // show the buttons in case if there is data on the previous or the next page; you can also add a page counter here. A lot of ifs here :)
    }
}
	   
 

After adding the above code and clicking save, now when you go to Asset detail page, you should be able to see the Related Asset it with the links

To verify the resule just search the title from Asset detail page on search bar on search page and you should get the same result.Check the below screenshot

Hope you enjoyed my blog.For this blog, we have used Knockout.js. Same component,we will devlop using React.js in future. Thanks for reading and Happy Learning!!

You can check my other blogs blog related to Sitecore