Microsoft 365 Community SharePoint, 5 Mar 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Webcast - SharePoint Framework Modern Search Web Part

Description

In this PnP Webcast, we cover a community built custom web part solution, which provides similar capabilities as the classic search results web part with custom templates and web part to web part connections.

This web part solution sample is available as an open-source solution from GitHub at following location - https://github.com/SharePoint/sp-dev-solutions/tree/master/solutions/ModernSearch

More details on the SharePoint dev community from http://aka.ms/sppnp.

A

So welcome everybody. This is SharePoint patterson practices, the webcast and this time we're covering something insanely cool. So an insanely cool stuff which is available for anybody today take advantage from the PNP repositories contributed by the community, which is the SharePoint framework. Modern shape, assert web part, and this is really really really really cool functionality which has been built by numerous persons and there's this multiple persons contributing that. But the main developers of this one has been absolutely Frank, corny and then tear out has added a really cool capabilities on the web part as well.

A

My name is Erin and I'm a senior program manager from SharePoint engineering, but I will not be actually presenting on this one. So I will let Frank and Terrell to actually do the real presentation, so we'll get the information for in the right way. But let's do a quick intros in here. So let's start first from you Frank. So who are you and what's your role in the in the web part.

B

Because it's my own company based in Canada Montreal and this solution with sterile yep.

A

And Frank a lot on other other kids up at the other rip other samples as well in the in the PMP site, but now tear out what about you. So who are you yes,.

C

Thank you, I am I, am obviously to fight developer and I work in puzzle, part in Norway and I've been using PMP webparts for a long time now and was found the time for me to start contributing myself so I've been contributing some extra functionality to the search social finance, red-pawed.

A

Excellent, thank you, tear out and and and it's actually cute to see how the the nowadays, the technology also works in a way that we were. Obviously people have contributed, even though people are working from Canada and Norway and whatever so it doesn't matter. It's brilliant technology and now, let's actually deep drive on the web part itself and I'll. Let Frank actually take it away, doing the introductions and let me know, because I'm explaining all the video Watchers as well I'm the person who's clicking the the presentation so Frank.

A

Let me know when we move forward on the slides, yeah.

B

Sure so a quick introduction and I will start with simple questions of why this webpart and I will ask this question by another question. So do you miss the old content? So, apart from the on premise, one? That would be a good summary of why these web parts- so you may see in this web part as another name as modern ways, but on such web part, you will see reacted, search refiners. So this is basically the the same.

B

The main goal of this Web part is to fill the gap regarding the search capabilities in the modern UI. So actually we have some limitation right now with the with this search in the middle on UI. So there is no way to create a custom search Center like before. So you can.

B

You can't add your own search box, your search, wizard web part and your refiners and customize like according new requirements, so it can be very difficult for this specific use case and about the components you have only the highlighted content web part, which is quite limited for advanced in I/o. So you can choose for multiple sources and select your fields and so on. Then you don't have a fine control, variable sub square e or the way the results are displayed.

B

Even if you have some built in that's a displacement you can say: I want this metadata here. I want this title in bold and so on. So the main goals and objectives for these reports is to provide the way to customize the search experience in the modern UI. So the original ID was taken from the been taken from the real content query web part, which is another another report using templating features, and we producing the content. Query web part from the on premise world.

B

So the modern search way part it's basically the same concept as the contents of a part, the old contents of a part and as a theory, components because we've the modern search. Well, actually, you have not only one web Portsmith, but two. You have the search box and a search results. Web part which are independent issue, so main goal is to fill the gap like I said for search based component, the modal UI, and it has to be super generics and flexible. I use this webpart for my customers, projects and the the many requirements.

B

It's always the same things. The the requirement is about how I can displays results in the way I want I want to configure the query. According my information architecture, but the the technical part is always the same. So first of all, I don't want to even do it every time so I built it's a web part super flexible and super generic and for end users it has to be very friendly, so they don't have to to know about about the search, but they can they can do a customization very easily.

B

So this is the main goals and objective for this this web part. So let's go through the the available features to be.

A

Before we got there actually just Frank, are we reiterating what we were saying so and that's a really important point as well, because this way part is is highly customizable or configurable? Let's put it this way, not customizable configurable, it's right turn to use and you can actually define the temp out good templates and and the gif animation is awesome because it actually presents how you can modify the templates and, and that is really in the classic SharePoint that we were using then XSLT to make that happen. What are we using with this web part?

