Documentation
Help centerCommunityDevelopersAcademyStatus

Custom user interfaces

Suggest Edits

For marketers

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 Acoustic Content. 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 Acoustic Campaign Automation products. The custom user interface runs in an iframe. The custom user interface applications interact with Content through the JavaScript library. Content 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 custom user interfaces.

Before you begin

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

Download the samples

Content 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.

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

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.

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 Design tab. The Content admin or manager can add them to a content type as they would normally add an element.

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 > Advanced tab
  2. In the Provide a custom user interface for the element field, add /dxauth/ui-extension-dropdown/index.html

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:
Option 1: Add the following script to the UI extension HTML file.
<script src="https://content-eu.goacoustic.com/auth/acoustic-content-ui-extensions.js"></script>
or
<script src="https://content-us.goacoustic.com/auth/acoustic-content-ui-extensions.js"></script>

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 UI. For more information for working with the Javascript library to create a 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

Updated almost 2 years ago