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:
- Community – Choice field to select a department for the event
- EventStartTime – Calculated field to copy ‘Start Time’ value
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:
Select the option to display items from a specific list and browse to select the Calendar list:
Configure filter and sort order for the web part and save:
On the home page, the CQWP will display upcoming events of the current department.
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.
