Page layouts with predefined search webparts

20 november 2017

Imagine you want to create a portal with information about certain products and product related documents. This sounds a lot like a product catalog, however you want to create this portal in SharePoint Online where the product catalog functionality is not available.

Now you have a challenge.

You also want to make this easy to create for the people that are supposed to maintain this portal.

Another challenge.

Let’s sketch the scenario.
You want a portal where you can create pages with information about certain unique products. On this portal you also have related documents that correspond with your products. (Documents like fact-sheets or sales presentations)
It would be nice that certain information is automatically matched to your product page like those documents.
It would also be nice that all your products can be managed in one place and that your products are shown with an image.

Note! Each product has its own unique name and this name will be used as the common identifier between the different elements you would need

  • Product in the Image library
  • Page with the same title as the product in the Image library
  • Related document in a Document library with a look-up column to the product in the Image library

Let’s have a look at what you would need

Bare minimum of elements you would need
One a SharePoint Online environment to place your product portal
Two knowledge about SharePoint Designer 2013 where you edit your Page Layouts
Three knowledge about SharePoint Search Schema’s to configure managed properties
Four an Image library for your products and additional metadata for your product information
Five a Document library for your related product documents
Six a Page library where you create your product pages

For this article I will only explain on how to edit your Page Layouts for as the other elements are SharePoint Online “normal” features.

So which steps do you need to create your predefined “Content Search” webpart?

Step 1: Create and configure your search webpart (Content Search) on a dummy page the way you want it to be.
Step 2: Configure your query based on the page title which has to be a unique title
You can implement this by using the following code: ”refinablestring106={Page.Title}”. In my case I have matched refinablestring106 to a field named Vessel (this is the “product”).
Step 3: Export your webpart and save the code
Step 4: Open SharePoint Designer 2013
Step 5: Create a copy from the page layout you want to use and give it your own name
Step 6: insert a SharePoint webpart à Content Search in your own page layout on the place where you want your predefined search webpart. Insert this between the “ZoneTemplate-tags”

Step 7: Open your exported webpart in an editor (like NotePad++ of TextPad)
Step 8: Make sure your properties are easy to read in your editor and in SharePoint Designer

Step 9: Copy the following related properties from your editor to your webpart in SharePoint Designer.
The properties below are like the bare minimum that makes sense. You can edit more properties depending on how your exported webpart has been configured.

Property subproperty Copy below values from your editor to SharePoint Designer
DataProviderJSON SourceID This is your sitecollection ID
  SourceName Local SharePoint Results
  SourceLevel Ssa
  QueryTemplate This is your query you build earlier
ResultsPerPage   Copy from your editor to SharePoint Designer
ItemTemplateID   "~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/Item_TwoLines.js"
GroupTemplateID   "~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/Group_Content.js"
RenderTemplateID   "~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/Control_ListWithPaging.js"
SelectedPropertiesJson   Properties mapped in the webpart
HitHighlightedPropertiesJson   Properties mapped in the webpart
Title   Title of the webpart
ChromeType   Use this value if you want to show the webpart title

Step 10: Save your page layout and it is ready to use
You have now created your own page layout with a predefined search component which you can select from the Page Layout menu

You can repeat these steps to add multiple content search components and as with search component you can create your own display templates with them to show information in a different way. Use the “ItemTemplateID” property to match your display templates.

Below is an example of only predefined content search webparts and 3 different ways of showing information using display templates.

Take note! Because you are using the content search webpart, your results are limited to a maximum of 50 results.

You have set up an easy way for the people who must create new product pages so that they don’t have to configure a content search webparts for each product and your product are maintainable from one list.

When you have saved the page layout and you want to edit your webpart (because you want a different title or a different number of results) the code has been changed a little bit by SharePoint Designer. It has been changed in: “<spsswc:ContentBySearchWebPart”
Make sure that your search webpart starts with the code:  “<WebControls:ContentBySearchWebPart”
Or it will not work correct and will give errors when creating new pages with the page layout.

Submit a comment