Overview

Skill Level: Any

Custom user interfaces can be used to define the display and function of an element in the content authoring form. You can add entirely new elements to Watson Content Hub. You can use the custom user interface to configure the elements in the content form to use data from external systems such as commerce and Watson Campaign Automation products.
The custom user interface runs in an iframe. The custom user interface applications interact with Watson Content Hub through the JavaScript library.
Watson Content Hub provides you the JavaScript library that you can use to create custom user interfaces. You can also use the readily available samples and make them your own. The following tutorial shows you how to work with the custom user interfaces.

Prerequisites

Wchtools configured to your tenant and user.  For more information, see wchtools.

For more information about Watson Content Hub and all the available Watson Content Hub developer tutorials, click here.

Step-by-step

  1. Download the samples

    Watson Content Hub provides several samples that are ready to use . You can download all the samples at once or download them individually. The following are a few examples of the samples that are available to download.

  2. Install the custom user interface samples

    a. To install all the samples at once, run the following command.

    chmod 777 ./install.sh
    ./install.sh

    Note: You will be prompted for your password.

    b. To install individual samples, download the sample that you want and from the content-artifacts directory of the sample run the following command.

    wchtools push -A -v –I --publish-now

  3. Make the samples your own

    The samples contain content for demonstration purposes. You can customize them to make them your own.

    You can edit the html, JS, and css files to customize the samples to meet your needs.

    For example, change the index.html file to point to the Rest API of your choice in the dropdown extension or the category selection samples.

    Note: The APIs you add might require an API key or other authentication and will return a different JSON representation.

  4. Add the custom user interfaces to your content type as custom elements

    After you install the sample custom user interfaces, they will be available as custom elements in the Content Hub element palette. The Content Hub admin or manager can add them to a content type as they would normally add an element.

     

  5. Add the custom user interfaces to an existing element

    The custom user interfaces can also be used to customize the display of any element. Your admin or manager can set the custom design of the element to the index.html of the respective custom user interface sample.
    For example, to display the text element as a dropdown,

    1. Open the text element > Custom display tab
    2. In the Provide a custom user interface for the element field, add /dxauth/ui-extension-dropdown/index.html
  6. Create a custom user interface from scratch

    You can use the sample  UI extensions Javascript library as a starting point to create your own custom user interface. The UI extensions Javascript library uses Post-robot to enable cross domain messaging. To create a custom user interface from scratch, you can use either of the following methods:

    1. Option 1: Add the following script to the UI extension html file.
      <script src="https://www.digitalexperience.ibm.com/auth/ibm-wch-ui-extensions.js"></script>
    2. Option 2: Install the libraries separately as node modules through npm.
      npm install --save post-robot
      npm install --save @ibm-wch/ui-extensions

    The UI extension Javascript library uses the wchUIExt variable to communicate with the Content Hub UI. For more information for working with the Javascript library to create custom user interface, see UI Extensions Javascript library.

    For more information on how to develop and test your new UI extensions, see the sample-custom-element-ui -README.md

Expected outcome

For more information about Watson Content Hub and all the available Watson Content Hub developer tutorials, click here.

Join The Discussion

Your email address will not be published. Required fields are marked *