WordPress.com

Content Search web part introduced in SharePoint 2013 is a powerful tool that lets you easily retrieve and customize the appearance of search results without ever writing a single line of server-side code. In this post I’ll show how to display items from a SharePoint list in a Twitter Bootstrap Carousel on any page of your site using a?Content Search web part and?a custom control and item display templates.First thing we need to do is to create a SharePoint list that will contain the items to be displayed in the carousel. Let’s start by creating the site columns below.Navigate to?Site Settings > Site columns > CreateCarouselBody site column is going to hold the text to be displayed within each carousel slide.Name: CarouselBodyType: Full HTML content with formatting and constraints for publishingGroup: ContosoRequire that this column contains information: YesCarouselImage site column will contain the image to be displayed as the slide background.Name: CarouselImageType: Image with formatting and constraints for publishingGroup: ContosoRequire that this column contains information: YesAt this point the site columns should look something like this:Next, we need to create a content typeNavigate to?Site Settings > Site content types > CreateThe Carousel content type will group the site columns togetherName: CarouselParent Content Type: ItemGroup: ContosoAdd the site columnsAdd from existing site columnsSelect columns from: ContosoColumns to add: CarouselBody, CarouselImageThe content type now should look similar to this:Now it’s time to create the SharePoint list.Site Contents > add an app > Custom ListName: CarouselEnable content type management for the list.List Settings > Advanced settingsAllow management of content types?: YesAdd the Carousel content type to the list content typesList Settings > Content Types > Add from existing site?content typesGroup: ContosoContent types to add: CarouselRemove the default Item content type from the listList Settings > Content Types > Item > Delete this content typeThe list settings should now be as below:Finally, we are ready to add some carousel items to the list.?Once the items are added, let’s go ahead and run a full crawl. The managed properties for each column in the list will be created automatically.Central Administration > Application Management > Manage service applicationsSearch Service Application > Content Sources > Local SharePoint Sites > Start Full CrawlWhen the crawl is complete we can verify that all of the information we need is in the search index by running a REST API search query.’contenttype:carousel’&selectproperties=’Title,CarouselBodyOWSHTML,CarouselImageOWSIMGE’The results should match the screenshot below:Before we move on to the next step, we need to download the jQuery library and Twitter Bootstrap Carousel package and upload those to the Site Assets document library.Download jQuery:? Bootstrap:? components: CarouselSelect jQuery plugins: CarouselSite Contents > Site AssetsUpload Document: jquery-1.8.2.min.jsUpload Document: bootstrap.min.cssUpload Document: bootstrap.min.jsThe contents of the Site Assets document gallery should look something like this:At this point we have the content we need available and can now start developing the custom display templates. We’ll do that by copying and editing some of the standard display templates that come with SharePoint 2013 and?located in the master pages gallery.Site Settings > Master pages > Display Templates > Content Web PartsControl_List.html > Download a CopySave As: Control_CarouselList.htmlReplace the content of the file with the following:<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">?<head>?<title>Carousel List</title>??</head>?<body>??????????<script>?????????$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");?????????$includeCSS(this.url, "~sitecollection/SiteAssets/bootstrap.min.css");?????????$includeScript(this.url, "~sitecollection/SiteAssets/jquery-1.8.2.min.js");?????</script>??????????<div id="Control_CarouselList">????<div id="myCarousel" class="carousel slide">?????<div class="carousel-inner">?????????????_#= ctx.RenderGroups(ctx) =#_?????</div>?????<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>?????<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>???</div>??????????<div class="_#= noResultsClassName =#_">_#= $noResults =#_</div>??????</div>?</body>?</html>The carousel control display template is ready so we can upload it to the same location in the master pages gallery.Site Settings > Master pages > Display Templates > Content Web PartsUpload Document: Control_CarouselList.htmlYou should see the Control_CarouselList.js file automatically generated by SharePoint 2013:The next step is to create an item display template for the carousel slides.Similar to the control display template created earlier, we are going to copy and edit?a standard item display template.Site Settings > Master pages > Display Templates > Content Web PartsItem_PictureOnTop.html > Download a CopySave As: Item_Carousel.htmlReplace the file content with the following:<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head>?<title>Carousel item</title>??</head>?<body>??????????<script>?????????$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");?????</script>??????????<div id="Item_Carousel">????????<div class="item">?????????_#= carouselImage.value =#_?????????<div class="carousel-caption">???????????<h4>_#= carouselHeading =#_</h4>???????????<p>_#= carouselBody =#_</p>?????????</div>???????</div>?????</div>?</body>?</html>Upload the custom item display template to the master pages gallery.Site Settings > Master pages > Display Templates > Content Web PartsUpload Document: Item_Carousel.htmlVerify that the associated Item_Carousel.js was successfully generated:At last, everything is in place and we can now add a Content Search web part to the page.Page > EditInsert > Web Part > Content Rollup > Content SearchConfigure the web part to fetch carousel items from the search index and use the custom display templates created earlier.Edit Web PartChange QuerySelect a query: Items matching a content typeRestrict by content type: CarouselDisplay TemplatesControl: Carousel ListItem: Carousel ItemAppearanceWidth: 830px (set to the width of your carousel images)Page > SaveAt this point you should see the Twitter Bootstrap Carousel on the page displaying items from the Carousel SharePoint list.<html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882">?<head>?<title>Carousel List</title>??</head>?<body>??????????<script>?????????$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");?????????$includeCSS(this.url, "~sitecollection/SiteAssets/bootstrap.min.css");?????????$includeScript(this.url, "~sitecollection/SiteAssets/jquery-1.8.2.min.js");?????</script>??????????<div id="Control_CarouselList">????<div id="myCarousel" class="carousel slide">?????<div class="carousel-inner">?????????????_#= ctx.RenderGroups(ctx) =#_?????</div>?????<a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>?????<a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>???</div>??????????<div class="_#= noResultsClassName =#_">_#= $noResults =#_</div>??????</div>?</body>?</html><html xmlns:mso="urn:schemas-microsoft-com:office:office" xmlns:msdt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882"><head>?<title>Carousel item</title>??</head>?<body>??????????<script>?????????$includeLanguageScript(this.url, "~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js");?????</script>??????????<div id="Item_Carousel">????????<div class="item">?????????_#= carouselImage.value =#_?????????<div class="carousel-caption">???????????<h4>_#= carouselHeading =#_</h4>???????????<p>_#= carouselBody =#_</p>?????????</div>???????</div>?????</div>?</body>?</html> ................
................

In order to avoid copyright disputes, this page is only a partial summary.

To fulfill the demand for quickly locating and searching documents.

It is intelligent file search solution for home and business.

Literature Lottery

To fulfill the demand for quickly locating and searching documents.

Related download

Related searches