HOW TO: Create a link to Properties DispForm.aspx page in SharePoint CQwp using XSLT

2013-01-08 MV: If you’ve ever been working with the cool-but-idiosyncratic Content (by) Query Web Part – “CQwp” for short – in SharePoint, then likely you’ve wanted to be able to display not only the link to the document itself, but also to the properties page for that document.

Here’s the finished product – a CQwp with item data displayed horizontally, AND with a “Properties” column with a link to SharePoint’s properties “DispForm.aspx” page:

Here is a way to do it using only XSLT, no string-trimming functions. Hope it can work for you as well.

BROWSE to the Site Collection
SELECT Site Setting > View All Site Content > Style Library > XSL Style Sheets
Here is where you will find the default Header.xsl and ItemStyle.xsl files for the entire site collection

BEST PRACTICE – BACKUP  both files and re-upload to the Style Library as uber-fast recovery points.
Why? Because everything in XSL is INSTANTANEOUS and SITE COLLECTION-WIDE  – INCLUDING screw-ups!
You need to have a copy of the original in place already in the Style Library, but with a slightly-modified filename so it can exist right alongside the files you’re editing.
RECOMMENDED:�
   COPY Header.xsl to Header-ORIGINAL.xsl and re-upload it (and check it in) to the XSL Style Sheets folder
   COPY ItemStyle.xsl to ItemStyle-ORIGINAL.xss and re-upload it (and check it in) to the XSL Style Sheets folder
   Screenshot:

 

Custom GroupStyle in Header.xsl:


<!-- 2012-12-20 MV JC: this custom GroupHeadingStyle is meant for use with any CQwp... -->�
  <xsl:template name="ATTGenericHorizontalGroupStyle" match="*[@GroupStyle='ATTGenericHorizontalGroupStyle']" mode="header">
    <div>
  <table width="100%" border="0" bgcolor="#999999" >
   <tr>
    <td>
     Title
    </td> �
    <td width="50px">
     Icon
    </td>
    <td width="200px">
     <xsl:value-of select="name(@Author)" />
    </td>   �
    <td width="100px">
     Properties
    </td>
   </tr>
  </table>
    </div>
  </xsl:template>
 

Custom ItemStyle in ItemStyle.xsl:

<!-- 2012-12-20 MV JC: The following is a custom ListItemStyle developed for general use at AT&T Consulting...-->
<xsl:template name="ATTGenericHorizontalItemStyle" match="Row[@Style='ATTGenericHorizontalItemStyle']" mode="itemstyle">
        <xsl:variable name="SafeLinkUrl">
            <!-- MV: return the actual VALUE of this variable, in the form of an actual URL ... -->
   <xsl:call-template name="OuterTemplate.GetSafeLink">
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="SafeImageUrl">
            <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
                <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>
            </xsl:call-template>
        </xsl:variable>
        <xsl:variable name="DisplayTitle">
            <xsl:call-template name="OuterTemplate.GetTitle">
                <xsl:with-param name="Title" select="@Title"/>
                <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
            </xsl:call-template>
        </xsl:variable>
  <!-- 20130107 MV: dynamically create the path to the properties page dispform.aspx using values already available... -->
  <xsl:variable name="PropertiesURL">
   <xsl:value-of select="@EncodedAbsUrl"/>
   <xsl:value-of select="@Path" />
   <xsl:value-of select="'/Forms/DispForm.aspx?ID='"/>
   <xsl:value-of select="@DocID"/>
  </xsl:variable>   �
        <div>
            <div>
    <table width="100%" border="1">
     <tr>
      <!-- MV: this cell contains the XSL to get the current XSL variables and format them into a linked title for the document... -->
      <td>
        <xsl:call-template name="OuterTemplate.CallPresenceStatusIconTemplate"/>
       <a href="{$SafeLinkUrl}" title="<a href="mailto:%7B@LinkToolTip">{@LinkToolTip</a>}">
         <xsl:if test="$ItemsHaveStreams = 'True'">
        <xsl:attribute name="onclick">
          <xsl:value-of select="@OnClickForWebRendering"/>
        </xsl:attribute>
         </xsl:if>
         <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">
        <xsl:attribute name="onclick">
          <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>
        </xsl:attribute>
         </xsl:if>
         <xsl:value-of select="$DisplayTitle"/>
       </a>     �
      </td>�
      <td width="50px">
       <!-- MV: display the actual document icon/thumbnail as an image... -->
         <div>
          <img src="<a href="mailto:%7B@DocumentIconImageUrl">{@DocumentIconImageUrl</a>}" title="" />
         </div>     �
      </td>�
      <td width="200px">
                   <xsl:value-of select="@Author" />
      </td>     �
      <td width="100px">
                   <!-- MV: manually create a link to the DispForm.aspx (properties) page using the item's ID property... -->
       <a href="{$PropertiesURL}" target="_blank">click here</a>
      </td>
     </tr>
    </table>
            </div>
        </div>
    </xsl:template>�

The key parts of the ItemStyle.xsl code snippet are:
Lines 20-26, where a new xsl variable “PropertiesURL” which is the concatenation of several built-into-SharePoint
properties which (at least for me) have proven to get the job done. For those of you children-of-a-lesser-XSL-god
like myself, the goal here is to concatenate the values returned by several “@something” statements, which under
the hood are actually XPath (XML Path query language) statements which return the value of various attributes in
a matching node; The way the CQwp works in SP2010, whenever you reference an attribute in the ItemStyle.xsl file,
the CQwp auto-generates a new document property “slot” in the web part’s property panel; then whatever document
property you specify in the panel is what is returned as the value of that attribute. THEN “stacking” up these
XPath calls inside XSL “value-of” elements is how you CONCATENATE strings in XSL to get a single larger uber-string,
in this case the entire URL to the Properties page for a SharePoint document, namely DispForm.aspx.
Once the PropertiesURL is assembled inside the XSL, it can then be reference when it’s time to render the transformed
XML, as is shown in line 59. Here the PropertiesURL XSL variable is called as part of composing the HREF element
which IS the Properties URL for the current document (node) in the CQwp display.
Here’s what the CQwp Properties Panel looks like – namely the Presentation Section:


Here’s what the final CQwp looks like with data displayed horizontally, rendered by a combination of a custom GroupStyle
(in the Header.xsl file) and a custom ItemStyle (in the ItemStyle.xsl file):
So, to summarize our steps, we: 

  1. BACKED-UP our OOTB header.xsl and itemstyle.xsl files;
  2. UPLOADED these backups back to the Style Library;
  3. EDITED the header.xsl, adding a new GroupStyle which renders a new <TABLE> with all the headings in it;
  4. EDITED the itemstyle.xsl file, adding a new ItemStyle which renders each item as its own <TABLE>, with matching dimensions to the header’s <TABLE> so after rendering it all looks like ONE table (but it’s not);
  5. IN the new ItemStyle we DEFINED several new slots for the @EncodedAbsUrl, @Path and @ID properties of each document, the concatenated these together with some static text to create the PropertiesURL;
  6. IN the CQwp we also CONFIGURED it to Group By <site>, then we selected our new (custom) GroupStyle and ItemStyle;
  7. IN the  CQwp’s properties we CONFIGURED the new slots to return each item’s Encoded Absolute URL, Path and ID property values;

When properly configured, the CQwp displays a nicely-formatted horizontal layout of items and their properties, together with nice table headngs AND our much-sought-after link to Properties.

Feedback is welcome – hope others find this helpful and perhaps a bit easier than parsing out the “@URL Path” property.

Cheers,

-MV

Leave a Reply

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