XSLT listing in Umbraco

Question

I have this structure:

<EmployeeArea id="1188" level="2" nodeName="Ansatte" urlName="ansatte">

  <EmployeeDepartment id="1189" level="3" nodeName="Ledelse" urlName="ledelse">

    <Employee id="1191" level="4" nodeName="Tommy Pophead" urlName="tommy-pophead" />

    <Employee id="1193" level="4" nodeName="Test Person" urlName="test-person" />

  </EmployeeDepartment>

  <EmployeeDepartment id="1190" level="3" nodeName="Salg" urlName="salg">

    <Employee id="1192" level="4" nodeName="Lars Rocker" urlName="lars-rocker" />

  </EmployeeDepartment>

</EmployeeArea>

How would you guys do this in XSLT?

I'm thinking something like a for each that loops through the childs of Employees and then a foreach in that foreach that loops through the childs of the departments? But is that the smartest way?

Want it shown on the page like this:

Employees page:

• Finance

-- Person 1 - phone number - emailaddress

-- Person 2

• Sales

-- Person 4 - phone number - emailaddress

-- Person 5 - phone number - emailaddress

Answer 1

As your question is specific to Umbraco, and I've recently been working with it, I'll add a more Umbraco-specific answer, in case others are looking for a complete solution.

Please note that XSLT is a "Template" type language, it finds the strongest match for each node and applies that template. This allows for some fun customisation (e.g. one template for normal employees, but a special template for CIO/CEO/Managers etc). Please take a look at w3schools for more information.

Given your structure above I can tell that Departments and Employees are nodes in your Umbraco content tree, sitting below the EmployeeArea node. Assuming this is XSLT to apply to the EmployeeArea as the $currentPage variable, the following would work well:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxml="urn:schemas-microsoft-com:xslt"
  xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
  xmlns:MyEmployeeLibrary="urn:MyEmployeeLibrary"
  exclude-result-prefixes="MyEmployeeLibrary msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets ">

  <xsl:output method="html" omit-xml-declaration="yes"/>

  <xsl:param name="currentPage"/>

  <xsl:template match="/">
    <h1>Employees page:</h1>
    <ul>
      <xsl:apply-templates select="$currentPage/EmployeeDepartment" />
    </ul>
  </xsl:template>

  <xsl:template match="EmployeeDepartment">
    <li>
      <a href="{umbraco.library:NiceUrl(@id)}">
        <xsl:value-of select="@nodeName" />
      </a>
      <ul>
        <xsl:apply-templates select="Employee" />
      </ul>
    </li>
  </xsl:template>

  <xsl:template match="Employee">
    <li>
      <a href="{umbraco.library:NiceUrl(@id)}">
        <xsl:value-of select="@nodeName" />
        <!-- 
          Your sample XML didn't include phone/email, but your output requests it.
          Let's assume you've created your own XSLT Extension to get this information.
        -->
        <xsl:value-of select="MyEmployeeLibrary:GetDetailsForList(@id)"/>
      </a>
    </li>
  </xsl:template>
</xsl:stylesheet>

For more information on creating a custom XSLT Extension for Umbraco, check the developer training videos in the UmbracoTV section (it's really easy, and if you are running 4.6.1 you just drop your DLL in the \bin\ folder and it works).

NOTE: I've used nested UL tags here, you can change it to any HTML you like, DIV tags with a CSS Class assigned is my preferred method.

Answer 2

I would exploit built-in rules.

E.g this code:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" indent="yes"/>

    <xsl:variable name="vBaseLink" select="'http://localhost/'"/>

    <xsl:template match="EmployeeArea">
        <body>
            <h1>
                <a href="{$vBaseLink}{@urlName}">
                    <xsl:value-of select="@nodeName"/>
                </a>
            </h1>
            <xsl:apply-templates/>
        </body>
    </xsl:template>

    <xsl:template match="EmployeeDepartment">
        <h2>
            <a href="{$vBaseLink}{@urlName}">
                <xsl:value-of select="@nodeName"/>
            </a>
        </h2>
        <xsl:apply-templates/>
    </xsl:template>

    <xsl:template match="Employee">
        <div>
            <a href="{$vBaseLink}{@urlName}">
                <xsl:value-of select="@nodeName"/>
            </a>
        </div>
    </xsl:template>

</xsl:stylesheet>

Against your sample will provide this result:

<body>
    <h1>
        <a href="http://localhost/ansatte">Ansatte</a>
    </h1>
    <h2>
        <a href="http://localhost/ledelse">Ledelse</a>
    </h2>
    <div>
        <a href="http://localhost/tommy-pophead">Tommy Pophead</a>
    </div>
    <div>
        <a href="http://localhost/test-person">Test Person</a>
    </div>
    <h2>
        <a href="http://localhost/salg">Salg</a>
    </h2>
    <div>
        <a href="http://localhost/lars-rocker">Lars Rocker</a>
    </div>
</body>