The Green Bar of Go: Creating Contextual Structure Using XSLT

Publish Message Sent Successfully

Context Sensitive Navigation
One of the questions that I get asked a lot while teaching the Cascade Server: Site Managers workshop is how to control how hyperlinks are displayed, i.e. using a different style than the default for the current page’s link.

In today’s installment of The Green Bar of Go, we will be discussing a simple technique that will create exactly that effect.

As an example site, I will be using the same site used in our Cascade Server: Contributors, Approvers, and Publishers workshop.

Let’s begin by looking at the XML that is generated by our index block:

<?xml version="1.0" encoding="UTF-8"?>
<system-index-block name="Main Navigation" type="folder" current-time="1291911981730">
    <system-page id="a270757b7f4f4e1f01a9facf13176d3c" current="true">
        <name>index</name>
        <display-name>Home</display-name>
        <path>/WRAP_ITTE/IU-ITTE-WCMS060/CASCM/index</path>
    </system-page>
    <system-page id="a27076517f4f4e1f01a9facf650a8089">
        <name>undergrad</name>
        <display-name>Undergraduate Students</display-name>
        <path>/WRAP_ITTE/IU-ITTE-WCMS060/CASCM/undergrad</path>
    </system-page>
    <system-page id="a27077647f4f4e1f01a9facf999d8e2a">
        <name>gradstudents</name>
        <display-name>Graduate Students</display-name>
        <path>/WRAP_ITTE/IU-ITTE-WCMS060/CASCM/gradstudents</path>
    </system-page>
    <system-page id="a270788f7f4f4e1f01a9facfda587f0e">
        <name>faculty</name>
        <display-name>Faculty</display-name>
        <path>/WRAP_ITTE/IU-ITTE-WCMS060/CASCM/faculty</path>
    </system-page>
    <system-page id="a27079347f4f4e1f01a9facf61265aa5">
        <name>releases</name>
        <display-name>Press Releases</display-name>
        <path>/WRAP_ITTE/IU-ITTE-WCMS060/CASCM/releases</path>
    </system-page>
</system-index-block>

We will begin by creating a simple, straightforward stylesheet that will turn every <system-page> element into its own hyperlink:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/system-index-block">
        <xsl:apply-templates/>
    </xsl:template>
    <xsl:template match="system-page">
            <li>
                <a href="{path}">
                    <xsl:value-of select="display-name"/>
                </a>
            </li>
    </xsl:template>
    <xsl:template match="system-symlink">
    	<li>
    	<a href="{link}">
    		<xsl:value-of select="name"/>
    	</a>
    	</li>
    </xsl:template>
</xsl:stylesheet>

Notice that this stylesheet gives us the flexibility to also include External Links (<system-symlink>) to our navigation as well.

To add the contextual hyperlinks, we will be focusing on our system-page template. When Cascade Server goes through its publishing process, it creates another attribute for the <system-page> (or any other) element called “current.” The current attribute is set to false (not present) by default or true if the page is the current page. We will simply look for “@current=’true'” with some conditional XSLT. The modified system-page template is shown below:

    <xsl:template match="system-page">
        <xsl:if test="@current='true'">
            <li><xsl:value-of select="display-name"/></li>
        </xsl:if>
        <xsl:if test="not(@current='true')">
            <li>
                <a href="{path}">
                    <xsl:value-of select="display-name"/>
                </a>
            </li>
        </xsl:if>
    </xsl:template>

And there you have it! Now this XSLT Format will turn the link for the active page into plain, bold text. You can use this method to apply CSS or make any other structural change to the output.

The final, full XSLT is here:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="system-index-block">
        <xsl:apply-templates/>
    </xsl:template>
    <xsl:template match="system-page">
        <xsl:if test="@current='true'">
            <li><xsl:value-of select="display-name"/></li>
        </xsl:if>
        <xsl:if test="not(@current='true')">
            <li>
                <a href="{path}">
                    <xsl:value-of select="display-name"/>
                </a>
            </li>
        </xsl:if>
    </xsl:template>
    <xsl:template match="system-symlink">
        <li>
            <a href="{link}">
                <xsl:value-of select="name"/>
            </a>
        </li>
    </xsl:template>
</xsl:stylesheet>

Leave a Reply

Your email address will not be published. Required fields are marked *