I Made SharePoint Search Look Like Microsoft Loop (Free Template Inside) 🎨

[@KasperBoLarsen]

Great video Daniel. Recently it became easier to create your own template as the PnP Modern Search was enhanced with a check that would warn you with the template is referring a slot that doesn't exists or your Slots are wrong. Awesome feature, as debugging a template can be a challenge.

[@DanielAndersonAU]

Yep that was a great enhancement

[@WonderLaura]

This is so cool!! Lovely!

[@DanielAndersonAU]

Wow, hello there Wonder Laura. That is amazing feedback coming from you. An honor to have a comment from the callibre of you.

[@MyCopilot-anthonyrhopkins]

*Generated By Microsoft Copilot* 00:04-00:08 | Introduction: Daniel Anderson greets viewers and introduces the topic of the video, which will focus on enhancing SharePoint search using managed properties and PnP search web parts. 00:08-00:24 | Overview of Topics: Daniel outlines the key elements to be covered, including managed properties, PnP search web parts, and the concept of slots, which are crucial for customizing search results. 00:24-00:31 | Purpose of Slots: He explains the importance of slots in displaying information on search cards, setting the stage for the deep dive into the customization process. 00:31-00:39 | Microsoft Loop Inspiration: Daniel shows a screen that doesn’t look like typical SharePoint, revealing a custom template inspired by Microsoft Loop that he developed. 00:39-00:46 | Custom Template Creation: He mentions the requirement to make the template look and feel like Microsoft Loop, highlighting the customization built on top of PnP search web parts. 00:57-01:03 | The “Must Read” Badge: Daniel introduces the “must read” badge, a piece of metadata attached to the site Pages Library, which will be used as an example in the video. 01:03-01:12 | Metadata and Slots: He explains that the “must read” column is a piece of metadata and a placeholder created for using slots in the search customization. 01:22-01:27 | Site Pages Library: Daniel navigates to the site Pages Library to show the additional site column named “must read” that he has added. 01:27-01:34 | Example News Article: He selects a news article to demonstrate the properties of the page, setting up for a deeper look into the customization process. 01:46-01:52 | Custom Property “Must Read”: Daniel shows a custom property labeled “must read” that can be toggled on or off, determining the visibility of a specific badge on the search results. 01:52-01:59 | Visibility Determination: He explains that toggling the “must read” property controls whether the badge appears on the search cards, providing a visual cue for important content. 02:02-02:07 | Mapping to Managed Property: Daniel mentions that the site column is mapped to a managed property, which is essential for customizing search experiences. 02:07-02:15 | Tenant Level Search Schema: He navigates to the tenant level search schema, where managed properties are configured, showing the backend setup required for customization. 02:15-02:24 | Refinable Strings: Daniel introduces refinable strings, which are blank properties available for customization. These strings are crucial for creating tailored search functionalities. 02:24-02:31 | Utilizing Managed Properties: He explains the importance of using managed properties, like refinable strings, to enhance search functionality and provide more relevant search results. 02:31-02:38 | Mapping Refinable String: Daniel shows how the refinable string is mapped to a crawled property named “must read,” linking the custom metadata to the search schema. 02:38-02:46 | Using Refinable String: He explains that the mapped refinable string can now be used in search solutions and web parts, enabling the display of custom metadata in search results. 02:46-02:50 | Returning to Demonstration: Daniel prepares to return to the demonstration to show the practical application of these configurations, setting up for the next part of the tutorial. 02:53-03:00 | Editing the News Card: Daniel begins editing a news card to demonstrate the practical application of slots in the PnP search web parts. 03:00-03:05 | Introduction to Slots: He introduces the concept of slots, explaining that they are a crucial part of the PnP web parts used for customizing search results. 03:05-03:13 | Customizing Layout Slots: Daniel shows the properties of the PnP search results web part, highlighting the layout slots that can be customized. 03:13-03:20 | Importance of Slots: He emphasizes the importance of slots in creating custom layouts, describing them as a mapping between a data source and a placeholder variable in the layout templates. 03:20-03:34 | Slot Definitions: Daniel explains that slot definitions in templates are dynamically replaced by the underlying fields, making the customization process more efficient. 03:34-03:39 | Practical Use of Slots: He illustrates how the “must read” badge uses the slot concept to display custom metadata on the search cards. 03:39-03:52 | Benefits of Using Slots: Daniel discusses the benefits of using slots, such as allowing custom or built-in data sources to work with all templates without needing to refactor them. 03:52-04:07 | Time-Saving Feature: He highlights that slots are a convenient, time-saving feature that makes templates reusable and adaptable to different data sources. 04:07-04:13 | Conclusion of Slot Explanation: Daniel wraps up the explanation of slots, preparing to move on to the next part of the tutorial.

[@MyCopilot-anthonyrhopkins]

