Overview

Skill Level: Intermediate

This tutorial is intended for developers and architects. It illustrates how a Forms Experience Builder Application can interact with Watson Content Hub to retrieve and display metadata as well as images. This article is not intended to be an introduction or tutorial for either FEB or WCH.

Watson Content Hub (WCH) is a headless content management system in the cloud with rich APIs that provide developers REST access to that content to use wherever it is needed. Forms Experience Builder (FEB) is a tool that enables line of business users to create web forms applications for stand-alone use or for customer and employee websites. Non-technical users are able to create sophisticated web applications complete with forms, database, reports, security, and more. In addition, FEB is also built on a REST architecture, so the two technologies integrate together naturally.

The following tutorial illustrates how a Forms Experience Builder Application can interact with Watson Content Hub. The tutorial shows an example of how to create a FEB application form that captures information about an upcoming (fictitious) conference by pulling some metadata and an image from WCH. One of the collected data points is the participant’s choice for a meal option. The list of selections in the “Meal Option” dropdown are pulled directly from WCH. As the user selects a “Meal Option”, the details are returned and presented to the user. However, the steps can be extrapolated to pull back however many data points as required.

Prerequisites

Basic knowledge of Forms Experience Builder on Cloud.

Knowledge of basic JavaScript programming techniques is helpful, but not critical to this endeavor.

You must have a Watson Content Hub tenant from which you want to select Content or Assets. If you do not already have a Watson Content Hub tenant, you can sign up for free here: https://www.ibm.com/uk-en/marketplace/cloud-cms-solution

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

Step-by-step

  1. Creating Content in WCH

    Add content type (i.e. Meals) with the desired metadata. In this case, the name of the dish, the estimated calories, and a sample image.

    WCH Content Type

    Add content to the new content type, and fill in all of the metadata. Upload images.

    WCH Sample

  2. Determine REST API URL to pull content from WCH

    To determine what the base WCH REST URL is, from the WCH dashboard, select your name in the menu bar, and select “Hub Information”.

    WCH Base URL

    WCH Base URL - Detail

  3. Create FEB Form using FEB on Cloud

    Log into FEB on Cloud environment

    Create new application

    From the palette, create items for the Meal Option list, and for metatdata items (in this case, Meal Option (Drop Down), Calories (Field) and an Image (Image))

    Create FEB Form

  4. Populate Meal List

    Access WCH REST service

    Make sort option “assignable”

    Map “sort” item to constant value of “name asc” (if you want your list sorted). Otherwise, remove sort option altogether

    Map output items. Map the NAME to the displayed value, and the ID to the saved value

  5. Call Service to populate list of menu options

    Call service during Form onNew event.

  6. Create hidden section store returned metadata values once a meal is selected

    Add placeholders on form for metatdata items

  7. Create a service call to return details for a selected meal

    Create service call

    Make last parameter “assignable”

    Map the input item to the selected meal

    Map output assignments to hidden fields

  8. Call the service when meal selected

    Call the new service on the Meal drop down onItemChange event

  9. Set the image URL

    Set the image URL to the returned data URL from the service. On the hidden URL onItemChange event

Expected outcome

The sample FEB application form about an upcoming (fictitious) conference with content information about the participant’s choice for a meal option pulled from WCH was created. As the user selects a “Meal Option” in the form, the details are returned and presented to the user.

This tutorial illustrates that integrating Watson Content Hub with Forms Experience Builder can add dynamic content/images to your applications with minimal effort. Leveraging WCH allows you to control the content outside of the FEB environment, which promotes reuse and standardization.

Refer to the article Forms Experience Builder Community for a product overview, and to understand best practices, integration tips, and sample applications.

References

   IBM Watson Content Hub API

   Visual Overview of Content Types in WCH

   Introduction to Forms Experience Builder

   Forms Experience Builder Best Practices

   Forms Experience Builder Technical Documentation

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

1 comment on"Using Watson Content Hub to make your Forms Experience Builder applications pop!"

  1. Marty_Lechleider July 27, 2017

    Excellent article!

Join The Discussion

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