Creating an Article List With IBM WCM 8.0 (Part 2)

In Part 1, we discussed the requirements for following this series of articles, created the WCM libraries, and set up a simple workflow.

In Part 2, we continue by creating the WCM building blocks required to create and render a single article. More specifically we will be:

1. Creating a site area where content items will be added.

2. Creating an authoring template for an article.

3. Creating a presentation template to render an article content item.

4. Setting various defaults and values to make our lives easier in upcoming development.

Step 1: Create the Site Area

On the article-list-content library, go to “Content” and click the “New” button -> Site area -> Default site area template.

Set the name and display title to “Articles” and click “Save and Close”.

You should now have something like this:

Step 2: Create the Article Authoring Template

To create a content item in WCM, you need to have an Authoring template.

Under article-list-design, go to Authoring Templates, click on the ‘New’ button -> Content template.

Specify an appropriate name and display title.

Under the section ‘Location options’, specify that content items will be created under our content library’s Articles site area:

Don’t worry about the ‘Default Presentation Template’ for now, we will set this soon.

Now, add the custom elements for the authoring template. Click on ‘Manage Elements’ and add the following elements:

• Title: Short Text element
• Author (custom author): Short Text element. This author is the person that wrote the article and not the WCM author. In the future, we could add an ‘authors’ select box here.
• Image: Captures our article image as an Image element.
• Article lead: Text element; the Text element is an HTML ‘area’, while a short text element is an input. The article lead is the lead paragraph to show in the list view as well as the first paragraph on the article detail view.
• Article body: Rich Text element, to allow a WCM author to provide html for the main body of the article.

The result should look like this:

Save and Close.

Step 3: Create the Presentation Template

The presentation template for an article will be used to render out an individual article on a page.

Under the article-list-design library, go to Presentation Templates and click New -> Presentation Template.

Provide the name and title.

Open up the plunker example and view the "articleDetail.html" file. Copy everything in the <article>...</article> straight into the presentation template.

Once this is done, replace all the mock text with WCM element tags from the Article authoring template:

1. Highlight some mock text to replace with an element from the content item (via the authoring template elements);

2. Click on "Insert Tag", then select the appropriate element:

   1. Tag type -> Element

   2. Source item type -> Content

   3. Item context -> Current

   4. Authoring template -> the article authoring template

   5. Element to reference -> choose the appropriate element from the authoring template

The end-result is an element tag looking like this (for the article title in this case):

[Element context="current" type="content" key="Title"]

Save and close.

To review your changes, you can have a look at "article_list_listing_1.html" from the gist.

Step 4: Set Template Default Content Item Properties

Now that we have an article authoring and presentation template, as well as workflow and a site area where our articles are created, we can set up defaults to assist the creation of content items and allow the article details page to display correctly.

Set the Presentation Template as Default

Edit the article authoring template and select the presentation template we created earlier as the Default Presentation Template (under Item Properties).

Save and Close.

This will now ensure that content items created with this authoring template use this presentation template by default.

Specify Child Template Mappings

We need to give the web content viewer (portlet) information on the kind of content items to be rendered, as the viewer will need to render content items based on an incoming link (more on this later) as opposed to a specific content item. To do this, you tell the site area to render its children based on a child template mapping.

Go to the article-list-content library and edit the Articles site area.

Under Child Template Mappings, click ‘Manage Template Maps’.

Click ‘Add’ and then browse for the Authoring Template and Presentation template we created.

Click OK; you should now see it displayed in the Manage Template Maps view:

Select it and click OK. You should now have a site area that looks like this:

Summary

This was quite a mouthful, but in Part II we created the building blocks for an individual article, namely an authoring and presentation template. We also set some defaults to assist us with content item creation and provided defaults for the Site Area storing our articles (as content items) so that the web content viewer portlet has something to work with.

In Part 3, we'll tackle the article list view which will render out all the articles listed under our site area.