A

How does it actually work from a defining a template, yeah.

B

So it's like the old display templates mechanism, so we use an HTML Javascript templating engine which is handlebars and the bus. Sorry, so for an end user perspective, it's yes to know the this language HTML and CSS to perform some basic action. Let's say at the field for result, items or, let's add a meta data, and so on. So it's selected all these play templates mechanism.

A

Yeah absolutely Maxim's cool now and available features. You mentioned that quite a few interesting capabilities, which is out of the box capabilities, does not yet at least yet hub right. Anything one of the other two box web part does not have all of the K all of these capabilities, at least yet. So anything what you want to really pinpoint from the list of things. Yes,.

B

First of all, there is the search query configuration so like I said you can fine-tune your query. So select the keywords. The query template the selected fields you want. So if you know the keyword query language, this is this, is you can configure configure your query?

B

You can also connect the source box and multiple search results, so you can build complete search center within your page. You have also like we said the templating feature. So basically the built-in feature use Android bars to create some basic HTML, CSS templates. You can use also external files. If you don't want to embed you, Tom Paine, with Tom place directly in the components you have a built-in previews for of his documents and 5065 videos, not streaming of Microsoft's doing but office uses five videos.

B

We have also a result, type features to select a specific template for a condition. Let's say you want a template for yeah for Word documents. You can can do something like that. You ever saw the refiners supports with multilingual values. You can add refiners or according to your requirement or with sauce options and and cool options like Beijing, zuv or business supports, so a lot of built-in features, so it only requires configuration either in your web part directly on in your shopping tenant, but you have also adult features.

B

So these features are they require additional development, but they are supported within the web parts. The first is the search query enhancements using NLP tools so to recognize some entities inside your query and apply or modify the query input for the search with those web parts and the other one is the custom order renderer. So this feature was made bad towers. Turret I will let you explain the goal of this feature.

C

Okay, thank you, so the main goal, or the main problem I saw with handlebars, even though it's really powerful is that you can't really hook into JavaScript events.

C

So we thought of a way to hook in custom-built, SharePoint framework components and let them receive the data from the social finest web part and display them on a node in the view or on a HTML node. So what this means is that developers can use or create and as perfect web part and hook into the methods they need to hook into and then get the data and display them in the way they prefer and also who came to Yahveh script events and, for example, used. Obviously a fabric react library if they prefer that.

C

So it's a little bit easier to get like this generic generic Microsoft year as well, yep.

A

Absolutely really cool stuff and the dose would be the customer interest would be the ones which you then creating a customer case or based on a deployment. Fine, that's how it works. Yeah.

B

We cover the case when you are pretty pretty limited with underbust on place. If you want to inject dynamic features, let's say to enter a clique or something it's better to use customer and the rest for this, because in are you yeah.

A

Absolutely absolutely makes sense and we'll see all of this in in practice quite now quickly still before we go to the demo. So where do we actually get this and and what are the learnings around the web part? Yes,.

B

It is available through the PNP repository the SP dev solution repository. So this is not a specific sample. Is the solution so so go to the s/pdif solution repository and some things that are good to know. This is designed specifically for shop and online, so you can't use it or you have to modify it to use it for unpromising the latest, a fix, 1.7.1 version, and even if you don't use this webpart directly for your search. So now you can. You can just see the code because it also showcases multiple aesthetics concepts and patterns.

B

I think about especially the dynamic data and the connection between multiple web parts and also dynamic loading and performance, optimization that you can see in this web part and if you want to add some features or fix some burrs pull requests are very welcome on this project.

B

Finally, if you have some issues or question with this solution, go to the issue list and the s/pdif solution with auditoria and mention either meal Terral door Michael, and we wouldn't show your question as that: yeah.

A

Chance has to clarify papa is Michael's Vincent work as well, so I never understood. Why he's using Papa as his his alias but hey? That's everybody can choose their own, alias! That's fine, now, really cool stuff and let you see the wet part in practice. So let's go to the actual demo and see how this web part actually works after.

B

I did this simple solution to your site? You know able to add these reports on your page here. I've created an empty page from a communication site and I will show you the first use case in I/o for this web part, which is the static query. Configuration to display static sets of results with a new page. So to do that, I will grab these search results web part and configure a base query so on the first page of the property pane.

