DZone
Web Dev Zone
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
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > Creating an Article List With IBM WCM 8.0 (Part 4)

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 · Web Dev Zone · Tutorial
Like (1)
Save
Tweet
3.00K 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

  • Open Source Security Risks
  • Use Lambda Function URL To Write a Serverless App Backed by DynamoDB
  • How BDD Works Well With EDA
  • The End of the Beginning for Apache Cassandra

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • 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:

DZone.com is powered by 

AnswerHub logo