DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

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

In Part 4 of this series, we will add the final touches—adding in our authoring tool components—before we add everything to our Portal pages in Part 5.

Roan Bester user avatar by
Roan Bester
·
Jun. 28, 16 · Tutorial
Like (1)
Save
Tweet
Share
3.18K Views

Join the DZone community and get the full member experience.

Join For Free

In Parts 1, 2, and 3, we created the libraries, article, and article list building blocks. In Part 4, we will add the final touches before we add everything to our Portal pages in Part 5.

Authoring Tool Component

To allow authors of WCM content to create, edit, or delete WCM content directly on the site (as opposed to creation via the Web Content Management application), WCM provides an Authoring Tool component. This component launches a standalone Authoring portlet in a popup window, or by redirecting the user to a special hidden page.

For our needs, we’re going to create two authoring tool components: one to create a new article, and one to edit and delete individual articles. The first will only be rendered out once (near the top of the article list), while the second one will be rendered per article.

Step 1: Create "New Article" Authoring Tools

Under the "article-list-design" library, create a new Authoring Tools component.

Provide a name and display title.

For  the "New action" design, provide HTML to render a link to open the authoring tools popup. This is done by using a Placeholder tag:

<a href=”[Placeholder tag=’href’]”>…</a>

Set “Authoring Template” to “Selected”, and set the Selected Authoring Template to the Article authoring template.

Set the “Site Area” value to “Selected” and set “Selected Site Area” to our Articles site area in the content library. This ensures the created content item is created under the site area used by our menu component.

Under "Presentation Options":

  1. Provide a header HTML that will wrap our anchor tag;

  2. Provide a footer to close off the HTML.

You should now have something like this: 

New article authoring tools

Save and close.

You can find the markup for the above in "article_list_listing_5.html" in the gist.

Note

The author (WCM editor) can change the location for the new content item on the authoring template by default. Often this is not desired; you can hide this ability from the authoring template (out of scope).


Step 2: Create the "Edit Article" Authoring Tools

Under the "article-list-design" library, create a new Authoring tools component.

Provide a name and title.

Under “New action properties” set the Authoring template to “Autofill”.

Under “Selected site area” set Site Area to “Autofill”.

Under “Edit action properties”, set “On editing” to “Edit live content” and add markup for the Edit and Delete action designs. The markup can be found in "article_list_listing_6.html" in the gist.

Add markup under Presentation Options to render the header and footer of the authoring tools.

Save and close.

Step 3: Add Authoring Tools to the Design

Now that we have the authoring tools, we can add them to the list presentation component  (for the article list) and the Article presentation template.

New Article

To add the New Article authoring tools component, edit the List Presentation component for our article list. Under “List Presentation Markup”, click on “Insert tag” for the Header section to import the authoring tools component. The result is a tag like this:

[Component name="article-list-design/article list/atools – new article"]

Edit Article

We need to add the authoring tools for editing and deleting an article in both the List Presentation as well as on the detail article view.

For the List Presentation, in the “Result design 1” section, do the same, adding the Edit Article authoring tools component. Take care to set a property “compute” to “always”, to let the authoring tool pick up the current content item. The result is a component tag like this:

[Component  name="article-list-design/article list/atools - article edit" compute="always"]

Step 4: Styling

To finish off the article list, we need to add a small amount of styling to fix up the authoring tools and minor visuals like horizontal lines. The best way to do this is to create a CSS Component and add this component to the relevant presentation templates.

Create a new .css file on your computer using your favourite editor. You can use "article_list.css" from the gist if you are using bootstrap, or to see the styling tweaks I made.

In WCM, go to the "article-list-design" library and create a new CSS Component.

Provide a name and display title.

Upload the CSS file you just created.

Set the Type as “Persistent style-sheet” to ensure the CSS always gets loaded onto the page.

Set the media type to “All”, as we’re going to use this file for all media types. You could, for example, add CSS overrides to a page for a specific media type, e.g. for printing or mobile devices.

Save and close.

You should now have this:

CSS component

Add the CSS component to both presentation templates we created so far (one for the article and one for the list/menu component). You can have a look at "article_listing_7.html" in the gist  for a sample Component presentation template and "article_listing_1.html" for the Article presentation template.

Summary

In this section, we’ve added the authoring tools required to create, edit, and delete articles, as well as some basic styling tweaks to the appearance of the article list and detail views.

This concludes creation of all the WCM content; all that is left now is to render it out on the Portal pages and make sure that links clicked on the article list page goes to the detail page to render out the selected article. This will be handled in Part 5.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Cloud Native London Meetup: 3 Pitfalls Everyone Should Avoid With Cloud Data
  • Automated Performance Testing With ArgoCD and Iter8
  • Top 5 Node.js REST API Frameworks
  • Silver Bullet or False Panacea? 3 Questions for Data Contracts

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: