XSLT – Ben Prins

SharePoint 2013 CQWP Office Online hyperlink

May 19, 2014 benjaminprins Office 365

With the introduction of Office Online (Office web apps) files can be opened in the browser with Office Online (Office web apps) or with the local client. If able SharePoint 2013 will open files (.pptx, docx, xslx) in office Online and other files in the related client (doc, xsl, pdf etc.) This behavior works great within the document library, however this does not work out of the box for files that are displayed using a content query webpart. With XSLT we are able to create an variable which creates per file the required hyperlink.

Solution
1. Edit the CQWP Template where the semi dynamic hyperlink is required.
2. First we need to create the variable that builds the correct office online or default hyperlink. The default hyperlink opens the files in the client software.

<xsl:variable name="DynamicURL">
   <xsl:choose>						
      <xsl:when test="contains(@FileExtension,'docx')">
         /sites/PH/OH/_layouts/WopiFrame.aspx?sourcedoc=<xsl:value-of select="@LinkUrl"/>	
      </xsl:when>
      <xsl:when test="contains(@FileExtension,'pptx ')">
         /sites/PH/OH/_layouts/WopiFrame.aspx?sourcedoc=<xsl:value-of select="@LinkUrl"/>	
      </xsl:when>
      <xsl:when test="contains(@FileExtension,'xslx')">
         /sites/PH/OH/_layouts/WopiFrame.aspx?sourcedoc=<xsl:value-of select="@LinkUrl"/>	
      </xsl:when>
      <xsl:otherwise>
         <xsl:value-of select="@LinkUrl"/>
      </xsl:otherwise>
   </xsl:choose>
</xsl:variable>

3. The choose function determines the file type and sets the correct Office Online hyperlink or the default Hyperlink based of LinkUrl field.
4. Secondly we need to use the DynamicURL variable to create the hyperlink.

<a href="{$DynamicURL}" target="_blank">
   <xsl:value-of select="@Name"/>
</a>

Result
Files with extensions docx, pptx and xslx will open in Office Online other files will open in the related client.

SharePoint Custom Grouping with XSLT

November 5, 2013 benjaminprins Office 365

For SharePoint solution where the look and feel or clean code is very important we often create custom header.xslt ContentQueryMain.xslt and ItemStyle.xstl files. The files are almost completely empty to provide us with maximal control. This also means we need to recreate functionality that normally works by default. A good example is the ability to group the results.

Solution
1. Create the custom XSLT files and link the files to the Content Query Web Part.
2. The following code is a complete example of a custom Content Query Main XSLT file. This code generates grouping.

<xsl:stylesheet
    version="1.0"
    exclude-result-prefixes="x xsl cmswrt cbq" 
    xmlns:x="http://www.w3.org/2001/XMLSchema"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:cmswrt="http://schemas.microsoft.com/WebPart/v3/Publishing/runtime"
    xmlns:cbq="urn:schemas-microsoft-com:ContentByQueryWebPart">
    <xsl:output method="xml" indent="no" media-type="text/html" omit-xml-declaration="yes"/>

  <xsl:key name="Grouping" match="Row" use="@GroupingColumn" />

  <xsl:template match="/">
 <xsl:for-each select="/dsQueryResponse/Rows/Row[generate-id(.)=generate-id(key('Grouping',@GroupingColumn))]/@GroupingColumn">
  <xsl:sort />
        <xsl:value-of select="."/>
        <xsl:for-each select="key('Grouping', .)">
         <br /><xsl:value-of select="@Title" />
         </xsl:for-each>
        <br/>
      </xsl:for-each>     
    </xsl:template>
</xsl:stylesheet>

3. Change the XSLT where needed

Result

Show Pictures with Slimbox in SharePoint

October 29, 2013 benjaminprins Office 365

Pictures are an important part of a SharePoint site, it enriched the otherwise plain look and feel. With a little extra effort we can integrate Slimbox to show the pictures in a very slick and modern way.

Solution

1. Download Slimbox2 and jQuery, in this example I used jQuery 1.8.3 uncompressed.
2. Save the files in the Style Library of SharePoint. Note that not all the Slimbox files are required to be stored in SharePoint.
3. Include the jQuery javascript, the Slimbox javascript and the Slimbox CSS to the page, page-layout or the master page.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slimbox2.js"></script>
<link rel="stylesheet" href="css/slimbox2-rtl.css" type="text/css" media="screen" />

5. Create a picture library and save a couple of pictures to the library. The picture library will provide the necessary thumbnails without any extra effort.
6. Add a CQWP to a page and query the pictures.
7. Create a XSLT that shows the small thumbnails of the pictures, for example in a banner view.

8. I created two variables for the default SharePoint Thumbnails, Thumbnail_w and Thumnbail_t. And used the following code to show the small thumbnail with a Slimbox link to the bigger thumbnail.

<a href="{$Thumbnail_w}" rel="lightbox" title="{@Title}">
   <img src="{$Thumbnail_t}" alt="alt" class="PhotoAppThumbnail" />
</a>

9. Also note that the title field is added to the Slimbox link, the title will be displayed on the Slimbox overlay.

Result

Add View folder link for document search results

September 2, 2012 benjaminprins Office 365

In the default document search results it is only possible to open the documents. It is not possible to navigate to the documents location.

Solution

1. Edit the Search Core Results Web part on the Search Center results page.
2. Click on XSL Editor under Display properties.
4. In the XSLT look for the following code.

<xsl:template name="ViewInBrowser">
        <xsl:param name="browserlink" />
        <xsl:param name="currentId" />
        <xsl:if test="string-length($browserlink) &gt; 0">
            <span class="srch-urllink">
                <a href="{$browserlink}" id="{concat($currentId,'_VBlink')}">
                    <xsl:value-of select="$ViewInBrowser" />
                </a>

3. Add the following code after the code for ViewInBrowser.

<!-- Toon View Folder link bij documenten -->    
<xsl:if test="isdocument = 'True'">
  <a>
    <xsl:attribute name="href">
      <xsl:value-of select="sitename"/>
    </xsl:attribute>
    View Folder
  </a>                         
</xsl:if>

4. Save the changes and enjoy the result.

Result

Display department members with people search

August 2, 2012 benjaminprins Office 365

Do you need a dynamic overview with all the members of a department? With the People Search Core Web Part this is easily accomplished, even without changing any XSLT!

Solution

1. Add a People Search Core Results Web Part to a page.
2. Edit the Web Part.
3. Select under Results Query Options, by Cross-Web Part query ID; Query 2
4. Enter the query in Fixed Keyword, for example department:IWS or Department:ICT.

5. Navigate to the Enterprise Search Centers default results page.
6. If needed create temporarily a Enterprise Search Center.
7. Edit the Results page (http://[root]/sites/search/pages/results.aspx) and set the People Matches Web Part in edit mode.
8. Open the Display properties of the People Matches Web Part.

9. Deselect Use Location Visualization.
10. Open the XSLT Editor.
11. Copy and save the XSLT in a local XSLT file.
12. Navigate to the People Search Core Results Web Part.
13. Open the Display properties of the People Matches Web Part.
14. Deselect Use Location Visualization.
15. Copy and save the XSLT from the local XSLT file.
16. Safe the changes and enjoy the result.

Result