Skip to content
  • There are no suggestions because the search field is empty.

How to define Layout Slots in PnP Search Results

 In this article, you'll learn how to configure Layout Slots in the PnP Search Results web part. Layout Slots allow you to map data source fields to reusable placeholders that can be used within your display templates. 

1. Overview

Layout Slots make your search result templates more flexible and reusable by separating the template structure from the underlying data source fields.

Instead of referencing managed properties directly in your Handlebars templates, you can define slots and map them to the appropriate fields. This makes it easier to reuse the same template across different search configurations.

2. What You'll learn 

By following this guide, you will learn how to:

  • Open the PnP Search Results configuration panel
  • Configure Layout Slots for a data source
  • Map slots to managed properties
  • Save and apply slot configurations
  • Use configured slots in custom templates

 

3. Watch the Interactive Video here 

 

4. Step-by-Step Guide 

 Step 1: Open the Page in Edit Mode

  1. Navigate to the SharePoint page containing your PnP Search Results web part.
  2. Click Edit to open the page in edit mode.

Step 2: Open the PnP Search Results Properties Pane

  1. Select the PnP Search Results web part.
  2. Click the Edit Web Part icon to open the properties pane.

Step 3: Edit Layout Slots

  1. Locate the Layout Slots section within the web part configuration.
  2. Click Edit Layout Slots.

The Layout Slots panel will open and display all available slot definitions for the selected data source.

Step 4: Configure Slot Mappings

  1. Select the slot you would like to configure.
  2. Choose the managed property or data source field that should be associated with the selected slot.
  3. Repeat the process for any additional slots you want to configure.

Common Slot Examples

Slot Name Typical Managed Property
Title Title
Description Description
Image PictureURL
Author Author
Date RefinableDate05
Category InvolvCategoryOWSCHCS
Url Path

The available fields may vary depending on your data source and selected properties.

Step 5: Save the Configuration

  1. Click Save to apply and store your Layout Slot mappings.
  2. Verify that all required slots have been configured correctly.

Step 6: Close the Properties Pane

  1. Close the PnP Search Results properties pane.
  2. Return to the page editor.

Step 7: Save and Publish Your Changes

  1. Click Save and Exit.
  2. Publish or republish the page if required.