B

The first option for me is to configure a base query so here I can configure I can enter either full text terms. Like give me all the documents containing SharePoint with the content or title or I can request a specific property here or I can request for all the contents, using the specific character here, the special character in so in this box, you will have to use the keyword, query language, syntax of some point to define your base query on the next page.

B

You can define your query more precisely so for those who are familiar with such API. This is basically the same options. You are here so the first one is the query template the query. Templates is used to add some terms or values to your base. Query. So the first token the search terms is basically replaced by the base. Query terms, so in this case this- and you can use some out-of-the-box tokens like sides or if I want to request on a specific scope. It's a collection. Okay I can use, for instance, the site collection token.

B

So this webpart supports all several tokens, Auto debauch tokens, but we've defined also additional tokens for more advanced scenario. So to demonstrate this capability, let's say: I want to filter this set of resource based on on specific page property. So in this, given page define a taxonomy value with specific terms, so here it's of SV, 65 and I want to filter this set of results according to this value.

B

So to do this, I can use a special token, which is the page token, so that the internal name of the column I want to use here it's volume and because it's the taxonomy value I can choose. I can choose to use the level of this in : or either the the table ID and, as you can see, the result is filter accounting, my page value.

B

It means if I change the value here, for let's say a point and I say: if I go back here, the results are displayed according to this value, so this is for the curvy template to get all the tokens supported by this webpart. You can go on the readme file within the repository, the github repository, and you will see all the supported, out-of-the-box tokens and, like I, showed you the page token and so on.

B

So this is for the query. Template now we're gonna talk the result source parameter. So in this way pal you are able to use specific result source like the old content such web part, and to do this I will create a new is also within the site, so you can use results, we'll define in the site or in the tenant. It doesn't really matter so to do this, I will create new one.

B

Let's say: I want office, 365 documents talking about 365, so we configure very basic where we with documents with 55 in the title, save.

B

And to interact with the web part, we have to get the idea of the weather sauce so to get it just. Click on the newly created result, source and in the URL use this specific ID and put it in the text box here and, as you can see, the query defined in my vessel sauce applies here.

B

So this is for the red sauce identifier. The next option is the initial sort order, so this option by default sort these results by specific value. So here is the created date and the size. So here you can choose to use your own values and the direction you want to use so ascending descending or to use to not use the any any sort order.

B

So you have to make sure if you use some values here, you have to make sure this manage. Poverty here is suitable is configured as suitable within the search schema.

B

So the next option is also sort option, only more targeted to end user within the UI. So in this option, I'm able to specify like before, like the previous option, a manage property here. So let's say I want to use the I want to sort my result on the modified date.

B

Here is the friendly name displayed in the UI, so the modified date here and if I specify some field here, you will see a new, a new control here in the UI. Allow you to sorts the result dynamically. So you have the ascending and descending option for the soft order, and you can also add multiple here and it will appear in this combo box here, the with this option. The sword is applied on what field at the time, so so I'll be careful of this.

B

The next option of the web part is the ability to support wearables, so quibbles with pebbles. You are involved basically to change the query dynamically based on certain keywords or to promote some links to some links, according to certain keywords, so to demonstrate that I've created in my site settings some query rules.

B

So for the defaults shop ones, source I have created a career wall Hill to display some promoted wizards to display some links based on specific keywords. So here for the 365 keyword and sharpen keyword, I want to display some static links already defined links so for link where we can specify the title. The URL and quick description here.

B

If I save this for the wall and I go back here and enable this option, I can test my keyword here. So if I type 365 I have my link displayed here based on this keyword, so it is a convenient way to promote some content based on keywords.

B

Ok, so the next option now is selected properly. I won't talk about this properly. Now we will see it in the styling configuration, so I will jump to the refiner option. We final allow you to filters to filter the results dynamically based on certain property. So by default you have some filter defined, so the created date size and all the taxonomy tag tags apply to your content, but you can define your or or you can just remove all the refiners to to to ID the filter button.

B

But if I want to apply my own filters, I will have to specify my search managed properly, so he'll make sure your probably is defined as refine able. So basically, we have to use the predefined manage properly like with variables, doing or refine able data and so on, and you can use the ideas here. Instead of the programmatic value, let's say so here: I've defined a property based on the taxonomy value and I can show the friend need display name on the filter panel.

