Sitecore Content Hub: The beast is under the hood.

Look under the hood if you want to know the Content Hub better. The default Content Hub pages show you only a limited part of the information. I will try to get more details about the schema definitions used by Content Hub. Let’s start from the Schema page.

Schema

If you open the schema page, you see all the definitions you and your team created and system definitions. The question is if it this all? I know that I see only a few. Because I know, for example, that we have scripts, actions, and triggers, and I don’t see any data about that. When I displayed all entities with API I got a different result. In my case this is 48 (Schema Page) vs. 167 (API).

Wait a minute, hold on. How did you know which API to use?

Explore the API

To start exploring the Content Hub API, just put the /api after your host URL, and you will get the complete list of possibilities 🙂

In my case, I want to get and display all entity definitions. So I’m looking for this kind of API and voilà, I can see have a few.

I will use this one – https://HOSTNAME/api/entitydefinitions. As you can see on example below we have a lot of options to try like skip, take, filter and so on.

entitydefinitions": {
"href": "https://HOSTNAME/api/entitydefinitions{?skip,take,filter,definitionsToLoad,definitionsToLoadByName,definitionsToLoadById,viewMode,loadPermissions,includeConditionalMembers,excludeTaxonomyDefinitions,excludeSystemOwnedDefinitions}",
"title": "Your entity definitions",
"templated": true

The API response is always splited into pages. To navigate thru pages you can use skip & take parameters. Let’s try to get all entity definitions with https://HOSTNAME/api/entitydefinitions. In the response we have information about the total number of items and the number of items returned with the current response.

Let’s try to use take parameter to get all items in one request – https://HOSTNAME/api/entitydefinitions?take=200. The response is

Now I’m smart enough to know that the default page size is 25 and the maximum size is 100.

As you can see, you need to use API to understand Content Hub system definitions better. Knowledge about system definitions can be helpful later when you want to build your administrator pages to understand better what is going on in the system. Using API is suitable for exploring the Content Hub. However, layer for everyday work is better to have a page that displays all definitions. So we will create a custom page with an external component to achieve that.

Add custom page

Adding a new page in Content Hub is very simple. The documentation describes the detailed process – Create a page or a subpage. For example, you can add a new page directly under a Home page or create an Admin page as a root page for all new pages for administrators.

You can modify different settings and add components to the page when the page is created. For now, the most important is the Path setting because it defines a part of the URL to access a new page from the browser.

In my exercise, I will use two components, Title and External; the complete list of available components with a brief description is available in documentation – Page Components.

Add external component

Our external component has a simple job to do. First, get all definitions using Content Hub API and display the results as a table. Each external component has four tabs:

• Configuration – configuration in JSON format and additional files that you want to include in your component
• Code – your Javascript code
• Template – your HTML & CSS code
• Messages – messages if you want to display messages translated to different languages

Note: you should know that by default, each external component can use many different libraries loaded with the external component – the complete list of included libraries.

Implementation

I’m using javascript occasionally, so probably this code does not follow the best standards but at least works well and provide a business value for me 🙂

First, I want to define an HTML markup. I need a simple table with three columns: ID, Definition Name, and Entities. Then, I will inject a table created during a processing API response into the table body.

<table class="table">
  <thead>
    <tr>
      <th scope="col">Id</th>
      <th scope="col">Definition Name</th>
      <th scope="col">Entites</th>
    </tr>
  </thead>
  <tbody id="definitionsList">
  </tbody>
</table>

Next, I need to get the data from API and convert it into an HTML table. So I created two functions, getData and buildTable.

function buildTable(data) {
	var table = document.getElementById('definitionsList')
	for( var i = 0; i < data.length; i++)
	{	
		var row = `<tr>
						<td>${data[i].id}</td>
						<td><a href="${data[i].self['href']}" target="_blank">${data[i].name}</a> </td>
						<td><a href="${data[i].self['href']}/entities" target="_blank">Show entities</a></td>
				   </tr>`
	
		table.innerHTML += row
	}
}

function getData(results, skip) {
$.ajax({
        url: `https://hostname/api/entitydefinitions?skip=${skip}&take=100`,
        contentType: 'application/json',
        type: 'GET',
        success: (data) => {
			  console.log(data.returned_items)
			  results = results.concat(data.items)
              if( data.returned_items < 100) {
				  console.log(results)
				  buildTable(results)
				return;
			  } 
			  else {
				  getData(results,data.returned_items);
			  }
			  
            }

        });
}

var results = [];
getData(results,0);

To be honest, that’s it. Just open a new page and explore the schema more.

The final effect