SharePoint PnP Modern Search - FULL Walkthrough Series

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 P&P 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 could Custom Tailor this series this free set of web Parts is what you need to be using and let me show you why B&P 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 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 P&P modern search web Parts on to a site collection you can go into edit mode and type in P&P 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 P&P 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 there they're going to end up being variables that are used in the templates that you use to render your surger 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 uh 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 uh but you could do anything in here we can put an aster 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 uh the SharePoint results the main uh index for 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 duplicat 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 aster 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 a 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 fill right in 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 uh and this is The Handlebar markup that you see mostly HTML but you will see some handlebar Expressions 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 uh what this will do is if you have different ways you want to display data maybe depending on the cont 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 uh it's a function to get the user email address based on what was stored in the template slot but I could copy this entire [Music] thing and convert this into a [Music] 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 hyperlink 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 was 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 uh 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 uh and people directories are very common to have on intranets so if you have a developed one uh 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 to 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 mirium 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 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 P&P search box so not a lot of properties on this at all you could add a placeholder like enter 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 for now I don't need to do anything I'm just going to leave that turned off and now I 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 P&P 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 as right there but what I also need to go back and do is is I need to change this query to actually use the search Box's query just because the search box is connected to this web part 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 P&P modern search that we could use here but the one that represents the search Box's 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' 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 internet 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 can 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 could 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 could do that if you wanted to edit this and add in uh 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 manage 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 from my own experience when I say that custom handlebar templates can do a lot so I would recommend getting a little comfortable with those things because P&P 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 welcome back everyone in this video we're going to be adding the final P&P modern search web parts to our solution those would be the filters web part and the vertical web part I'm going to show you how to configure them and how they work I'm also going to show you some tricks with the vertical web part that you may not know about so let's get into it so we've got a basic people directory that we're building out uh right now I've just got a search box using P&P modern search and then the search results from the same uh P&P modern search if I search for a name like Adele then it will filter the list and and just return her or whoever whoever else also shares that name what we'd like to add to build this out a little bit more is some filters uh so I think a filter for the Department would be good uh because if you're going to have a lot of people in the organization maybe you want to um to bring people back that way so let's add a filter in here I'm going to edit the page and the filter I think should be on the left side so I'm going to edit this section We'll add a column to the left and then move these over to give us some room over here on the left so we will add uh P&P search filters so we'll add this in here and well now we're going to have to configure this for what manage properties we want to filter by or what manage properties we want to offer to the the user to filter in this case it's going to be department so we can click on configure or just hit the pencil icon and what we'll need to do is first tell it what search results to get the data from because we're going to be doing what's called refining there's two different ways you could filter using this web part you can add refiners which means that it's going to look at the data being returned and use that data to populate the list of departments for instance that is dependent on the search results to kind of feed it with the the possible values that a user can select the other way you could filter is what's called a filter and what that really means is you're going to have to tell it what values are going to be possible it does add more maintenance because if you add a new Department someone would have to manually add that value refiners work in my opinion much better because they're maintenance free really so to add the filter we've got it connected to the search results so it can start to fetch that data and we're going to customize the filters even though it's a refiner in this case for display name We'll add department now we need to tell it what Manage Property we want to add I verified what Manage Property I need to use by going into the search admin Center and in the search schema looking to see what was matched to the people colon Department called property here this is already matched to a managed property called department and I see that refine is enabled on that so this is what we could use as our refiner we need to make sure that that data is even being returned from this search result so we need to edit this we need to look at our selected properties and make sure we're actually returning that department field and we are department is checked so we are returning the value from this so over on the search filters we should just be able to hit this drop down list and find Department there it is and and I'll type this back in for the number of values to display we're just going to skip this we're going to display everything thing uh for the template uh option we're going to use checkboxes that way if somebody wants to do a search and filter by multiple departments uh then they can do that the other options are you know date range so if you're if you're searching for dates you have a date range or a date interval which might be 2 months ago 6 months ago that type of uh interval or a combo box so if you just wanted to allow one selection uh just to filter by one Department only then you could use the combo box otherwise if you want to allow multiple selections checkbox is the better one uh I will pick expand by default so it'll show all of the values possible uh without have someone having to you expand out an accordion slider I guess is what it would be uh we can show the count so it will show the number of people in each of those departments that are in the search results and you'll see what that looks like once we're done here for now I think that's good we will click add and save and then for the available layout it's on the leftand column I think a vertical layout looks good for this there is an option to have a slide out panel which is kind of slick looking but for this type of purpose I don't think it would be appropriate feel free to try out the panel and see what you think of it though it does have some uses uh and that's really it but now we do have to do one other thing if you remember when we added the search box we had to go into uh this third page here and connect it to uh filters so we have to turn on filters and then connect it to the filters web part and what that will do is allow the search results web part to get the value from search filters so there's kind of two-way communication going on there so both web s do have to be aware of the other so we will republish this and we see already we see all the different departments that are assigned to users there could be other departments here but unless they're assigned to a user and present in the current search results then they will not show up here so for instance if we search for Adele again you will see that all of the other values have gone away and now only retail is available because Adele is in the retail department and we searched for her so she's the only search result therefore the only Department that the filters web part is now aware of is retail if we clear out this we will see all the Departments again because of the diversity of all the users that are brought back into search results so we have we have options here you know you can select a department it will automatically filter notice we did not have to update the search query similar to how we did with the search box we don't have to update the query in the search results web part for what value we don't have to tell it that we're searching Department any of that all of that hookup is just automatic with with these uh as a result of us kind of connecting each web part to each other so that is very nice easy functionality to add to this and one thing to note about the filters was um even though we did did pick a combo box or checkbox sorry even though we did pick a check boox uh for this particular field it is still only allowing a single value if we put the check in multivalue then it will let us select multiple and also give us an aulan option for how we want to combine those so in this case someone's only going to be a member of One department so it doesn't make much sense to do an and but let's see what happens if we do an or with multiple values so let's republish this and you'll see up here uh we we do have an option um it's showing that the multiple selection is in or mode so if I pick engineering and finance and I could even pick manufacturing so I could pick you know multiple obviously and hit apply it'll filter the list by those three then I can take one off take another off just show engineering so this is really neat I think I kind of like this approach with a people directory so I'm going to leave this as is just to give a little bit more power to the users because I'm not sure if they would want to see everyone in you know finance and Engineering or or something like that so just to give them a little bit more of an option and I think it's very clear to them how they would operate this how you know how they would interact with this so we'll leave it a little bit more complex than the that original design just for added value now that a refiner is working let's add one more thing the final component to the P&P modern search web Parts which is the verticals web part uh the verticals are going to work in a similar way to to filters or refiners except it's mostly to filter different types of data maybe if you had web search results people results things like that different distinct types of data you could filter that way but I like to use it in a similar way to the refiners but for larger types of filters in this type of use case I like to use it for something like office location where you may have offices in different countries maybe different states and you want a quick way to automatically pull that page up and already have certain filters applied so let's go through that and you'll see what I mean so in edit mode we are going to add the P&P search verticals ENT the properties we'll see an option to configure our verticals so what this is going to do is put tabs across the top of the page and each of these tabs in this case is going to represent an office location so when someone clicks on the tab it'll filter based on office location similar to how it will with the refiners but there's a little extra functionality that I like for this to start We'll add in Berlin as the first office and we're going to set the tab value equal to to what the data actually looks like when it's added to a user in this case it is just the word Berlin but if you had a different value here uh maybe an office location number or something like that then you could put that there and still display Berlin to users and we'll add we let a catch all we'll just have a default tab here for everything make that the first one that shows up so we'll add these two first so you can see what it does so we've got this now we need to tell the search results web part that we are using verticals so I will turn on the verticals and connect it to our verticals web part there is an option here to display the data only when uh the particular ver vertical is selected which is a really neat thing to do because in case you've got multiple search result web Parts on the page and you but one is one is searching people uh and so it has a certain template apply and they're searching a different type of data and uh you want to keep everything nice and separated you could just show the one search result web part that applies to that vertical which is a nice way of doing that in this case we just have the one type of data we're we're searching which is people results so we don't need to implement that but what we do need to do is update our query template because this will not filter it uh automatically like it does with the filters web part so what we need to do is add an additional part here so that we could search on the office location and what we'll do that is this right here so our manag property uh that we're searching and I found that here uh I looked in the search schema for the crawled property sps-t to base office location uh in my tenant it probably is the same in your tenant as well but you want to double check that so that you're making sure you use the correct manag property in this case base office location so we are adding to our search query base office location and then we have this token um now remember the the other token we are using is input query text and that is the value in the search box here so vertical. value is going to give us the value that we selected up here you can also get the name of the tab in here but that doesn't really help us that much I'd rather just get the the value even though it is the same thing for the Berlin tab for the all tab we want to actually use an asterisk so it's any value so we're going to use vertical. value to get the value behind the scenes of the tabs and that'll automatically get put into our search query to filter on base office location so let's apply this and publish the page and see how this looks so we see all of our users when we're on the all Tab and if I go to the Berlin tab we just see the three users that are in Berlin so that is working well let me add the rest of these values in here and I'll speed this [Music] up okay all of our values are in here and let's test the page again yeah great everything is looking fantastic on this now and now let me show you why the verticals have a a really neat place in this type of a solution so you'll notice here on the properties panel you could use a query string parameter to select a vertical tab by default what this means is that if I copy this URL we come over to this new [Music] tab and we say V equals and then a value let's say London and if we go to this URL you notice how it automatically selects the London tab so what you could do with this is if each office location has their own Hub in SharePoint so they've got their own set of Mega menu items that type of thing or even if they don't and that London office wants a quick way to go to the people directory and search for their own people you could use that URL parameter trick to use one people directory for all of the offices and it will always be catered to their location first they can still go back to the all tab but if they want to go straight to the Paris users there's an easy way to do that with just a simple URL parameter if you're excited about trying this out click that like button or let me know down in the comments below that this is something that you want to try out in your environment these people directories are very very common to see if you don't have one you could certainly use one in the next video what we're going to start doing is customizing this template all we've done really so far is add an email address on here but it still doesn't look all that great so we're going to start customizing the output of these search results and make this look even better so don't miss that and if you're like me and you're doing more and more with SharePoint search and you're trying to understand more of what's going on look at this video right here that starts to walk you through the whole process of how SharePoint search works and how you could start to configure it thanks for watching subscribe to the channel for more content like this in this video we're covering P&P modern search handlebar templates we're customizing The Handlebar template to improve the output add functionality and make this thing look amazing and if you thought handlebar templates were just too complex to bother with with trust me you can do this let me walk you through the process and before you know it you'll be creating custom layouts on all of your Solutions last time we met we set up the P&P search filters and the search verticals got them all working with our search results so that we could filter by different means now we're going to turn our attention to the PMP search results web part itself and start making this template look better we're going to do this in stages because one of the changes we make is going to convert this from a standard out ofthe boox people layout to a completely custom template removing the options in other places so the first thing I want to do is I want to add the department into this people card so that we can see what department each person is in now to do that first I'm going to double check in the search admin Center to make sure I know which field I need to grab it's going to be people call and Department which is mapped over to a field called department check your tenant but it's probably going to be the same thing so the first thing we need to do is we're going to go to layout slots and we're going to make sure that we add a slot for this because department is not automatically pulled [Music] in okay so now we've got Department mapped as a layout slot and we can pick that in our template next we're going to go into the people layout fields and we're going to put this into the tertiary text where currently our email address is I'm just going to grab the username handlebar expression so I can just replace it here and then just change user display name to [Music] department and that should get our department displaying there we go so now that we've got rid of email we need to wait for users to contact these people that's when we're going to use the next line the fourth line now the fourth line doesn't even show on this layout unless you're in extra large so here you can see that it's already mapped to the phone number first let's get rid of the phone number and start putting in more useful things so we'll start by adding the email address back in but we'll do it on this fourth line the optional text line so we'll put a check in handlebars expression so we can put in some handlebar markup and we'll add in a hyperlink so that someone can send an [Music] [Music] email and I think that will do it let's save and take a look okay so now we've got the email address back in there on the fourth line but we want to make this a little bit better so let's change the text that's showing to something that's frankly a bit cooler so let's go back into the editor and the text is going to be this last part of the HTML if you're not familiar with it and we can replace all that with an icon reference which is going to be this now this is referencing a fluent UI icon and to be able to display this we're using one of the built-in helpers for PMP modern search which is P&P icon so this will let us display a fluent UI icon so let's hit save here and see how it looks so now we've got an envelope icon down here this is already looking better than just that plain hyperlink email address that used to be here but we want to do more with this uh email address is great but how about a link to call somebody how about a link to send them a teams message I think those would be really cool to be on here too so let's add those so we're going to go back into the people fields and we'll edit this and we'll start adding our next hyperlink at the beginning of this so next we'll do a teams message so let's start adding that give myself some room and now there's a special hyperlink you can use to tell teams you want to send a message to them and this is how it begins right here so if you start a message with this and then you have the email address come right afterwards so let's add in the email address that should be the hyperlink we need to send a teams message and for the icon for this we'll use another one of the those icons from fluent UI which is a free library by the way and for this icon we'll use the message icon let's save this and see how it looks all right that is showing up they are stacked on top of each other but we will get some CSS styling in here when we're done and I'll show you that for the third action for these people let's add a phone so that someone can click on it and initiate a teams call so let's go back in here and add that and for teams calling what you can do is do a call to action instead of the te which is more the old school method that you may have seen before the call to will let you use teams so that's that's something that only teams will pick up I think Skype doeses as well but we'll do the call to and we'll pass in the email address and for this icon we'll use the phone icon so all three of those are in here let's see how it looks and we've got got all three so we've got all three icons but they're not looking that great we need a little CSS styling and if you haven't found a CSS option inside P&P search results that's because there's not one here's how we can add some CSS to this though we can go right into the template and you even already see a style tag in here we could just add some Styles in here to make this icon look better easy enough right well here's the catch right now it shows that we're using a people layout and that gives us this really handy option to manage the fields that are showing up as soon as we edit this results template it's going to change it to a custom layout what a custom layout means is we're no longer going to have this button so we want to make sure we have all the fields that we want added before we make that switch now we'll still be able to add stuff and change things around we just want to have this button here to help us so let's go and add in our styling and you'll see what that process looks like so I've already worked out these style rules in my browser if you need to work out something just open up developer tools and start playing around with the CSS to figure out what classes you need and go from there but let's see how this looks that looks much much better we increased the size added some spacing made sure that they're all on one line This is looking sharp let's publish this and see how it [Music] works all right so the calling [Music] works and the teams message Works although it did just take us out of the SharePoint page so we can change that with a little tweak let's go back into [Music] SharePoint and you notice like I said it switches over to custom and we don't have a lot of those options that we had down below and if you check the results template we don't have those four custom fields that we've added so where are they well they're actually over here on this fourth page if you remember in the previous video I said that this screen is going to be very handy this is one of those times so if we scroll down and they don't make it easy because we can't really enlarge this screen but you will see right here near the top here are those fields so what we need to do is change the messaging link there it is and we need to make sure it opens up in a new window so what we need to add to this is Target equals blank this will cause that hyperlink to open up in a new tab which means we're not kicking the user off of the site they were previously on but now there's one thing to notice if you look over here there's a back slash in front of these quotes so that means that these quotes are escaped in this window so we're going to need to go back to here and make sure we escape those quotes as well otherwise when we hit apply it's not going to close this window all right so those changes are saved and let's try it out there's the new tab and there's our instant message window so that's working great too and lastly there's the email link so let's try that out and see if works and there it is it's already addressed Patty so these three links are all finished also notice that we went from having one user spanning the entire width of the display to now it's two columns and that was just done with CSS now if we even look at this in a wider column it works there as well so you have a lot of options here for how you want to style this thing and what you want to do with it making it completely unique and how your user would best want to see that information P&P modern search is definitely a very cool set of web Parts I highly recommend you start using it if you haven't already because it's going to transform your solutions from looking like basic out of the box SharePoint to truly custom Solutions if you like me you're always trying to learn new tricks new tips to level up your SharePoint gain if that sounds like you then check out this video to continue your SharePoint knowledge Journey thanks for watching subscribe to the channel for more content like this

Channel: Steve Corey - MVP

Views: 6,744

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: phntODsg7jQ

Length: 42min 6sec (2526 seconds)

Published: Mon Nov 13 2023