B

So, let's say to show the document type I configure here and if I go on the filter. I have now my newly created value with all the corresponding values here. So I can filter values.

B

As you can see, my filter values that display in English because my site languages in English. So everything is fine, but let's say I want to configure my filters in nother language. So, for instance, I will switch my side to French. So if I go to the language setting and if I switch to French.

B

And I go back to my search page.

B

So my side, my side is in French and my referral values are still in English, so it's basically a limitation of some point for the taxonomy refiners, so these webparts for the automatic translation to cover this. You skate for multilingual infinite.

B

So to use the automatic translation, you will have to configure your source schema in a special way. So to do this, I will go to my search, schema and define a new refundable manage properly so nice a schema if I take the refiner property I used before you can see. I have now two refiner findable strings define here. This is the one I used, but if I want to to benefit off the automatic translation, I have to create a new refiner world by refundable swing properly. Let's use the tax ID crawled properly. Okay.

B

So if I take this one here and I go back to the configuration of my webpart and.

B

I add this here document type I: did you get the difference and if I here you will see the difference so here based on the text hopefully- and here is the one based on the tax ie property, so this value are translated automatically based on the equivalent user language site use of the site language. Sorry, so it can be useful, very useful for multilingual internet. So this way you are able to update those level.

B

Let's say live so I will show you this right now, if I go back the site settings and to the terms for ten store settings.

B

Let's say I want to update the form value in French right.

B

And I go back here. You.

B

Will have your your level updated automatically here with that? They need to recall something order, so it can be pretty convenient to to update your taxonomy schema toxemia hierarchy on the fly. So if I go back to the last option of the source code, the source query configuration the last option. Is the ability to configure the number of results displayed on this web part.

B

So very basic option can choose the number here, and this is pretty it for the first second page of configuration about the query and in the the next page we will talk about the styling options.

B

The study options will allow you to customize the display of the search results according to your requirements. So we begin with the first options here. So the first option is the ability to configure a title for your web part, so this title will be displayed in edit mode and display mode. Okay.

B

The next option is the ability to control if it is better to show nothing if the query doesn't get any result or a friendly message. So if I go here and type something really weird in this in edit mode, you will have a message saying this specific query doesn't get any result and in display mode you will have basically nothing if I go get back here.

B

I'll check this option. Basically, you will have a friendly message appearing here, so we revert this query.

B

The next option is the ability to show the result code for this query, so in 30 on according to requirements, and the last option is the ability to show a page in control at the bottom of the component. So the number of pages are automatically defined and this option works with the previous settings allowing to configure the number of item per page. So the number of pages is determined automatically according to the number of results, and you can switch paging.

B

Another query to to get new set of results.

B

Let's review now the templating feature of this web part. So, like the old content search were part of shop points, you are able to customize the way results are displayed within the components so like the old display templates capability. So in these web parts we provide two default layouts for results. So the first one is the list layout coming with cool feature like document preview. So I can, with this layout, display preview of an office document, so it works for PowerPoint Word Excel pdf.

B

So you have an interactive preview of document directly within the results itself, so it works for office documents, but also for videos for office 65 office 365, video, so I will show you. It is right now. So if I go to the site, setting I will grab the video results of the built-in video with all sauce for shopping for fifty sixty five videos. So what I need the ID of this visual source and if I go here, risk up to the whole tenants I have already a couple of videos here and the same concept.

B

If I click here I can play I can play this. Video result, so it works only for a 50 to 65, video and night and not Microsoft swing, so we're back here. The other layouts provided tile, layouts or another way to display results. And if you are not satisfied with these layouts, you have the ability to customize your own experience. So this is much like the old display template feature.

B

You have the choice to start from, let's say blank template just by clicking here you have the basic structure to format your result, according to your requirements, or you can just start from an existing template. So the basic scenario is I want to show a specific metadata from my information, educated architecture. So let's say I want to keep the least layout, but I just want to add some field here, so you can start from here and click here. You have the code for this template and, let's say I, want to add the older meta data.

B

So basically I will get the same same structure and I have the title copy-paste this line, and the cool thing here is that we can just use the fields name here. So, let's say I want to use the manage property holder.

B

What I have to do is type this value here and save, and it doesn't work why it doesn't work because before using any custom or any out-of-the-box manage properties, you will have to specify these properties in selected properties to be able to use it within your templates. So I want to use the author manage property. I have to specify it here and, as you can see, I will have the name written here.

