You probably familiar with Sitecore Content Hub pages and pages components, you could tried adding the out of the box components to a page but do you know that you can create you own component? In this post I will explain Sitecore Content Hub External Components and walk you through creating a simple CH external component.
So, What is CH External component?
Simple the external components are a functionary that CH offer which enable you to extend the OOTB components by creating a custom component, where you can include external libraries and integrate them with CH, which enable flexibility and advanced customization.
Where I can create External Component and How I can add it to a Page?
You can create external component by accessing the Admin section, then go to Pages, after that navigate to your page, see the following screenshot for more information:
Once you create and add the External component into your page, you will be able to edit it, and once you access the edit/detail section, you will see 4 tabs, Configuration, Code, Template and Messages, I will give you a simple example of how you can use the code and template sections.
Template:
Template section represents the mark-up for your rendering, you can add the html you want to render, as example if we want to rendering a heading with a div we can add the following code:
<h2>RELATED ASSETS</h2>
<div id="assets-result"></div>
Code:
Code is the section where you add your custom code, but what type of code, what language? you can use an OOTB included libraries and you can import your own, jQuery, knockout, bootstrap and many more, here is a link where you can see the full list:
Lets assume that you want to retrieve a list of assets using an API request, where you search for specific keyword and render these in a list, check the following example code, you can do an Ajax call to the CH API, retrieving a Json result, then loop through the result and render the content, see how we are using jQuery to get the targeted div and render the content into:
Hope the above give a clear idea of what is external components in Content Hub and how you can create one. If you have any comments or question, feel free to comment here or send an email.
No comments:
Post a Comment