Sitecore Content Hub External Component

by Danny Paul van Iersel, 18-3-2024

Basics

Potentially any react app can be run within Content Hub.

If you have a bundle of your react application you can reference that to be used as an External Component.

You have 2 ways of adding a bundle to your Content Hub environment:

• External
• Internal

From path: holds an external URL that you can reference.
From Asset: you can link to an internal bundle.

Internal bundles are uploaded to the Portal Assets:

If we switch the configuration view to Text we can type in any configuration the react app requires and use this within the app.

JavaScript SDK

For using the JavaScript SDK you will need to install the package in your application

Install the SDK can be done by: npm install @sitecore/sc-contenthub-webclient-sdk

Some examples on how to use this can be found on the documentation of Sitecore Content Hub: https://doc.sitecore.com/ch/en/users/content-hub/examples.html

With the SDK you can have full control on any part of an entity.

You could plug into any event that Content Hub has like:

• Notifier events
• Search events
• Selection events
• Subscribing events

You can also collect entity properties or relations.

For accessing properties you will need to import features from the SDK using like:

import { IProperty } from "@sitecore/sc-contenthub-webclient-sdk/dist/contracts/base/property";

You can then access properties from an entity with the following code:

var titleProperty: IProperty = entity.getProperty("Title");

For using relations you can use:

import { IRelation } from "@sitecore/sc-contenthub-webclient-sdk/dist/contracts/base/relation";

You can then access relations like the following code:

var relation : IRelation = entity.getRelation("AssetTypeToAsset");

This gives you the ability to access and manipulate the values based on your requirements.

Authentication

If you want to use the Client from the SDK, to query other parts of your Content Hub environment, you will need a OAuth client.

You can configure a new OAuth client within the management section.

A full description on how to configure this can be found on the Sitecore Documentation: https://doc.sitecore.com/ch/en/developers/cloud-dev/authentication-1286145.html

To give you an example on how to use the OAuth clients in your application:

Conclusion

There are many ways to enrich your Content Hub environment and the end user Experience.

With extending your Content Hub with External Components you have an additional endless supply of possibilities.

Are you looking for an implementation partner?

Are you stuck with your setup or cannot reach your potential with your current environment?

We are happy to help and will give you our expertise on how to improve or how to accelerate to higher levels.