B

So this is very important to define your properties here before, using within your template with templates, you have also the ability to use some helpers. So beyond the scenes, handlebars is used to generate a template and to build a template, so this is basically HTML with some funky helpers, so, for instance, I want to display the title of my result in uppercase, so how I can do that? So by default, you have access to all handlebars helpers within your template.

B

So all you have to do is write temper, the helper name and you mirror- and by this way you as you can see, you can update the way result our display. So this is a really cool feature and you have a lot of helpers too, that you can use within your template. So you can review all the helpers directly in the handlebar helper repository on github so feel free to take a look, so you can modify your templates, let's say in line by providing your template contents directly in the web part.

B

So, from a technical point of view, this content is saved within the property bag of this web part, or another scenario is if you want to centralize all your templates and distribute all new templates for multiple web parts. For this scenario, you have the ability to specify an external template to your web part. So, let's say I want to use an external top plane. I go to, let's say.

D

B

Documents, library, to store all my templates- you have an external template, so all I have to do is to specify the path of this template here, so it named external dot, HTML and all night. My result will be displayed with this template. So here it's a very basic template just to say this is an external top light, but this is basically the same. The same ID. We define the topic in the next seven file in HTML, so this capability, this feature is very powerful.

B

If you want to decentralize, are you template and control the experience over your site?

B

And when you configure an external template, you are not able to update it from the web part okay. So this is for the the global templating feature, but if you want to specific conditions of specific, let's say display for specific condition.

B

Let's say I want to display a PowerPoint document this way and what document this way and so on it can be difficult to to do this logic within a template exists because it's a global template, a lot of code and so on so and you do want to make a lot of- let's say, condition: logical condition within global template, so solve this issue in this problem. We have a result, types feature, so the original type feature is just like the result. Type feature from the old content search web part, and it works like this.

B

So if I go to this option, I have the ability to to write a template for a condition. Okay, so let's say I want to display world documents in a way and poor-poor documents in the way all I have to do is to write the manage property I want to use, so this property, you have to specify it in the selected properties like I did for the author. Probably you have a bunch of built-in operators for probably so equals contains, and so on, and so on. So let's say: I want to target word document.

B

So what I can do is let say contains dock here. I can provide a template for this specific item for only Word documents, so here for a test. I will just write. Road documents just to show you and I can do this. Also for I can add multiple condition. So, let's say file type contains.

B

Pt and this one is poor points, document and I said, and here is the result. So, with this feature, I can apply specific display for specific conditions. So, like ideal in the configuration, what document is our display in a specific way and PowerPoint? This is the same.

B

So it's a very powerful feature to customize the experience according to specific conditions and or to yeah bold, very customized experience so like the previous functionality. So the previous feature, you have also the ability to specify an external template for for a specific visual type. So let's say the PowerPoint document. I wants to use an external top light.

B

Here you go. You have the same. The same capability here.

C

One of the challenges with using handlebars to display the search data is that handlebars cannot handle descriptive ins. It is a pure display engine. We have made an alternative solution that is more similar to classic search display templates that uses SPF X. Instead, the display templates are bundled as application customizers in a separate app package. This means that we need to install them before we can use them.

C

C

When the app is installed, the new renderers will be automatically visible from the property pain of any search refiners webpart on the site. As you can see here, two new template options are visible.

D

Similar to the other renders.

C

We have also added support for templating, just open the property pane go to the last page and press the configure button.

C

Here you may choose from a list of properties that you have chosen to search for in your search settings and map them to different fields.

C

When we say that we will be updated to display our chosen field instead, let's try that again, let's use file type save another file type is displayed as the secondary hammer. If you want to create your own code, renders you can find the source code of the examples in the SP dev solutions repository on github, the source code is found in the same folder as the react search refinery sled park.

B

Now we're going to talk about the other web part coming with this solution, which is these search box web part and we're going to connect it with these search results web part on the same page. So to do this I will add new search box. What part and go to my search results configuration and, as you can see, there is a field here that allows me to connect with an existing source. So this feature this field comes directly from the new feature.

B

The dynamic data features coming with the 1.7 shop confirm version, so these features allows you to connect webparts and extensions on the same page. So let's use this field to connect myself back so I have some available sources on the page. I will talk about the built in page environment source later, but I will show you first, the search bus connection. So what I want from the search box is basically the input, the the keywords typed by the users, so I will select the roll user search.

