Skip to main content
Content Query

Customizing Content Query Web Part and ItemStyle

Content Query Webpart in SharePoint is a feature of Enterprise Content Management functionality. The Web Part helps to aggregate and display list items within a site collection. Content Query Web Part also has caching and query optimization capability for SPSiteDataQuery. The Content Query Web Part can display items such as any ‘list’ or ‘document library’ within a root site or its sub-sites.

A Content Query Web Part can be used to query items based on three options:

  • Show items from all sites in the site collection
  • Show items from the following site and all sub-sites
  • Show items from the following list

In this blog, I will explain the process to save items within a SharePoint List, in the root site, and display them in sub-sites based on a column filter and customizing ItemStyle.

Create Calendar Events List

For my requirement, a Calendar list for Departments root site is used to save all events. I have chosen the root site to save the calendar in order to have a common design and storage. The sub-sites for each department holds its documents and manages permissions. A home page should display upcoming events of the current department.

I have added two additional columns to default calendar list in SharePoint site:

  1. Community – Choice field to select a department for the event
  2. EventStartTime – Calculated field to copy ‘Start Time’ value

SharePoint Site

Add Content Query Web Part

This is an out-of-the-box Web Part available to all SharePoint pages under category ‘Content Rollup’. Insert the Web Part into the department home page:

SharePoint Pages

Select the option to display items from a specific list and browse to select the Calendar list:

SharePoint Site

Configure filter and sort order for the web part and save:

Web Development

On the home page, the CQWP will display upcoming events of the current department.

CQWP

Customize ItemStyle XSLT

Content Query Webpart uses ItemStyle.xsl file located in sitecollection Style Library. I have created a new template named “EventsDisplay” within ItemStyle.xsl file.

<xsl:template name="EventsDisplay" match="Row[@Style='EventsDisplay']" mode="itemstyle"> </xsl:template>

Custom header text and formatting are added to xsl file:

<div class="events-header">
    <xsl:if test="count(preceding-sibling::*)=0">
        <h3> <span class="events-header-text">Upcoming Events</span> <a class="events-header-link" href="/departments/Lists/UpcomingEvents">Visit Calendar <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></a> </h3>
    </xsl:if>
</div>

To display fields in content query webpart add an xsl:value-of attribute:

<xsl:value-of select="ddwrt:FormatDate(string(@EventDate), 1033, 3)" />
<xsl:value-of select="@Title" />

The webpart displays its content in table format:

<table class="table events-table" style="margin-bottom:0px;">
    <xsl:if test="count(preceding-sibling::*)=0">
        <tr>
            <td width="25%" class="calevent_date" valign="top" style="border-top:1px solid #ddd;border-left:1px solid #ddd; border-right:1px solid #ddd; background-color:#F5F5F5;padding:0px 8px;">
                <div class="item"><b>Date</b></div>
            </td>
            <td width="75%" class="calevent_date" valign="top" style="border-top:1px solid #ddd; border-right:1px solid #ddd; background-color:#F5F5F5;padding:0px 8px;">
                <div class="item"><b>Event</b></div>
            </td>
        </tr>
    </xsl:if>
    <tr>
        <td class="calevent_td" width="25%" valign="top" style="padding:0px 8px;">
            <div class="item">
                <xsl:value-of select="ddwrt:FormatDate(string(@EventDate), 1033, 3)" />
            </div>
        </td>
        <td class="calevent_td" width="75%" valign="top" style="padding:0px 8px;">
            <div class="item">
                <xsl:value-of select="@Title" />
            </div>
        </td>
    </tr>
</table>

Conclusion

Content Query Webpart in SharePoint is a very handy out-of-the-box functionality to display list items within a site collection, by avoiding customization. This Web Part does not belong to search category hence does not require crawl to view results. The Web Part’s display can be customized extensively with the help of XSL files.

Sreejith K B

Sreejith K B

Sreejith. B. works as Technical Lead with Trigent Software. Sreejith is a senior IT professional with over 12 years experience in Microsoft Technologies and web development tools using SharePoint and advanced frameworks such as AngularJS, Bootstrap, jQuery in product design and development. Sreejith comes with extensive experience in all stages of s software development life cycle including design, development and implementation.