Intro

In this article we will modify XSLT Style Sheets to get a list of available item-properties.

XSLT stands for Extensible Stylesheet Language Transformations, it is a language for transforming XML documents into other XML documents, or other formats such as HTML for web pages, plain text or XSL Formatting Objects, which may subsequently be converted to other formats, such as PDF, PostScript and PNG. The original document is not changed; rather, a new document is created based on the content of an existing one.[3] Typically, input documents are XML files, but anything from which the processor can build an XQuery and XPath Data Model can be used, such as relational database tables or geographical information systems.

If you are not familiar with XSLT, please refer to this tutorial XSLT Tutorial

XSLT magic

  1. You don't have to have SharePoint Designer installed to work with XSLT or anything else in Style Library, just map your site as a drive in My Computer using WebDAV.

  2. Go to My Computer, right click on This PC, select Map network drive...

https://raw.githubusercontent.com/boades/boades-blog-content/master/05-sharepoint/01-seria-office365-cqwp/02-office365-content-query-wp-vs-code-webpack-nodejs-cmd/01-map-network-drive.png

  1. Type-in your Office 365 site collection URL

https://raw.githubusercontent.com/boades/boades-blog-content/master/05-sharepoint/01-seria-office365-cqwp/02-office365-content-query-wp-vs-code-webpack-nodejs-cmd/02-map-network-drive.png

  1. Click finish and enter credentials.

  2. Go to Z:\Style Library\Custom\Demo\XSL Style Sheets, it is the location of your custom style sheets.

  3. We need to make modifications to style sheets to make them more usable.

  4. Open ItemStyle.xsl, replace a content with the following:

    <xsl:stylesheet 
        version="1.0" 
        exclude-result-prefixes="x d xsl msxsl cmswrt"
        xmlns:x="http://www.w3.org/2001/XMLSchema" 
        xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" 
        xmlns:cmswrt="http://schemas.microsoft.com/WebParts/v3/Publishing/runtime"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt">
        
        <xsl:template name="debug" match="Row[@Style='debug']" mode="itemstyle">      
            <table>
                <tr>
                    <th colspan="2"><xsl:value-of select="@Title" /></th>
                </tr>
                <xsl:for-each select="@*">
                <tr>
                    <td><xsl:value-of select="name()" /></td>
                    <td><xsl:value-of select="." /></td>
                </tr>
                </xsl:for-each>
            </table>      
        </xsl:template>
    
    </xsl:stylesheet>

This small code-snippet will output all properties with their names, it can be used to debug your xslt.

  1. Open ContentQueryMain.xsl, go to a line 44 and insert the following line:

    <xsl:variable name="ItemStyle" select="$Rows[1]/@Style" />

  2. Go to line 45 and modify it to include $ItemStyle variable in CQWP class:

    <div id="{concat('cbqwp', $ClientId)}" class="cbq-layout-main {$ItemStyle}">
  1. After that you should be able to add Custom Content Query webpart to the page and see something like this:

    https://raw.githubusercontent.com/boades/boades-blog-content/master/05-sharepoint/01-seria-office365-cqwp/02-office365-content-query-wp-vs-code-webpack-nodejs-cmd/03-cqwp-in-action.png https://raw.githubusercontent.com/boades/boades-blog-content/master/05-sharepoint/01-seria-office365-cqwp/02-office365-content-query-wp-vs-code-webpack-nodejs-cmd/04-cqwp-template-in-html.png

Now you have everything you need for productive development. You can get the list of available properties and you have a top-level css class that you can use to style your template.

Summary

Many people say that CQWP is a legacy that has to be removed someday, but it is still used by thousands developers around the world. I have seen big SharePoint customizations based on CQWP and most of them have been migrated from 2007 to 2010, and then from 2010 to 2013 successfully, there were little to no changes to those web parts.


;