We will work with the example setup in the previous section 7.4.2, and change the interface from a simple bullet list of item titles to a more appealing list with a formatted title, the item content, and the author of each item.
By replacing the markup in the PZN component with references to specific HTML components, it is possible to build dynamic list elements which can be reused by more than one list. In this example, we will create a list header, footer, and result HTML Components and add them to the PZN component appropriately.
- All elements will be created in the same WCM library where the DDC list components already exist.
- A basic understanding of the WCM tagging interface and referencing components
Follow these steps:
1. Create a new HTML component to become the header markup. This will also contain a STYLE tag that will have some style definitions for the other components. This could easily be replaced with in-line style definitions in the tags, or with styles defined in a style sheet that is referenced as well. This is the html of the Header component created:
<h1 class="ddcIFSTitle">Items for Sale</h1>
2. Create a new HTML component that will contain the markup for the footer.
3. Place the markup for the result body in a third HTML component.
[AttributeResource attributeName="title" separator=","]
[AttributeResource attributeName="content" separator=","]
<span>Author:</span><span style="color:#00c;">[AttributeResource attributeName="authorName" separator=","]</span>
Note the references to the Atom feed elements. When adding the tags, be sure to select Attribute Resource, and select the Atom Feed as the component. If your feed adheres to the Atom feed specification, the elements you would want to work with should be present already.
4. Once complete, the list of components should look something like this:
5. Replace the markup in the PZN component with references to the three elements created.
6. Save and close and review your redesigned list.