Creating an Article List With IBM WCM 8.0 (Part 5)
Creating an Article List With IBM WCM 8.0 (Part 5)
In the last part of the five-part series, we’re going to add the article list to Portal through the use of Portal managed pages and Web Content Viewer portlets.
Join the DZone community and get the full member experience.
Join For FreeJumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
In the last part of the five-part series, we’re going to add the article list to Portal through the use of Portal managed pages and Web Content Viewer portlets.
To show the article list, we’re going to create a Portal page, set a layout for the page, add a Web Content Viewer portlet and configure the portlet to render both the article list as well as broadcast link clicks to the detail page.
We also need a child page that will render out the detail article.
Step 1: Create the Pages
Create a page, “articles”, with a unique ID (e.g. com.mysite.articles), set the layout to an appropriate one (I have one with a single-column bootstrap grid) and add a Web Content Viewer (JSR286) portlet.
As a child of the “articles” page, create a page called “article-detail” and give it a unique ID like “com.mysite.articles.detail”. Add a Web Content viewer (JSR286) portlet to this page as well.
You should now have two managed pages:
com.mysite.articles (Page name and friendly name "articles")
-> com.mysite.articles.detail (Page name and friendly name "article-detail")
Step 2: Configure the "list view" Web Content Viewer Portlet
Edit the page layout for the "articles" (parent) page and open up the “Edit shared settings” menu on the Web Content Viewer portlet (JSR286).
Under the “Content” section of the popup dialog, set the following:
Content Type -> “Content item”
Content behaviour -> “Select content and path”
Content -> the Content Item you created that has the Menu Component on it.
Alternate presentation template -> None, as the content item’s authoring template already specified a default presentation template.
Under the Advanced Options section:
Set “Broadcast links to” to be “The following Portal page”. Set the value in the input box to the page unique ID of the article detail page we created.
Leave the rest as-is.
Save and close.
Below are some screenshots you can use to compare your results.
Step 3: Configure the "article detail" Web Content Viewer Portlet
Go to the article detail page (child page of the article list page) and open up the Web Content Viewer portlet’s “Edit shared settings” menu.
Set the Content Type to “Content Item”. Content behaviour to “Select content and path” and choose the “Articles” site area where our article content items are kept as the “Content”.
If required, set the Alternate Presentation template to the Article presentation template. There seems to sometimes be an issue when you point the WCM viewer to a site area instead of a content item and you don't pick an alternate presentation template.
Leave the rest as-is.
Save and close.
Summary
In this section, we’ve mapped the WCM content to our Portal Pages using the Web Content Viewer portlet and page layouts. You should be seeing it working in Portal.
Congratulations, you now have a working article list!
Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.
Like This Article? Read More From DZone
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}