working with jquery and the cqwp - nellis...
TRANSCRIPT
WorkingwithjQueryandtheCQWPChristinaWheeler
AboutMeChristinaWheeler,MCTSSharePointTrainer&ConsultantCriticalPathTraininghttp://www.criticalpathtraining.com– Blog:http://www.sharepointwheeler.com– Twitter:@cwheeler76– Email:[email protected]– 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:[email protected]– PublishedBooks
• SharePoint2010FieldGuide• SharePoint2013InsideOut