Overview

Skill Level: Any

Landing pages are single web pages that can be used as promotional marketing campaigns. Landing pages need a content type that is mapped to layout templates similar to the website pages. As a developer you can configure the templates to be used as landing page types, pages types, or as both. Landing page templates can be created only from content types that do not have any content that is associated with it. The following tutorial shows how to configure a content type to be a landing page type.

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 for a landing page

    Similar to other site pages, landing pages are created from content types as well.

    1. To create a content type, go to Primary navigation menu > Content model > Content types. The new content type is automatically saved. For more information about creating content types, see Content types: Define content structure.

      Note: A landing page type cannot be created from the new content type until it is mapped to a layout.

     

  2. Convert the content type to a landing page type

    You can convert a content type to a landing page type either from your development environment by using the CLI or from the Watson Content Hub UI.

    Note: You can create a new landing page type in the Watson Content Hub UI only from a content type that is mapped to layouts. See step 7 for instructions.

     

    To convert the newly created content type to a landing page type by using the CLI, complete the following steps.

    1. From your development environment, run the following command wchtools pull -tv . The content types from your tenant are pulled into your local environment.

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

    2. Edit the JSON file for the new content type to add page and landing-page to the kind field and save the file. For example,
       {
      "id": "00000000-0000-0000-0000-000000000000",
      "name": "Landing page",
      "classification": "content-type",
      "kind": [ "page", "landing-page" ],
      "description": "",
      "status": "ready",
      "tags": [],
      "elements": [{
      "elementType": "reference",
      "label": "Section",
      "key": "section"
      } ] }
    3. Run the command wchtools push -tfv to push the changes that are made to the new content type to your Watson Content HUb tenant.

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

  3. Create layout for the new landing page content type

    As with any other pages, the content type must be mapped to  a layout before you can create a landing page using the content type.

    To create a layout and map it to the new content type

    1. Run the create-layout command from your development environment.

      npm run create-layout -- --type <content type name>

      Where <content type name> is the name of content type that you created in the previous step.

      The command pulls all your site content types through wchtools and scans those content types for the name that is specified in the command. If the content type with the specified name is found, the appropriate layout, layout mapping, and angular component files that you can use with the new content type are generated.

       

  4. Define properties for the layout

    The angular component layout files that are generated are saved under src/app/layouts/layout-name. Similarly, the layout file is generated under src/wchLayouts/layouts and the layout mapping file is generated under src/wchLayouts/layout-mappings.

    • Data from your content type is accessed through the rendering context.
    • Access the elements from the rendering context that are individually bound from the abstract component file in src/app/components/content-type directory. You can define the properties for your layout by referencing these elements.
    • If you have a content type with multiple layouts, common variables and functions can be defined in the src/app/components/content-type-name type component file. These properties are inherited by each layout.
    • After you define the properties, you must build and deploy your changes to use the new layouts and components in your live site.
  5. Preview your code changes locally

    When you change the SPA code, you can preview the new changes locally before you publish them to your site. After you change your code, run the SPA locally.

    1. Open src/app/Constants.ts file.
    2. Add the following lines to the top of the Class and provide your Domain name and Content hub ID. You can obtain the Domain name and the Content hub ID from WCH UI > Hub information.
      static readonly DOMAIN_NAME = "change.this.to.your.domainname"; 
      static readonly CONTENT_HUB_ID = "change-this-to-the-id-for-tenant-that-you-want-to-test-content-on";
    3. From your project folder, run:
      npm start
    4. The site application runs on your local host at http://localhost:4200/. The changes that you make to the code is automatically updated in the local site.

     

  6. Publish the code changes to your site

    After you verify your changes locally, you must publish these changes to your site.

      • Run the following command to build your new site.
        npm run build
      • Run the following command to deploy your updated local site to the remote site.
        npm run deploy

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

  7. Convert the content type to a landing page type in the Watson Content Hub UI

    If you did not convert the content type to a landing page type by using the CLI as described in step 2, you can do it from the Watson Content Hub UI.

    1. After you map the content type to a layout, from the WCH UI, go to Primary navigation menu > Content model > Content types.
    2. Find the new content type that you created and mapped, and select the Check this type can be used to create pages field in the content type.

Expected outcome

The new landing page type layout is now available in the Watson Content Hub and the content composer can select it from the layout options when they create a new landing page.

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