Overview

Skill Level: Any

You can create your own page types and content types to create a fully customized website that matches your needs. A page type is a specialized content type. When you create new content types or page types, you must map them to a layout. The following tutorial shows you how to create a content type, map it to a layout and convert the content type to a page type.

Prerequisites

To get started, you need:

The layout templates determine how the content is rendered. Content is created from content types, which contain elements such as the text, images, files, and video. These elements, reference content that is created and stored in Watson Content Hub. The content types are mapped to layout templates, which reference the elements in the content types by their key. The content is then added to site pages. The layout mapping determines which layouts belong to which content types. It also defines the default layout for the corresponding content type. A content type can be mapped to several layouts.

Website pages in Watson Content Hub are created from page types, which are created and mapped to layout templates similar to the content types. The layout files point to an angular component that determines how the page type renders when added to the site application. A layout can implement a configurable component that can be added to a page just like any content. The elements of the content type are used as the configuration properties. The layout’s HTML and JS implement the component functionality.

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

    Complete the following steps to create a content type and map it to a layout. You can then choose to convert this content type to a page type.

    • Create a content type in the WCH UI from 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 page type cannot be created from the new content type until it is mapped to a layout.

  2. Create a layout for the new 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.

    2. Modify the files src\app\layouts<generated-layout>*
    3. Avoid touching the files in src\app\components<generated-layout>*
    4. Surround the html structure with the ID of the content (for future item highlighting):
      <div [id]="renderingContext.id" class="…">…</div> 

      Where renderingContext is the object that contains the representation the content item that is implicitly created by the create-layout command.

    5. The result is then passed into a separate generic component, which is listed under the src/app/components/generic directory along with the filters that are specified by the content type.
    6. The component in src/app/components/generic iterates through the list of filtered results and displays the content item according to its <wch-contentref> layout.
  3. Debug the script for errors

    When the script finishes, a list of files that was generated along with the path to where they were saved is printed in the console. If you get unexpected results from running the script, add the following extra flag to debug the script:
    verbose: add this flag to enable additional logging information to the console. For example,

    npm run create-layout -- --type <content type name> --verbose
  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, to use the new layouts and components your live site:
      • Build your project with the npm run build command.
      • Then, deploy the project with the npm run deploy command.

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

  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 page type

    A page type is created from a content type. You can create a new page type only from a content type that is mapped to layouts.

    Complete the following steps to convert the content type into a page type.

    1. After the content type is mapped to the 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 page type is now visible in the Content hub UI and you can now use the page type to create pages.

Next step – Customizing the OSLO sample site Header and Footer

Updating layouts for dynamic list content type

Layouts can be updated and customized for all page types and content types in the website. Updating the layouts for the Dynamic lists content types are a little more complex than the average component.

  • Like other layout files, the Dynamic list layouts extend the src/app/components/type component file. In this file, the queryString for the list is configured with the properties that are specified by the content type.
  • In the src/app/layouts/layout-name layout html file, the queryString is passed into the query component of the SDK. For example, wch-contentquery [query]=”queryString” #q
  • A list of content items that match the specifications of the queryString are generated.
  • The result along with the filters that are specified by the content type is then passed into a separate generic component in the src/app/components/generic directory.
  • The component iterates through the filtered results and displays the content item according to its wch-contentref layout.

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

1 comment on"Adding layouts for a new content type or page type"

  1. I followed these instructions multiple times and could never get the content-type to link to the layout being created. I discovered the npm run build was not copying the wchLayouts directory content (layout-mappings, layouts, resources and types) to the dist directory. So when I did the deploy, they were not linking. I hope this helps others.

Join The Discussion

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