Wchtools configured to your tenant and user. For more information, see wchtools.
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.
- Dropdown with selections coming from a 3rd party API
- Category selection from a custom taxonomy
- Custom rich text editor
- Emails address showing custom validation
- Google Maps location selection
a. To install all the samples at once, run the following command.
chmod 777 ./install.sh
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
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.
The APIs you add might require an API key or other authentication and will return a different JSON representation.
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.
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,
- Open the text element > Advanced tab
- In the Provide a custom user interface for the element field, add
Option 1: Add the following script to the UI extension HTML file.
Option 2: Install the libraries separately as node modules through npm.
npm install --save post-robot
npm install --save @ibm-wch/ui-extensions
For more information on how to develop and test your new UI extensions, see the sample-custom-element-ui -README.md
Updated about 1 year ago