Expert SharePoint Admins Use PnP Modern Search. Here's Why You Should Too.

the Swiss army knife of SharePoint search this is the thing you've missed the most about SharePoint classic if you've never used this product before your skill set is about to Skyrocket by request this new series is on PNP modern search there's so much to this product that I know you're going to love it if you've used this before let me know down in the comments below are you a new user to this have you ever seen it before are you experienced let me know so I can Custom Tailor this series this free set of web Parts is what you need to be using and let me show you why PNP modern search is a set of web parts that you could use to develop Solutions inside SharePoint they consist of four different components being free you could just go download them right now and add them into your tenant in the SharePoint app catalog and then either tenant deploy them so it's available everywhere or deploy it on site collections as needed which is what I typically will do there's a tremendous amount of features available in these web parts and it serves as a really good modern version of the old SharePoint classic web parts that people used to use and issue search queries and and format the results and build search-based solutions that way for this example I'm going to build out a basic people directory I think we'll add some things as we go throughout the videos in this series once you've added the PNP modern search web Parts onto a site collection you can go into edit mode and type in PNP and you'll see all the available options here there's a search box search filters search results and then verticals I've shown all four of these in a previous video showing off the power of content types the main one that you'll use the most is PNP search results so let's click on this and if we click the pencil icon you'll see immediately that you've got two different methods that you can search with this web part one through SharePoint search the other through Microsoft search for this example let's use SharePoint search now there's a lot of options here let me quickly go through some of the major things that this has going for it first are layout slots and this is one of the more confusing things in my opinion of this web part but the way this thing works is that you'll use these layout slots and Define slots just basically they're going to end up being variables that are used in the templates that you use to render your search results more on that later what this really lets you do is you could create a name like title these are all the default ones and you'll connect this to a particular managed property is what you're doing here so later on in the templates this is going to be more important but for now we're connecting this web part to our managed properties the options that you see here that you could select from are available further down on this tab next you're going to see the SharePoint search query so what query are we going to send to SharePoint search it could be anything in here you could type in path statements and you know the the specific location of the data you're trying to query by default it's just set to search terms but you could do anything in here we can put an asterisk and hit apply and it's just going to search everything setting it back to search terms next is the result source so this is the these are the result sources in SharePoint search admin that let you pick things like if you want to search the SharePoint result the main index for SharePoint if you want to search the people results and maybe you want to build a people directory well for this I'm going to be picking the local people results so I can pull back a list of all the users in the system but you've got a lot of options here next are the selected properties so this determines what managed properties are going to be pulled back from search this is what's used to determine what you can map to the slots back up above but in here you'll see all the managed properties so you pick whichever one that you would like to pull back with your search results sort settings so you can Define what you want to sort on and then some more advanced things like trimming duplicates audience targeting localization that sort of thing and paging there's paging built into this which is great and if you're getting value from this video don't forget to click that like button and subscribe to the channel to stay up to date with all the new videos coming out the only real change I need to make on here is I want to change the search query to an asterisk because I just want to show all the people in the organization so we'll go down to next on this screen and on the second page you're selecting what kind of layout do you want on the screen do you want it in card layout which looks like is the default details layout so it's more like a SharePoint list a carousel is even here so a lot of options here you have uh debug templates which are great if you want to see what the data is that's being returned this comes in handy a lot for people who develop custom templates and this uses handlebars as the templating engine so if you're familiar with that you'll feel right at home also one of the newer features that I've noticed is that you could do adaptive cards in here now as well and those are one of the hottest Technologies going on right now in the Microsoft 365 world but let's go back to The Handlebar templates and we'll just pick a people layout so this is just one of the automatic layouts that comes right out of the box ready to use and you can see it's showing our list of people we've got the pager down at the bottom now looking further down this screen what we can do is we can edit this template so we can make changes and this is The Handlebar markup that you see mostly HTML but you will see some handlebar Express here in double curly braces very simple to get up to speed with as well I like handlebar templates a lot one thing you'll notice in this template is that if you look at where the data is coming from you will see that it's referencing those slots those layout slots so if I wanted to use this and change what properties are being displayed on the screen I don't necessarily have to go change this template at all I can remap the layout slots on a per web part basis and this will just work so you have fewer copies of the same template floating around which is a really nice thing but we're going to change this a different way I'm going to hit cancel here let's look down through the rest of this there's an edit result types what this will do is if you have different ways you want to display data maybe depending on the content type you can change what template is being used to render this here's what we want to show you can manage the people fields and a lot of those uh built-in layouts at the top of the screen already have different things you can do here like managing the columns that are displayed in the list layout in this case we can manage the people Fields if we open this up we'll see the different pieces of data that are displayed in the people layout now if you notice we're showing email addresses here but there's no hyperlinks there you can't click on it which isn't really the best user experience what we can do is go in here and find where the email address is specified in the template and I can click this pencil icon and simply change this expression which really just gets it's a function to get the user email address based on what was stored in the template slot I could copy this entire thing and convert this into a hyperlink and something didn't work right let's go back and see what this is oh I didn't add the ending quote that's better now our our email addresses are hyperlinked and if I click on it it will definitely pop up a new email window so that was an easy change to tweak this layout without having to even learn handlebar templates all I had to do is know a little bit of HTML for that we could show the Persona card on the hover well if we turn this on and hover over someone we get to see this cool card here so that is nice easy functionality you just turn on with a radio button so I like that we can also change the size these people cards so let's publish this thing and take a look at what it looks like so this is a very slick interface and people directories are very common to have on intranets so if you haven't developed one this this is going to get you half the way there right off the bat let's look at some of the other options on these on this property screen so the next thing is you can connect it to additional web parts and uh you see here options for an input query text what that really means is the search box we are definitely going to be adding that but you also see options for filters verticals and connecting it to another search result web part which would really let you do cascading search results maybe you select Miriam Graham and there'll be another web part below this that would filter based off of you selecting Miriam so maybe it would show the people that report to Miriam and you may be thinking well how are you going to select a search result well if you come right over here to allow item selection now you've got radio buttons you can select them you could probably see how this is adding a lot of functionality without custom code without knowing templates even so let's turn this off what I think would be really nice to have is a search box so that we could search for these people instead of just displaying all of them so we'll just add another web part and this time I'm going to pick the PNP search box so not a lot of properties on this at all you could add a placeholder like enter Shin's name this does allow query suggestions so especially for search results that could help users a lot Dynamic data source so you could actually set the value of that search box to to be something maybe in the URL in the query string or you can pull it from search results in the case of the Miriam example we used but now I don't need to do anything I'm just going to leave that turned off and now we need to go back to the search results because this needs to start looking at that search box so I'm going to go back over here I'm going to turn on and put query text and for this I'm going to use a dynamic value because it's going to come from another web part and you see here it's got the PNP search box so we're going to click that and tell it to use the search query and we'll just set a default value in case nothing is entered in we'll just show everyone so I will enter an asterisk right there but what I also need to go back and do is I need to change this query to actually use the search boxes query just because the search box is connected to this Web Bar doesn't mean it's going to immediately use that query and we still have to tell it to because that search box could be connected for some other reason there's a number of different tokens that you'll find in the documentation on PNP modern search that we could use here but the one that represents the search boxes query is input query text so this will automatically get replaced and sent to SharePoint search anytime someone changes the search box so we'll hit apply here what we could also do is reset the query if someone clears out what they've typed in there so that we can reset this back to showing everyone so let's republish this and we can test it out let's search for Lydia and there it is and let's clear the form back out now it shows everyone again so just like that we've developed a basic people directory or people finder depending on how it's implemented maybe this thing sits over in the right hand gutter of of your Intranet and just allows people to search for users and obviously we could add a number of different fields to this output we could add the person's Department we could add pretty much anything we want to do as long as it's in their SharePoint user profile one of my favorite tricks to do with these web Parts is you could cut you could edit this and you go all the way back to the last page on here and you can Import and Export settings what this lets you do is you can copy all of the settings that you put into there the slots the selected properties all of that stuff and you can copy it in and out of this so if you wanted to copy this and reproduce this on another page you can do that if you wanted to edit this and add in some additional selected properties you could do it right from this screen actually and just add another comma in here and add in your next field and it's very simple and sometimes more convenient if you've already got a list in notepad for instance and you just want to stick that in here to add in those managed properties so importing and exporting is very beneficial through this last tab there is an extensibility framework with this as well so if you're a developer of SharePoint framework web parts and extensions you could extend this library to add additional things to it as well assuming there's something that you need that can't be accomplished with custom handlebars or adaptive cards and I could speak for my own experience when I say the custom handlebar templates can do a lot so I would recommend getting a little comfortable with those things because PNP modern search is an extremely powerful set of web parts and you really ought to give them a try in the next video we're going to add filters to this and make this a much more powerful interface in the meantime check out this video where I'm using all four of these PNP search web parts to build out a full solution and demonstrate the power of content types thanks for watching don't forget to click that like button and subscribe to the channel for more content like this

Channel: Steve Corey - MVP

Views: 8,725

Keywords: sharepoint modern search, sharepoint modern seach, sharepoint modern search web part, sharepoint modern search box web part, sharepoint modern search refiners, sharepoint modern search customization, sharepoint pnp modern search, search web part sharepoint online modern, sharepoint modern seach web part, sharepoint modern seach box web part, sharepoint modern seach refiners, sharepoint modern seach customization, pnp modern search v4, pnp modern search v3

Id: -1rL7VLB32o

Length: 15min 23sec (923 seconds)

Published: Sun Apr 30 2023