Content query web part – get it all in one place and style it!

Benjamin NiaulinPresented at: SharePoint Fest Chicago

SharePoint Geek

Content Query Web Part – Get it all in one place and style it!

Share-gate.com@bniaulin

Description

More than once people have customized or developed a solution or web part to accommodate certain needs. Many times, these needs could have been met with a simple Out-of-the-Box Web Part called the Content Query Web Part. In this session we will explore the possibilities of querying the right content as well as changing the style to display these results.

http://en.share-gate.com/

http://twitter.com/bniaulin


Who is this guy talking?

Benjamin NiaulinSpeaker, Trainer, Consultant, SCRUM MasterBlog

bniaulin.wordpress.comWebsite

share-gate.comEmail

[email protected]!: @bniaulin

http://bniaulin.wordpress.com/


mailto:[email protected]

http://twitter.com/

http://twitter.com/




Agenda

IntroductionThe Content Query Web PartDEMOThe XSL Files – What is that? What do they do?DEMODynamic FilteringDEMOAdvanced CQWP Stuff



INTRODUCTION


Problems we face

Showing data from multiple lists/libraries at the

same time

Change the date format in a list/library

Dynamic filtering

Changing the look of a list/library

Showing specific data from lists/libraries to the

relevant audience



CONTENT QUERYWeb Part - Overview


Content Query Web Part (CQWP)

Requires Site Collection Feature: Publishing Infrastructure*

Helps create dynamic views based on what the user is looking atPower User can Edit theQuery and the StyleAggregate content fromthe Site CollectionReusable and customizablestyles




Web Part Properties - Query

QuerySourceList TypeContent TypeAudience TargetingAdditional Filters




Web Part Properties - Presentation

PresentationGrouping and SortingSortingItem LimitStylesFields to displayFeed <-- Don’t underestimate!




Examples

http://labs.steveottenad.com/sharepoint-2010-xslt-date-formatting/

By Ben Tedder on NBSP

By Yohan Belval from Sharegate




https://www.nothingbutsharepoint.com/sites/eusp/Pages/Itemstylexsl-in-SharePoint-2010-A-guide-for-designers.aspx



DEMO

XSL FILES – HUH?


Understanding XSLT

XSLT: Extensible Stylesheet Language Transformations

Basically transforms XML

Ref: http://en.wikipedia.org/wiki/XSLT

http://en.wikipedia.org/wiki/XSLT




Understanding XSLT

Debug itemstyle:<xsl:template name="Debug"

match="Row[@Style='Debug']" mode="itemstyle"><xsl:for-each select="@*">

P:<xsl:value-of select="name()" /></xsl:for-each>

</xsl:template>

Learn xslt: http://www.w3schools.com/xsl/default.asp

http://www.w3schools.com/xsl/default.asp

http://www.w3schools.com/xsl/default.asp




Display RAW Data of Query

<xsl:template name="DisplayRawData" match="Row[@Style='DisplayRawData']" mode="itemstyle"><xsl:for-each select="@*"><xsl:value-of select="name()"/><xsl:text> = </xsl:text><xsl:value-of select="."/> </xsl:for-each> </xsl:template>




XSL Files used by SharePoint

There are 3 files used by the CQWPContentQueryMain.xslItemStyle.xslHeader.xsl

Files are located in the Style Library at the Root of your Site Collection

\Style Library\XSL Style Sheets\




ContentQueryMain.xsl

Contains logic that generates the appropriate calls to the Header and Item templates for each item.Contains functions that help designers modify the Item and Header XSLT transforms.Receives all the content, parses it, and sends appropriate pieces to the ItemStyle and Header templates.Maintains the structure of the Content By Query Web Part.Stores data retrieved when querying content in the path /dsQueryResponse/Rows/Row.MSDN Definition

In short….

http://msdn.microsoft.com/en-us/library/bb447557.aspx




ContentQueryMain.xsl

Think of it as the big container of the WebPartIn charge of what isn’t repeated (header, footer, calling CSS or JS to be used in your itemstyle after)It controls the flow of the content it receives

ContentQueryMain.xslLet’s check it out




Header.xsl

Contains templates that define how to display a header and ensure the consistency of group headers.Templates specified in Header.xsl receive the next item row to process, usually the first row in a group unless there are multiple columns. If there are multiple columns, the templates receive the first row of the column.You can retrieve data about the next item row by using the @Property directive. You can use the $Group parameter that contains the groupby column name and the $GroupType that represents the column type of the groupby column.MSDN Definition

In short….






Header.xsl

When you use the CQWP with a GroupBy option the header.xsl is called.




Itemstyle.xsl

Contains templates that define how to display an item. These templates receive and process one row of data at a time, ensuring that the style and data in the item rows is consistent.You can retrieve data about a row by using the @Property directive.

Basically it’s what gets applied to each “item” or row.

<div class="right"> <xsl:value-of select="@Title" /> Location: <xsl:value-of select="@Location" />




Examples



DEMO

DYNAMIC FILTERING


Dynamic Filters

PageFieldValueSpecify a field on the Page Layout to act as the filter for the Query

PageQueryStringTakes the value in the URL and applies it as the filter for the Query




Example on MSDN BLog

Ref: MSDN Blog

http://blogs.msdn.com/b/ecm/archive/2010/05/14/what-s-new-with-the-content-query-web-part.aspx




More

http://www.chakkaradeep.com/image.axd?picture=image_319.png



ADVANCED PROPERTIES


Access the Advanced Properties

You can easily access advanced properties of the CQWPEdit Web Part

Export into .webpart fileOpen with an XML editor (notepad, etc.)Modify the fileImport .webpart back into your site




More Advanced Stuff

CommonViewFieldsAsk for additional fieldsBy default the CQWP does not return all fields automatically

QueryOverrideWhen used, all settings for Query in the UI are greyed outMakes it possible to specify the query portion of a cross-list query in CAML.




Still More Advanced Properties…

WebsOverrideDetermines whether the cross-list query should recurse subsites.

ListsOverrideSpecify which lists/library you want to query

<property name="ListsOverride" type="string"><![CDATA[<Lists><List ID="31A7C09D-52CC-4585-B998-A3F180A9BD07"/><List ID="7382D66D-2E4C-47CB-A95C-5EECD68F5E61"/></Lists> ]]></property>



DEMO

Filter by File Extension

Q&A


THANK YOU!

KEEP IN TOUCH ON TWITTER @BNIAULIN

Benjamin Niaulin

Technology

Content query web part – get it all in one place and style it!