How to create an index for SharePoint Spaces using the content query web part

By João Ferreira May 10, 2020 Development, Spaces 0 Comments

SharePoint Spaces are great and allow you to display data like never before however they are just regular pages and there is no place where you can get a central view of all the spaces you have created.

As part of the Library series of articles I’ve been doing (you can read more about it here and here) in this one I’ll show you how to build an index to display SharePoint Spaces using the content query web part.

The content query web part is an open source project included in the PnP initiative and it just got updated to make use of the latest version of the SharePoint Framework.

The Content Query web part is a modern version of the good old Content by Query web part that was introduced in SharePoint 2007. While the original web part was based on an XSLT template engine, the new web part uses Handlebars template engine, which empowers users to create simple, yet powerful HTML templates for rendering the queried content.

To build the SharePoint Spaces index you can either clone the GitHub repository and compile the web part yourself or download a compiled version for Office 365 from here.

Once installed and added to your site collection do the following:

1. Add the content query web part to the page you want to use as an index
   
2. Once added to the page open the settings pane
3. Choose the source site for your index, if you are creating the index in the same site collection where you have the SharePoint Spaces it will be selected by default
4. Choose the web where you have your SharePoint Spaces, by default it will select the root site of the site collection
5. On the list select Site Pages, this is the library where all the pages are created including the SharePoint Spaces
6. Chose the library field to sort the items, Title is a good candidate for an index
   
7. On the filters you need to select Page Layout Type {{PageLayoutType}}, this is the field that will be used to select just the SharePoint Spaces
8. On the operator select Equals
9. On the value use d39ad2cb-84bd-48a0-9daa-4aea9f644cd4, this is the unique identifier of the page layout used by the SharePoint Spaces
10. On the Layout section select the fields you want to display in your index, to build this example you will need to select the following:
    • Banner Image Url {{BannerImageUrl}} – this field has a preview image of your SharePoint Space that will help you to easily identify it
    • Title {{Title}} – this the name of your SharePoint Space
    • URL Path {{FileRef}} – this the link to your SharePoint Space
11. Click on the Edit template content and replace all default content by the following Handlebars template
    

    
    
    
      
    Space Libraries
      
    
    	  {{#each items}}          
    		  
    			
    
    				
    	
    				
    
    					{{Title.textValue}}					
    				
    			
    		  
    	  {{/each}}
      
    
    

12. Click Save an Publish your page

Your SharePoint Spaces index will look similar to the following animation, modify it according to your needs or reuse the content query web part to easily build content inside SharePoint.

Download Content Query Web Part
Explore Solution on GitHub

Woman vector created by stories – www.freepik.com