Content query web part – get it all in one place and style it!
-
Upload
benjamin-niaulin -
Category
Technology
-
view
13.660 -
download
1
description
Transcript of Content query web part – get it all in one place and style it!
![Page 1: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/1.jpg)
Benjamin NiaulinPresented at: SharePoint Fest Chicago
SharePoint Geek
Content Query Web Part – Get it all in one place and style it!
![Page 2: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/2.jpg)
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.
![Page 3: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/3.jpg)
Share-gate.com@bniaulin
Who is this guy talking?
Benjamin NiaulinSpeaker, Trainer, Consultant, SCRUM MasterBlog
bniaulin.wordpress.comWebsite
share-gate.comEmail
[email protected]!: @bniaulin
![Page 4: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/4.jpg)
Share-gate.com@bniaulin
Agenda
IntroductionThe Content Query Web PartDEMOThe XSL Files – What is that? What do they do?DEMODynamic FilteringDEMOAdvanced CQWP Stuff
![Page 5: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/5.jpg)
INTRODUCTION
![Page 6: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/6.jpg)
Share-gate.com@bniaulin
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
![Page 7: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/7.jpg)
CONTENT QUERYWeb Part - Overview
![Page 8: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/8.jpg)
Share-gate.com@bniaulin
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
![Page 9: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/9.jpg)
Share-gate.com@bniaulin
Web Part Properties - Query
QuerySourceList TypeContent TypeAudience TargetingAdditional Filters
![Page 10: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/10.jpg)
Share-gate.com@bniaulin
Web Part Properties - Presentation
PresentationGrouping and SortingSortingItem LimitStylesFields to displayFeed <-- Don’t underestimate!
![Page 11: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/11.jpg)
Share-gate.com@bniaulin
Examples
http://labs.steveottenad.com/sharepoint-2010-xslt-date-formatting/
By Ben Tedder on NBSP
By Yohan Belval from Sharegate
![Page 12: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/12.jpg)
DEMO
![Page 13: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/13.jpg)
XSL FILES – HUH?
![Page 14: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/14.jpg)
Share-gate.com@bniaulin
Understanding XSLT
XSLT: Extensible Stylesheet Language Transformations
Basically transforms XML
Ref: http://en.wikipedia.org/wiki/XSLT
![Page 15: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/15.jpg)
Share-gate.com@bniaulin
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
![Page 16: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/16.jpg)
Share-gate.com@bniaulin
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="."/><br/></xsl:for-each><br/><br/><br/></xsl:template>
![Page 17: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/17.jpg)
Share-gate.com@bniaulin
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\
![Page 18: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/18.jpg)
Share-gate.com@bniaulin
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….
![Page 19: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/19.jpg)
Share-gate.com@bniaulin
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
![Page 20: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/20.jpg)
Share-gate.com@bniaulin
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….
![Page 21: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/21.jpg)
Share-gate.com@bniaulin
Header.xsl
When you use the CQWP with a GroupBy option the header.xsl is called.
![Page 22: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/22.jpg)
Share-gate.com@bniaulin
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"> <span class="title"><xsl:value-of select="@Title" /></span> <span class="location">Location: <xsl:value-of select="@Location" /></span>
![Page 24: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/24.jpg)
DEMO
![Page 25: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/25.jpg)
DYNAMIC FILTERING
![Page 26: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/26.jpg)
Share-gate.com@bniaulin
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
![Page 27: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/27.jpg)
Share-gate.com@bniaulin
Example on MSDN BLog
Ref: MSDN Blog
![Page 28: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/28.jpg)
Share-gate.com@bniaulin
More
http://www.chakkaradeep.com/image.axd?picture=image_319.png
![Page 29: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/29.jpg)
ADVANCED PROPERTIES
![Page 30: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/30.jpg)
Share-gate.com@bniaulin
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
![Page 31: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/31.jpg)
Share-gate.com@bniaulin
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.
![Page 32: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/32.jpg)
Share-gate.com@bniaulin
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>
![Page 33: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/33.jpg)
DEMO
Filter by File Extension
![Page 34: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/34.jpg)
Q&A
![Page 35: Content query web part – get it all in one place and style it!](https://reader035.fdocuments.in/reader035/viewer/2022062513/55629f5bd8b42a802b8b48ec/html5/thumbnails/35.jpg)
Share-gate.com@bniaulin
THANK YOU!
KEEP IN TOUCH ON TWITTER @BNIAULIN
Benjamin Niaulin