Displaying public links inside page component in Sitecore Content Hub

Delve into the world of external page components with a comprehensive tutorial, guiding you through the process of creating a feature-rich component that presents the public links for an asset.

Posted: 1/14/2020

In one of my previous posts I described what external page components are. Today I would like to show you this functionality on a more complex example. Here’s a quick recipe how to create a component which displays available public links for asset.

Description of what External Page Components are, how to add and configure them on page can be found here.


To the template tab add the following HTML. Proposed solution will contain only three pieces of data about each public link: entity id, name and direct link to image.

<div id="publicLinks">
  <table class="table">
        <th scope="col">Id</th>
        <th scope="col">Name</th>
        <th scope="col">Direct Link</th>
    <tbody id="publicLinksTableBody">


We will need to use instance url in our code to fetch data from. To make script environment-independent, we’ll move instance url to configuration tab. In order to do this, put the following JSON in the Config section.

  "instanceUrl": ""


In the code tab put the following JS code.

// get instance url from configuration tab
let instanceUrl = options.config.instanceUrl;

// subscribe to the entity loaded event
let entityLoadedSubscription = options.mediator.subscribe("entityLoaded", async function (entity) {
    let table_body = "";
    let currentTime = new Date($.now());

    // prepare query to get public links using Querying API
    let query = "Definition.Name == 'M.PublicLink' AND Parent('AssetToPublicLink').id == " + + " AND (DateTime('ExpirationDate') equals null OR DateTime('ExpirationDate') gt " + currentTime.toISOString() + ")";

    // fetch data from prepared query endpoint
    let publicLinksForEntity = instanceUrl + "api/entities/query?query=" + query;
    await fetch(publicLinksForEntity).then(resp => resp.json())
        .then(function (linkItems) {
            linkItems.items.forEach(function(item) {
                table_body += '<tr>';
                table_body += '<td>' + + '</td>';
                table_body += '<td>' + + '</td>';
                table_body += '<td><a href="' + item.public_link + '">Go</a></td>';
                table_body += '</tr>';


In today’s post I presented a quick way to display public links in an external page In today’s post I presented a quick way to display public links in an external page component. This is a simplified version of the view available by default after clicking on the Public Link icon. It does not contain much information about a particular rendition (like its name or size), but for testing purposes or with some improvements might be interesting feature in your DAM solution.

Final component look.

Hero image: unsplash-logoIker Urteaga