Over a million developers have joined DZone.

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

Continuing on with the series, in part two we'll be creating the WCM building blocks required to create and render a single article. Read on and see how it's done.

· Web Dev Zone

Make the transition to Node.js if you are a Java, PHP, Rails or .NET developer with these resources to help jumpstart your Node.js knowledge plus pick up some development tips.  Brought to you in partnership with IBM.

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:

Image title

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.

Image title

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:

Location options

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:

Image title

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

Inserting a tag

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.

Child template mappings

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

Manage template maps

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

Site area with child template mappings

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.

Learn why developers are gravitating towards Node and its ability to retain and leverage the skills of JavaScript developers and the ability to deliver projects faster than other languages can.  Brought to you in partnership with IBM.

Topics:
ibm websphere ,ibm ,web content management

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}