B

Query and I have another option here, so these options is especially useful if you want to provide a default query, so it just like the base quite a static configuration quai I showed you before, but it is especially useful if we have nothing to get from the input at the beginning for it. Since, if you refresh the page, you have nothing in the third word and you want to display default results, so you can provide it as a base query.

B

So, let's take a look to the sauce box option itself, so the search box has multiple options. The first one is to connect this suppose to a dynamic data sauce also, so this scenario would be useful to grab some values and to populate the input control with information from another source. Let's say we want to grab the as tag from the URL, so the URL fragment and inject it to the search box automatically. So for this we use the page environment built-in source and select this URL fragment this way.

B

Everything the URL change, we're gonna, get the hashtag injected to the to the search box and I will show you this right now from the default list layout. We have some regenerated tags coming from the item metadata and we with this tag we build a specific hashtag in the URL making another query and because we connected the search box with the hashtag, this value is automatically which we from the search box and because the search box is connected to the search result.

B

We are we've cascade this behavior, so it can be very, very useful to to filter your results dynamically, so I go back to my sunspots environment, so it's sauce box web part. The other options for my search box is to enable the query suggestion so before enabling this option to configure suggestion. I will have to go to the central administration of my tenant. So if I go here on the SharePoint administration site, I.

B

Go to the search option such Center and I have something called suggestions.

B

The web part only supports the static list of keywords, so there is no automatically reduced suggestions based on what you click and what you get from the results. This is basically a text file with some keywords, so I have configured some keywords so already so we'll show you, let's say I want to so here you go. You have some basic keywords here as text file and these keywords will be showed by somebody.

B

The search box.

B

It can take up 24 hours to get these values for your search box. So just be careful. So if I enable suggestion here.

A

B

Means if I start to type some things I will have to suggest and provide it to me according to what I type. So it can be especially useful if you want to come to also of some normalize keywords in your company or something so that's it for for the search box option so after knitting words, those both with one component. But you can see with the dynamic data we are able to connect multiple instance of the social support part with a single instance of the search wizard webparts. So I will show you yeah.

B

Let's say I want to add two.

B

Search results.

B

So we can build a search center. This way very easily.

B

Here and I will provide default, query and use the list layout will configure the other one to the same here. Search.

D

B

And I will provide another and use, let's say another layout, so this configuration I.

B

Will have different set of results based on multiple instance, so you can build a complete search center with this concept, it's very easy to to build.

B

So I can go to my homepage and turn it on page just play tea here. But I can add the sauce box here and I have an option, an air to send the query to a new page. So here I will provide the UL of my preview page, which is this search copy. This link well I, have the ability to choose the behavior of the opening behavior, so I can use the current tab or open a new tab. I will just you, send a query to a new tab and if I save here.

D

B

And, as you can see, the keyword is sent through the hashtag and because I've connected my Salzberg to the URL fragment. This keyword is passed to the sauce bug and then to my search results. So you can cascade all the connections from the keywords of multiple instances within your pages. So this is a really powerful combination to build, completes, search center.

B

The last options of the search box concern the search query enhancements capability using natural language processing services like Microsoft Lewis. You can see it as sharp one query wall plus plus. So instead of making an exact match of keywords and update the query, the search can be dynamically. We can benefit from Microsoft, Lewis and other connective services to extract intense and entity from the user inputs. So we can apply custom logic if I enable this option in the web. Part I can provide a service URL.

B

So if I go back to my solution code, you will see two folders at the top. So the first one is the s perfect folders containing all the web parts code and you have a functions folder, so the funks functions. Folder is another function that will interact with other Microsoft cognitive services. So before studying, we have to create some with application, so we've provided some sample application. Here we have one application per language to get better recognition results, so you can import this file directly in the Loess bottle.

B

So if I go to my Louis portal, I can import the design from here now. If I go in specific application, we define some basic intents and entities, so the first intent is a very basic one. It means the user wants to search for something and we've provided some sample. You Terrance's with keywords some entities.

B

If I go to the entities we have for the first entities that we have with the key phrase entity which is pre-built entities provided by Microsoft. It helps you recognize relevant keywords in you turrets, so this entities cannot be trained. It means that if you go back to an intense I want to map specific keyword to these entities, you can't so in the real words that I you, you want. You much use your own entities and match to your own keywords.

