Our article list view will have these features:
- List articles below each other where an article displays some basics only.
- Allow paging (for our case, 3 items per page, up to 10 pages) of articles.
- Sort articles by publish date descending.
- Show the title, title image and lead paragraph for each article and allow linking through to the detail article.
To build this in IBM Web Content Manager, we’re going to need a Menu, List Presentation, and Pagination component. These components work together to provide the list view.
Step 1: Create the Page Navigation Component
The page navigation component is a reusable pager that outputs shuttle controls (previous, next and others) and page numbers. It works in combination with list-type components like Menus or Navigators to allow you to page through content items.
On the article-list-design library, click on New -> Component -> Page navigation.
Set a name, display title, and description.
Choose which elements you’d like for the pager; I’ve chosen Shuttle and Paging.
Add some HTML for the header, footer, separator, and shuttle designs (refer to article_list_listing_2.html from the gist).
You should end up with this:
Step 2: Create the List Presentation Component
The List Presentation component separates the markup rendering from the menu component. This allows you to have multiple menu components use the same list presentation.
In the 'article-list-design' library, click on New -> Component -> List Presentation.
Provide a name and title.
We want our article list to render 3x articles per page up to max 10x pages. IBM recommends you set the Pages to read ahead to 1 for the best page load speed:
Set “Results per page” to 3;
Set “Start page” to 1;
Set “Maximum number of result pages” to 10;
Set “Pages to read ahead” to 1;
Add appropriate markup to render the head, content item, footer, and no-results design.
You should now have something like this:
Please refer to article_list_listing_4.html in the gist for the code. This code goes into the "List Presentation Markup" section (see the screenshot, snipped) and contains elements from the article authoring template, the pagination component, and more (to be discussed soon).
Linking to the Detail Article
When the user clicks on the title, title image, or “read more” button or link, we want to go to the detail article. The way WCM does this is to generate URLs to each content item from the menu component (or list presentation), that can then be “broadcasted” to a specific target page by the source web content viewer portlet.
In the List Presentation, I’ve added anchor tags for the title, image and “read more” link/button. The href is generated with a Placeholder tag:
<a href=’[Placeholder tag=”href”]’>…</a>
You insert this in the same way as Element or Property tags (click on the Insert Tag button and select this tag).
Read more on the Placeholder tag here.
Add Page Navigation
You will see the Pagination component added in the footer section of the List Presentation:
[Component name="article-list-design/article list/pagenav - pagination"]
If you forgot to create the pagination component initially, you can simply edit the list presentation component at a later stage to add it.
Step 3: Create the Menu Component
The Menu Component is the main "engine" that searches for and renders out (via a List Presentation or by itself) the markup for the results. So, we want this menu component to find content items we created with our article authoring template, and stored under our Articles site area.
On the "article-list-design" library, click on New -> Component -> Menu to create a new menu component.
Provide the name and title.
Under Menu Criteria, tick both “Authoring Templates” and “Location”.
In the Authoring Templates section, choose our Article authoring template.
In the Locations section, choose “Site areas” and browse for, and set, our Articles site area under “Search for content items that are linked to these site areas”.
In the Menu design properties section, choose the Display Order to be descending, and sort results by Publish Date only (set the "Then by" filters to "None".
Under “Formatting” select “Use a list presentation” and choose as the Default list presentation the one we created earlier.
You should now have a Menu Component configured as per the images below.
Save and close.
Step 4: Create Templates for Rendering Out Components
Components cannot be rendered out to a portal page directly. They have to be rendered either in the context of an existing content item (and corresponding presentation template, via web content viewer), or be added as part of a content item. To do this, we need to create an authoring and presentation template that simply renders out any component directly.
Under the "article-list-design" library, create a new Authoring template with a single element of type “Component Reference”.
Assign Default Content properties:
On the “Default Content” tab, pick our Article List Menu component as the default value for the Component Reference element.
Set the Workflow to our quick publish workflow (or whichever one you’ve created), if applicable.
Save and close.
Under the article-list-design library, create a new Presentation template giving it a name and display title.
In the Presentation Template Options’ Presentation Markup, click on “Insert Tag” and choose the authoring template’s element you defined earlier, to render out the component (Element tag).
Save and close.
Go back to the Authoring template and set this presentation template as the default presentation template.
In part 3, we created all the building blocks required to create and render out an Article List (listing of all the article content items).We used a paginator, menu, and list presentation component as well as authoring and presentation templates to render out the article list.
Most of the work is now complete. In Part 4, we add some tooling to allow the author to create, edit, or delete articles and some basic additional styling not provided by our bootstrap theme.