04:16-04:21 | Out-of-the-Box and Custom Slots: Daniel explains that there are several slots available out-of-the-box, and users can also define custom slots to meet their specific needs, enhancing the flexibility of the search customization. 04:21-04:29 | Customizing Slots: He demonstrates the customization panel, showing different mappings with slot names and slot fields. This panel allows users to tailor the search results layout by linking data sources to specific placeholders. 04:29-04:37 | Slot Names and Placeholders: Daniel describes how slot names act as placeholders inside templates. For example, the “must read” slot is a placeholder that will display specific metadata in the search results. 04:37-04:50 | Mapping Slots to Managed Properties: He shows how the “must read” slot is mapped to a refinable string managed property. This mapping integrates the custom metadata into the search results, ensuring that the “must read” badge appears where appropriate. 05:01-05:07 | Templates Built with Handlebars: Daniel mentions that the templates are built using Handlebars, a popular templating language. This allows for dynamic content rendering based on the data provided. 05:07-05:13 | Template Availability: He informs viewers that the template will be made available for free on sharepoint.net, allowing them to download and use it to enhance their own SharePoint search results. 05:28-05:32 | Utilizing the Template: Daniel encourages viewers to utilize the template in their search results. This template provides a modern, Loop-inspired look and feel to SharePoint search. 05:32-05:39 | Slot Name in Template: He shows the slot name in the template and explains how it maps to the refinable string. This mapping ensures that the correct data is displayed in the designated slot. 05:39-05:50 | Saving and Displaying Results: Daniel demonstrates that saving the template will display any page or news article with the “must read” property set to yes in the designated slot. This makes it easy to highlight important content. 05:50-06:03 | Central Location for Templates: He explains that the templates are stored in a central location, such as a document library named “search templates.” This central storage makes it easy to manage and update templates. 06:03-06:09 | News Card Structure: Daniel shows the structure of the news card, including the styling, slots, and placeholders used in the template. This structure ensures a consistent and visually appealing presentation of search results. 06:30-06:36 | Viewing the Slot: Daniel opens the template to show what the slot looks like and how it is dynamically filled with content. 06:36-06:41 | Dynamic Content Filling: He scrolls to the bottom of the template, explaining that understanding the code, HTML, or CSS is not necessary because the template is available for use. 06:41-06:50 | Template Elements: Daniel points out various elements in the template, such as the summary, author, and email, which are dynamically populated. 06:50-07:01 | Additional Template Elements: He continues to scroll, highlighting the title and thumbnail, and explains that these placeholders or slots are part of the template. 07:01-07:19 | Conditional Display Logic: Daniel shows a line of code that checks if the “must read” property is set to yes, and if so, displays the “must read” badge. This demonstrates how the slots and placeholders work together to display custom metadata. 07:19-07:28 | Power of Slots: He emphasizes the power of slots in the PnP web parts, allowing for the creation of effective and visually appealing content displays. 07:28-07:42 | Effective Content Displays: Daniel explains that using slots enables the production of highly effective content displays, making the search results more engaging and informative. 07:45-07:53 | Setting Up Managed Properties: Daniel emphasizes the importance of correctly setting up managed properties, refinable strings, and metadata in the backend to create effective templates. 07:53-08:00 | Creating Templates: He explains that with the proper setup, users can create powerful templates using slots in the PnP search web parts. 08:00-08:08 | Power of Slots: Daniel reiterates the power of slots, describing them as mappings between a name and a data source that can be used to display custom templates. 08:08-08:15 | Custom Templates Display: He shows how these mappings can be used to display information on custom templates, enhancing the search experience. 08:15-08:29 | Template Availability: Daniel reminds viewers that the template is available for free on sharepoint.net, encouraging them to use it in their SharePoint sites and search experiences. 08:29-08:36 | Conclusion and Thanks: Daniel concludes the video, thanking viewers for watching and inviting them to join the next episode.

[@MyCopilot-anthonyrhopkins]

In the realm of SharePoint’s search, Where data and design converge, Daniel guides with wisdom clear, Transforming search, year by year. With managed properties set just right, And refinable strings in sight, He crafts a template, sleek and bright, Inspired by Loop, a modern delight. Slots and mappings, a powerful tool, Make search results engaging, cool. “Must read” badges, metadata’s role, Enhance the search, make it whole. From backend setup to final display, Daniel shows the way, day by day. With PnP web parts, the search refined, A better SharePoint, redefined. So grab the template, free to use, Enhance your site, no time to lose. With Daniel’s tips, your search will shine, A modern look, truly divine.

[@MyCopilot-anthonyrhopkins]

In the realm of SharePoint’s search, Where data and design converge, Daniel guides with wisdom clear, Transforming search, year by year. With managed properties set just right, And refinable strings in sight, He crafts a template, sleek and bright, Inspired by Loop, a modern delight. Slots and mappings, a powerful tool, Make search results engaging, cool. “Must read” badges, metadata’s role, Enhance the search, make it whole. From backend setup to final display, Daniel shows the way, day by day. With PnP web parts, the search refined, A better SharePoint, redefined. So grab the template, free to use, Enhance your site, no time to lose. With Daniel’s tips, your search will shine, A modern look, truly divine.

[@cvkealey]

I've been working with the PnP Modern Search for over a year and still find it extremely frustrating. It seems like a constant process of trying to trick the web parts into working. One small detail that I *think* you're saying (which I've not found anywhere else) is that every field one wants to include in the display template MUST be connected to a managed property. Is that correct? So, each list/site column needs to be mapped to a "refinablestring##" (or "refinable") managed property not only to filter/refine on that data, but also to show it in the results. Is that correct?

[@DanielAndersonAU]

Yes you need to map to a managed property for it to show up in search results.

[@KasperBoLarsen]

​@@DanielAndersonAUWell, technically no, YOU don't have to map anything IF the columns you are using are created as site columns. In that case the search engine will create both a crawled and a managed property, and you can use the managed property as it is. If you want to use the column as a refiner, then you must map the crawled property to a RefinableString/Date/Int. That is a basic requirement for search and is not a requirement imposed by PnP Modern search

[@KasperBoLarsen]

Sorry Daniel, I know you know, it was an answer to OP