The XML/XSL module included in mojoPortal content management system is a great way to implement structured content into a page on your site. It’s fast and simple, and great if you need to structure content that may only change occasionally (as there is no way to edit XML documents from within mojoPortal as of now). Some uses for this module may include a jQuery-powered banner rotator, a product or portfolio listing, or just any content element that has complicated mark-up. While you could achieve the same thing with mojoPortal’s content templates, the XML/XSL module will ensure that your content layouts will not be broken by users that are less than able HTML editors.

You will store your XML File in the ~/Data/Sites/[1]/xml directory. We’ll start with creating the xml file. Create a new XML file in this directory and name it testXML.xml. We’re not going to do anything too complicated here; we’re just going to create a structured layout. Put this into the XML file:

<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
  <cd>
    <title>Hide your heart</title>
    <artist>Bonnie Tyler</artist>
    <country>UK</country>
    <company>CBS Records</company>
    <price>9.90</price>
    <year>1988</year>
  </cd>
  <cd>
    <title>Romanza</title>
    <artist>Andrea Bocelli</artist>
    <country>EU</country>
    <company>Polydor</company>
    <price>10.80</price>
    <year>1996</year>
  </cd>
  <cd>
    <title>When a man loves a woman</title>
    <artist>Percy Sledge</artist>
    <country>USA</country>
    <company>Atlantic</company>
    <price>8.70</price>
    <year>1987</year>
  </cd>
  <cd>
    <title>Black angel</title>
    <artist>Savage Rose</artist>
    <country>EU</country>
    <company>Mega</company>
    <price>10.90</price>
    <year>1995</year>
  </cd>
</catalog>

You’ll see that this is a simple XML file. If you don’t know anything about XML, unlike HTML you can develop your own schema to suite your needs. Look up more about XML on W3C Schools.

Now we will create our XSL file in the ~/Data/Sites/[SiteID]/xsl directory. Create a new XSL file and name it testXSL.xsl.

Open the XSL file and input this structure:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <h2>My CD Collection</h2>
  <table class="table table-bordered table-striped">
    <tr>
      <th>Title</th>
      <th>Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="artist"/></td>
    </tr>
    </xsl:for-each>
  </table>
</xsl:template>
</xsl:stylesheet>

This is a really basic XSL file. All it’s doing is looping through the elements in the XML file, and outputting them in our desired manner. 

Our next step is to output this into a page. Open your mojoPortal site and log in. When you are logged in, open a page and add an XML/XSL module to that page. When you view this page, you will see that there is an edit link next to the module title; click this link. You will be taken to the XML settings page.

As you can see, there are simply two drop-down menus, one for the XML file and one for the XSL file. Because we saved our files in those special directories, they will appear in our drop-downs. Select each of the files that we created and click the update button.

Note that in newer versions of mojoPortal it is also possible to specify the location of the xml and xsl files as urls so they can even be loaded from a remote server, for example you could use an RSS feed as the xml data source.

You will be taken back out to your page, and you will now see our results output onto the screen: