Overview

Skill Level: Any

A configurable component can be added to a page just like any content. Adding the new components to your site is fast, simple, and easy. A script command added to the package.json file automatically generates the templates for your site. The following tutorial shows the instructions to create an Iframe component and add it to your site.

Prerequisites

To get started, you need:

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

Step-by-step

  1. Create a content type

    Create the Iframe content type in the Watson Content Hub UI and add to your site. The Iframe content type has the following elements and settings:

    • Name: Iframe
    • Elements:
      • source: link (required)
      • width: number (required, minimum value of 0)
      • height: number (required, minimum value of 0)
  2. Generate template files for the new component

    After you create the content type, run the npm script in the SPA project to generate the template files for the new component:

    npm run create-layout -- --type Iframe

    The template file that is generated src/app/components/iframe/abstractIframeComponent.ts has the following three bounded elements:


    @RenderingContextBinding()

    readonly source: Link;

    @RenderingContextBinding()

    readonly width: number;

    @RenderingContextBinding()

    readonly height: number;

    Use these variables to access the content type data.

  3. Create layout

    Define the layout by referencing the variables from the template in the src/app/layouts/iframe/iframeLayout.html file with the angular notation.

    For example:

    <div [id]="(onRenderingContext | async).id">

            <iframe class="wch-iframe" [src]="source.linkURL | formattedText:'resourceUrl'" [width]="width" [height]="height">

                   Sorry, your browser does not support inline frames.

            </iframe>

    </div>

  4. Add styling to the component

    Add style elements to the src/app/layouts/iframe/iframeLayout.scss file. For example:

    .wch-iframe {

            resize: both;

            max-width: 100%;

    }

  5. Publish the code changes to your site

    • Run the following command to build your code.

      npm run build

    • Run the following command to deploy your code.

      npm run deploy

    Note: You must re-enter your Watson Content Hub password for you to successfully run the commands.

  6. Add the component to a page

    The new component can now be added to a page in the Watson Content Hub UI. You must create a new content item from the new Iframe content type, complete the elements with data, and add that content item to a page of the site.

     

    ¬†Next step ‚Äď Adding analytics to your site

    Parent topic – Customizing the sample site

Expected outcome

A set of active sample site components are provided to help you get started. The samples include a You Tube video integration, a charting sample with Chart.js, and an Iframe app. Download the sample components from sample-active-site-components GitHub repository.

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 *