B

So, let's say I want to add another sample. Give me.

B

B

Can train this specific utterance to map my own entities.

B

Once I once I've done it, I can train my application and publish so because the other function interact with microsoft. Going to services, you will have to create firts on as your keys, so you will have to go to the azure portal and create some subscription key to interact with these services. So we will need to create one for the Loess service, the being spell and the text analytics.

B

The text analytics is used to detect the language from the user input and redirect to the right Louis model and the spell check we used to correct the user input.

B

Once you've created this keys, you will have to set up your local settings view and map your keys directly in this file.

B

So to use this function, go to open a new console and go to the functions. Folder build the application.

B

And start the function.

B

Once started, you have here a URL local off URL that you can use directly in your web board. I.

B

Can enable the debug mode to see the output from the SEO function and I can choose to use either the lowest aging endpoint or the prediction input. So this legend corresponds to the lowest publish option here. So if I go to the manage and endpoint, you have some different slots that you can use to publish your application. So here I will use the production and publish to the projection. Endpoint.

B

Here and I will use the prediction in point, so it means if I go back to my search box here and I enter this specific.

B

You will see the entities I mapped before in my application, so we have the key phrase: entities recognized automatically by the built in entity and now my own entities appear here also so once I've done, this I can choose to connect this webpart to another component in my page, so it can be a search result. Webpart. So let's say I want to connect it to a search result.

B

And consume this information from the search box.

B

So here the search box expose the NN search: query that you can use your home property and your home component, so you can create component that consume entities are intense and display the information accordingly.

B

So if I go back in my as a function and inspect the code, the logic we will see the algorithm here is pretty simple. Once average, with the entities and intense I just create a new search query that can be used in other components on my page, but in the real world scenario you might want to use your custom logic here to extract entities and do something with it.

B

Another cool feature of using Microsoft Lewis as such proxy easy as you can get search logs directly from the application in the Loess portal, you can export logs for a specific application as a CSV file.

B

This way, you can see all the users queries and you can see what users are looking for new sites and improve your models filled with application. Consequently, by refining entities and intense.

B

I hope you enjoyed this presentation feel free to test these components within your tenant. You have all the installation instruction from the with me files, so you can take a look and feel free to log some issues or suggestions directly on get up. Thank you. One.

C

Of the challenges with using handlebars to display the search data is that handlebars cannot handle. You have a script events. It is a pure display engine. We have made an alternative solution that is more similar to classic search display templates that uses SPF X. Instead, the display templates are bundled as application customizers in a separate app package. This means that we need to install them before we can use them.

C

C

When the app is installed, the new renderers will be automatically visible from the property pain of any search refiners that part on the site.

C

As you can see here, two new template options are visible similar to the other, renders you.

C

We have also added support for templating, just open the property pane go to the last page and press the configure button.

C

Here you may choose from a list of properties that you have chosen to search for in your search settings and map them to different fields.

C

When we say we will update it to display our chosen field instead, let's try that again, let's choose file type save another file type is displayed as the secondary handler. If you want to create your own code, renders you can find the source code of the examples in the SP dev solutions repository on github, the source code is found in the same folder as the react search refinery survey, part and.

A

There we go really really really cool stuff and obviously the the demo and the webcasts. The demo is quite long, but that's demo is long because and there's quite a lot of capabilities. So hopefully the people who are watching the video you actually watch to and understood how flexible the web part is and and what's possible and now any any last words from a Frank or Tirat from your side.

B

You have all the information in the demo so feel free to ask your question. If you didn't understand very well or want me to explain more, but you have all the information inside the repository as well, so so feel free to use it yep and.

A

What about Utah routes any last words? No.

C

I think I think the demo covers it.

A

D

A

You both for joining and thank you for an awesome, awesome community contribution. It's really great to say this is a. This is a great wave part which Frank started and then Michael is jumped in and then Terrell jumped in and it's kind of an evolving together as a team, which is a really really great thing, and it because that that that's really the power of the community we learn from each other. We extend the common knowledge and common samples. What we thought together, and so this is a crate, create an example of that success.

A

But thank you both for joining and we'll. Definitely, hopefully, we'll have a new webcast in the future, with both of you. So thank you very much. Thank.

B

C

A

C