Microsoft 365 Community Microsoft Search, 16 Jan 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Updates on the PnP modern web parts solutions – Latest capabilities

Description

This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on January 16, 2020.

In this 11-minute video, PnP Community member and Microsoft 365 Developer Franck Cornu reviews several new features in the PnP modern search web part released in December. The latest capabilities built leveraging extensions from the SharePoint extensibility library, deliver the quickest means yet to customizing your UI - pages and columns, creating your own components and uploading them to your app catalog.

Presenter:
• Franck Cornu (aequos) | @FranckCornu

Supporting materials:
• Reference: https://github.com/microsoft-search/pnp-modern-search
• PnP Modern Search: https://microsoft-search.github.io/pnp-modern-search/

All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2

Learn more about the SharePoint developer community at: http://aka.ms/sppnp.

A

Hi everyone, my name- is Franco she's, 5 developer and the original owner of the PNP model solution and I'm based in Montreal Canada. So today, I also use some new features really in the December version of this web part of this solution.

A

So here's I have a page shopping. Page, yeah I think you already know the solution. The PNP model sense web part.

A

So basically, what you have to know with this weapon I won't go deep into the configuration, but what you have to know with the search request, not which is the manual part of this solution, you can customize the UI with different option, meaning you can just adapt the the UI and the result display according to your requirements. So basically we have multiple scenarios supported in to to customize the UI.

A

The first one I would say would be the light one internal customization, so you can just configure your proper, your own properties on such such manage properties, edit placeholders, the queries and so on. This is the basic scenario: ok, but we have also like Advent scenario. So in these scenarios you can completely override the result display. So for this there is an existing solution that you can use to completely override this UI. So the first one is use the search custom renderer project.

A

This is a project that was made when you were ago. I guess right around so with this project is just a total control about the UI and you can use a react component to customized year. The result displayed by the way I forgot to mention, but there is a new repo for the PNP model such a part. So this is not all still in the SPF solution. Does it every anymore?

A

So if you have issues or issues or anything else, just go to the new repo, microsoft search, slash, PMT, modern search and you can start from there and get the latest videos from there. There is also a nice documentation as well, so you can just explore the documentation and much more readable, okay, so for the custom renderer, you can use this to customize a whole display and the new feature I will show. You is another way to let's say: customize more granular, which is the creation of custom web components. Web components.

A

You may have noticed default layouts, provided with these webparts already use this technique. The web component. This is the gate for this. Okay, sorry for the details list and the ties layouts. So if I click on the details list, for instance and I, will inspect the underlying Ndebele templates, you will see something like this PNP detail list and so on and so on. So these are web components. Wrapping react components.

A

So this way you have, let's say the best of both world in terms of UI customization, you can use react components so create dynamic, behaviors and you can also benefit from the endo bar and the bus context, and you can still use the SS and HTML in your custom templates. So the new feature is basically now you have the ability to create your own components, so how you can do this in the PNP model, such what part pink models and solutions?

A

Sorry, you have a new project called search, extensibility library, so if you inspect the code of this project, so this is basically a FPA fix library, component project type, so listen to important succession, but the library components.

A

Few thing you have to know for this project: the first thing is to get it with such method. Webpart, you have to make sure the ID in the manifest is this ID. This is the only way to let's say, load the library dynamically from the surface at work, so you have to keep the Tidus ID for now. I, don't know the another way to load this library. So first rule keep this ID. Then you have a main file.

A

Here's the demo demo project, so it provides some interfaces type with interfaces that you can use to create your own and declare your own components. Web components, so all you have to do is create friendly name for your components. So let's say we lose my custom components and web component class. That will be the logic of your components, so, in this demo, I created a very basic components. So, as you can see, there are some props years and there is a logic so in this component, I can do pretty much anything I want.

A

So in this example, I took I took for instance, example the panel component from the oficial fabric library, but you can use own components, doesn't matter another rule to get it work in your templates. As you can see, there are some props ears and the users of the components will be like this. So, as you can see my custom components, I can use it like like this. In my my templates, the way HTML attributes are translated into reacts from props.

A

You have to follow this. This pattern pattern. So, as you can see, my string program is translated in my string per year, so you have to use in your props the camelcase syntax to get it work. So you know the next simple here. My string program is translated to machine power in props, and this is the same for object, param also for complex types. Let's say you have to pass an object from the underpass context to your web components.

A

All you have to do for objects is just to stringify the object and get get the diversion depart version into your component. So this is the way you can pass complex objects and properties. So then, once you really read your components, what you have to do, let's say to use to use it in your search result. Webparts is very easy, so I will just go back here. As you can see, my template I've did declare my custom component. Okay, I say: oh nice.

A

Ok, my component isn't here right now. The thing is we if I have to display this component that you have to do is to bundle my solution so just go to your project search, accessible, every girl on the ship.

A

Anyway, you know the process: I won't get it there, but bundle. Then package. You have a beautiful package. As the output go to your app catalog can be the site, collection or catalog order, global ad cattle and just upload. You package.

A

Here so the research accessibility, library demo just make this solution available to all sides and if I go there, press f5.

A

My component is here so, as you can see, this is my react components, so it uses the panel from youth history as a big library and I can introduce dynamic, behaviors and so on and I can benefit from the Android bass context. So the search results, properties, I turn properties and so on. So I think this is the most flexible way to customize the UI, because you have the underbar context. You have the ability to create your own components or granular components, so you can use them in, let's say in the global templates.

A

So let's say here in this: in the templates the whole template or inside let's say for the manage for the detail, its layout. You can also use them inside, for instance, columns so I can just write my custom components, mañana and inject my properties. It would be the same so a very flexible way to customize your results.

A

Also regarding the code you can as of course use. We are components that you own. We are components that you can also benefit from sorry the context of the web part. So in the base component class that the library provides you can still use the web for context.

A

There this is so you have this probably already provided so it means you can, for instance, call your own web services and so on blah blah blah. You can do whatever you want here. So the only thing you have to do is just to follow this structure. There is a built in meta that resolve attributes from HTML attributes to react ropes using the camelcase syntax and there you go. You can inject your props into your components and that's very it.

A

Keep the same. Id implement the base class upload to your catalog. You go, you can just implement your your web components, I think so. This is the new feature for the already available in the December release. I'm done for my demos. Thank you. Frank.