Extend Your Content Hub with External Components!

External components bring extra power to your Content Hub, letting you add new features and connect with other tools.

Curious why everyone’s talking about external components?

It’s because Content Hub made a big change. We switched from Knockout to React as the main tool for making pages better after the 4.2.0 release. This change means we can now use React to build external components.

In Sitecore Content Hub, we have two types of components:

1. In-built Page Components: Typically refers to the pre-defined, ready-to-use components that are provided within the platform for building web pages or digital experiences.

Example — Text components, Image components, Media components, CTA components, Navigation components etc.

2. External Components: These are components that are developed by third-party vendors or developers outside of the platform’s core offerings. They extend the functionality of the platform by providing additional features or integrations that may not be available out-of-the-box.

In this blog, we will focus solely on React based external components.

Use Case — Let’s create a React based external component to showcase the profile of the logged-in user.

Step1 — Create a React App using either the command provided below or opt for the existing Content Hub External Components Starter Template accessible in the public git repository.

npx create-react-app ReactApp
cd ReactApp

Step 2 — Launch your React app in VS Code. Go to the src directory, then establish a new folder named “Components”. Inside this folder, generate a file named “UserProfile.jsx”.

Note — This app has been developed using the provided starter template link. If you decide to create the app from scratch, ensure to incorporate the webpack configuration to generate the bundled JS file, which can be subsequently hosted in the Content Hub environment.

Step 3 — Please paste this code into the UserProfile.jsx file, ensuring to replace “<YOUR_CONTENT_HUB_URL>” with the actual URL.

import React, { useEffect, useState } from 'react';

const UserProfile = () => {  

    const [userData, setUserData] = useState(null);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);
  
    useEffect(() => {
      // Fetch user data from the backend server or API
      fetch('<YOUR_CONTENT_HUB_URL>/api/userProfile', {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then(data => {
        setUserData(data); // Set the fetched user data
        setIsLoading(false); // Set loading state to false
      })
      .catch(error => {
        setError(error); // Set the error state if fetching fails
        setIsLoading(false); // Set loading state to false
      });
    }, []);
  
    if (isLoading) {
      return <div>Loading...</div>;
    }
  
    if (error) {
      return <div>Error: {error.message}</div>;
    }
  
    let modules = [];
  
    userData.modules.forEach((module, index) => {
        modules.push(<li key={index}>{module}</li>);
    });
  
    let isAdmin = userData.is_restricted == true ? "No" : "Yes";

    return (
      <div>
        <h2>User Profile</h2>
        {userData && (
          <div>
             <p><b>User Id:</b> {userData.user_id}</p>
            <p><b>User Name: </b>{userData.username.match(/^([^@]*)@/)[1]}</p>
            <p><b>Email: </b> {userData.email}</p>
            <p><b>Is Admin: </b> {isAdmin}</p>
            <p><b>Assigned Modules: </b> <ul>{modules}</ul></p>

          </div>
        )}
      </div>
    );
  };

export default UserProfile;

Step 4 — Let’s register this component in the index.jsx file which is expected in your src folder.

import ReactDOM from "react-dom";
import React from "react";
import UserProfile from "../Components/UserProfile";

export default function createExternalRoot (container) {
    return {
        render() {
            ReactDOM.render(
                <UserProfile/>,
                container
            );
        },
        unmount() {
            ReactDOM.unmountComponentAtNode(container);
        }
    }
}

The User Profile component development is complete, showcasing basic user information. If everything has been done correctly, running the “npm run build” command should produce the JS file in the public folder.

Step 5 — Now login to your Content Hub instance and create one page. Scroll to the Main Zone Row section and add one external component.

Step 6 — Now click on your External Component which was just added and open the settings as showing below:

Choosing the Bundle Source: You have two options for sourcing your bundle.js file:

Option 1 —Choose the first radio button if you prefer utilizing your bundle.js file from a hosted environment. For example, you can run your React app locally and input the bundle.js URL as indicated.

Option 2 — Opt for the second radio button if you wish to retrieve the bundle.js file from Content Hub’s portal assets. To proceed, upload your bundle JS file to the Content Hub Portal assets repository.

After uploading the file, return to your External Component settings, select the uploaded file, and then save and close the settings.

We’ve completed all the necessary steps, now let’s review the outcome. If everything was executed correctly, upon accessing this page, we should observe an output similar to this.

You can find my other blogs here.

Thank you!