Working with jQuery and the CQWP - Nellis...

WorkingwithjQueryandtheCQWPChristinaWheeler

AboutMeChristinaWheeler,MCTSSharePointTrainer&ConsultantCriticalPathTraininghttp://www.criticalpathtraining.com– Blog:http://www.sharepointwheeler.com– Twitter:@cwheeler76– Email:sharepointhelp@outlook.com– PublishedBooks

• SharePoint2010FieldGuide• SharePoint2013InsideOut

CONTENTQUERYWEBPART(CQWP)

ContentQuery WebPart(CQWP)• No,thiswebpartisNOTdead!J• MinormodificationsmadeinSharePoint2013• Aggregatescontentreal-time• *NEW*Filterbypagenavigationterm

CQWPBenefits• CQWPworksbothon-premises&O365• Instantlyupdates– Nowaitingforacrawltorun,norelianceonsearch

• Simpletouse– Intuitivewebpartproperties– Canbeusedbycontentownerstobuilddynamiccontentonpagesfairlyeasily

– DoesnotrequireVisualStudiotocreateandmaintain• Grouping– Hasagroupingfunctionalitythatthesearchwebpartdoesn’treallypossessandisusedwithdecentfrequency

WhentoUseCQWP• CQWPonlyreliesonthePublishingFeaturethereforeismoreavailableonvariouslicensedO365andServerversions– ContentbySearchWebPartislicensespecificthereforenotallusershaveaccesstousingtheCSWP

• RecommendusingCQWPwhen:– Needingtodisplaysimplecontent– Notneedingcomplexqueries

CQWP– PresentationStyling• ContentQueryMain.xsl– ContainsthelogicthatgeneratesthecallstotheHeaderandItemtemplatesforeachitem

• Header.xsl– Templatesthatdefinehowtodisplaytheheaders(groupby)

• ItemStyle.xsl– Templatesthatdefinehowtodisplaytheitemsreturnedfromthequery

BestPractices• UsecustomXSLfilesforGroupandItemstyle• Usecustomcontenttypesforrolledupcontentforbetterrefining

• UseOverrideswhenneededtoimproveperformance

UseCustomXSLFiles• CreateXSLfilesinXSLStyleLibrary– Example:CustomContentQueryMain.xslCustomItemStyle.xslCustomHeader.xsl

• Add CQWPtoapage• Export CQWPtolocalfilesystem• Open CQWP.webpart fileintexteditor

UseCustomXSLFiles• UpdatethepropertiespointingtothedesiredcustomXSLstylesheet

<property name="MainXslLink" type="string">/Style Library/XSL Style Sheets/CustomContentQueryMain.xsl</property>

<property name="ItemXslLink" type="string">/Style Library/XSL Style Sheets/CustomItemStyle.xsl</property>

<property name="HeaderXslLink" type="string">/Style Library/XSL Style Sheets/CustomHeader.xsl</property>

UseCustomXSLFiles• SaveandimportCQWPtothedesiredpageandconfigure

• Forreusability,addcustomizedCQWPintotheWebPartGallery

WORKINGWITHJQUERY&CQWP

jQuery&theCQWP• jQuerycanbeusedinvariouswayswiththeCQWP– Accordions– ModalWindows– Slideshows– InteractiveNavigationElements– Etc…

ReferencingjQuery• AddreferencestojQuerylibrariesandJavaScriptfilesthrough:– SnippetsWebPart– ContentEditorWebPart(referencefile)– DirectlyinCQWPXSLtemplatefiles

ReferencingjQuerydirectlyinXSLInlineScriptBlock:<xsl:text disable-output-escaping="yes"><![CDATA[ <script type="text/javascript">(your JavaScript code here) </script> ]]> </xsl:text>

ScriptReferenceBlock:<xsl:text disable-output-escaping="yes"><![CDATA[ <script type="text/javascript"src="/SiteAssets/jquery-1.9.1.min.js"></script> ]]> </xsl:text>

DEMO

Questions?ChristinaWheeler,MCTSSharePointTrainer&ConsultantCriticalPathTraininghttp://www.criticalpathtraining.com– Blog:http://www.sharepointwheeler.com– Twitter:@cwheeler76– Email:sharepointhelp@outlook.com– PublishedBooks

• SharePoint2010FieldGuide• SharePoint2013InsideOut