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

In this five-part series, I’m going to take you through building an article list (a blog without a reader comment section) using IBM's Web Content Manager 8.0+ and Websphere Portal 8.0+.

Our article list has these features:

1. View a list of articles with pagination.
2. An article viewed in the list should display a title, image, and lead paragraph.
3. Click-through and view the details of the article by clicking on either the title, image, or a link.
4. An article viewed in detail includes the title, image, lead paragraph, and the main content. The main content, or body, must allow for rich text or HTML.

Have a look at the plunkr for an idea of what we're going to do.

What Will I Learn?

I tried to keep the use case small-ish so we can focus on the WCM parts as follows:

Part I: Set the scene and prerequisites, and create the WCM libraries and workflow.

Part II: Create the article authoring and presentation templates, the site area for our articles and discusses Element tags.

Part III: Create the list view for articles. We use Menu, List Presentation, and Pagination components as well as creating a basic authoring and presentation template to render our article list (menu component).

Part IV: Create and add authoring tools and styling components to allow external authors to create or modify articles.

Part V: Use Web Content Viewer portlets and managed pages to render out the article list and detail views, and conclude the series.

Prerequisites and Audience

This series is intended for intermediate users of IBM's Web Content Manager, and requires you to have the following installed or available:

1. Websphere Portal 8.0 or 8.5 with Web Content Manager 8.0 (bundled as part of Portal for 8.5).

2. A bootstrap-styled portal theme, your own theme, or basic knowledge of the standard Portal 8.0/8.5 themes. The example code makes use of bootstrap positioning and styling, but you can modify the samples to suit your needs.

Materials and References

I based my designs and thoughts on a great article on prideparrot. Based on that blog, I created a code sample in plunkr (you can grab it from here) that we will use that as our mock-up or design template. 

Throughout the article series, I will provide additional references to specifics from IBM's Wiki.

Libraries and Workflow

For our article list, we’re going to use two WCM libraries: “article-list-content” and “article-list-design”.

• “article-list-content” contains the articles created by the article author and the list view.

• “article-list-design” contains all the WCM design elements like components, templates, and workflow.

Step 1: Create New Libraries

Log in to your Portal user interface and go to Administration -> Web content libraries.

Click ‘Create new library’ and complete the form as shown in the example below, for both ‘article-list-content’ and ‘article-list-design’.

Step 2: Create the Workflow

To manage our content items, we’re going to create a simple, quick-publish workflow. In the article-list-design library, create the appropriate workflow elements to do publishing only.

Summary

This article essentially just laid down the groundwork for our article list by creating some WCM libraries and a simple workflow, listing the features we're going to build and providing some references.

Continue on to Part 2 where we will be creating an article.