Documentation
Help centerCommunityDevelopersAcademyStatus

Add layouts for new content types

Suggest Edits

For marketers

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.

Before you begin

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 text, images, files, and video. These elements, reference content that is created and stored in Content. 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 Content 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.

Create a content type

Create a content type in the Content UI from Developer > 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.

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 the 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**
3. Avoid touching the files in src\app\components**
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 of 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.

Debug the script for errors

When the script finishes, a list of files that were 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

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 in 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 Content password for you to successfully run the commands.

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 ID. You can obtain the domain name and the Content ID from Developer > URL 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 localhost at http://localhost:4200/. The changes that you make to the code are automatically updated on the local site.

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 Content password for you to successfully run the commands.
The new additional layout will now be visible in the Content UI. The content composer can now choose this layout when they create content.

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 Content UI, go to Developer > Content types.
  2. Open the new content type that you created and mapped, from the Details > Advanced tab select the Check this type can be used to create pages field in the content type.

Updating layouts for dynamic list content type

Layouts can be updated and customized for all page types and content types on 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 is 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.

Updated almost 2 years ago