Microsoft 365 Community PnP Webcasts, 31 Oct 2016

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: PnP Webcast - Building a sample search web part with SharePoint Framework using React

Description

PnP Webcast showing how to build sample search web part with React using flux. More details on the web cast can be found from http://dev.office.com/blogs

A

Welcome everybody: this is SharePoint patterns and practices webcast and this time we're going to talk about to one of the samples which we have available for SharePoint framework written by alias truth and sorry. Ilya I can't pronounce and pronounce ate your name properly, but that's fine as well, so my name is Robin and I'm.

A

A Senior Program Manager from SharePoint engineering and today either is gonna lead to presentation, I'm gonna, interrupt Ilya every now and then within the slides and within the demo section and like mention we're gonna have a look on one of the samples which are available from the github for you to learn how to do SharePoint framework development.

A

Elio really do the introduction. So.

B

Yes, I'm a consultant from Belgium I'm. Also an MVP are working for Wendy grades. So I will do this SharePoint framework search demo I created a couple of weeks ago.

A

Excellent Thank You Ilya so before we go to the actual content, doctors of the of the presentation or a webcast, just a quick intro on SharePoint patterns and practices, treatment patterns and practices is owned by the SharePoint engineering. But we work together with community block MVPs and other people from the community who are contributing and helping us to with the samples and reusable components.

A

The BMP provides code, samples, guidance, documentation in MSDN, multiple community calls case studies and the themes are in the SharePoint framework ship and adding model which is fully supported and will be in the future as well and also Microsoft graph and office. 365 ap is a kms, SP, P and P or SharePoint. Pnp is two at rest's and you'll, learn to the one pager with such a lot of information around the SharePoint BMP good location to whenever you're trying to implement something.

A

I would recommend to go there and have a look if there's any reusable stuff for you to consume, but let's actually go move into. The actual content of the presentation and healer is gonna. Take delete and I'm gonna Dan here interrupt Delia as we go along, but elio take it away. So.

B

Here you have a quick glance of what the search report is. So you see just the car carousel templates. The web part itself is based on what we have available right now with the confluence search by parts. So you have this kind of functionality with display templates in this web part. You have a similar experience with the usage of templates. So if you want a carousel, you can edit, but you can also have a table layout. All this is done by configuration options.

B

You have available inside your that words, so we have a search settings option. You have a template setting option and a logging pane. Now the most important one will be your search query settings where you can define your query. All the documents are, the images you want to retrieve the number of results you want to render and the sorting of your results.

B

Besides that you have the template settings in the template set States, you have two things to put in mind: you have an external template or an internal template. You will see that in during the Kodomo, internal templates are templates that are created within the SharePoint framework project itself and external templates, as you can see on the top, it's a link to an external file which can be loaded from your CDN. In this case it is SharePoint itself and on the right side, you have a lot of pain and the flogging pain shows you.

B

The API calls to search that are getting made. So if you do a typo and there's something wrong, then you can see in the loading pane what has been gone wrong. So this gives you a good overview of what's happening. That's.

A

Actually a nice feature within the web part because then you're able to figure out, even though it's placed on the production, you are able to figure out if something goes wrong. That's clever thing to do.

B

Itself is built with react so as every SharePoint framework application is built on top of react, this web part is based on the react template itself and it's also using fluid slacks is a pattern from Facebook go through it in the next slides and the web parts, as I already mentioned, have the availability of templates, internal and external, so you also have API logging and for the external templates, I will also show you a template builder I, created so to quickly create your own templates and to include them in your project now to understand how the webparts works.

B

You need to understand a bit how flux works. So flux is a bedroom, it's not a framework, it's created by Facebook and it's base for utilizing unidirectional data flow. So what is this base? Everything is based on an action and an action sense of go through with this picture that this picture will see which available stores are available.

B

Now the store is something where you can retrieve data or you can put data and you can have multiple stores so with this pack here will dispatch its action to all the stores available and when the store sees oh I have an action and it's for me, then it will do its action that it has to do once. It's finished. It will push or emits a change to the view model so to show you I created the new visualization of how it works with a search component itself. So first things.

B

First, it starts with the search component. The search component will load on a page and then it will trigger I, get search, results action, so it will sense the action to the dispatcher. The dispatcher itself will go to the search store. A give me all the search results for death. Add for the current query. As you can see, the search store calls the Search API once its retrieved, then the search store will say: ok now it's time to render the results. Every time you do a change in the web part itself.

B

It will emit a new action called the change settings action. It will also go to the dispatcher and so on and so on and so on. So now we can live into the demo itself. So hopefully you can see my screen, so this is just a working stage, workbench page on SharePoint, with the search report loaded.

B

So if we are going to open up the web part- and you can see the search query settings- you see the search query- it's just based on docx, but I can change this to to tweet me all the documents on the current sites and you're going to the three. Only the docx files and I can say how many documents I want to show 15 documents.

B

Do you want to have sorting in place? Yes, I want sorting in place once this is done. You can click on apply and you will see that 15 results are rendered quick.

A

Comment delete that one, so you you've decided to use the nonreactive property paint, obviously, because there's there's so many things to configure it doesn't make any sense for the web part itself to reflect those changes immediately and that's why we see the apply button in the you is correct.

B

Indeed, otherwise there were a lot of changes going on yeah. So that's why I turn it off so then you have the template settings. This is just a default template, but I also have an internal tables template, as you already saw during the presentation, so you can quickly check its change that once you click on the apply, it will also change the output. We can also add a title above its table layout instance apply, and now you see the table layout on top of it, external.

A

B

I will discuss this during negative time during the demo, and here you see the logging pain now once we open the crate settings again and we do a typo inside the sorting. So let's add some PT, you will see there are no results at the moment and if you go to the log in here, you see the full URL of the API call that has been made, and you also see the response and in the response you see this, and here you can see developed, parameter shortlist.

B

So now you know, okay, there's something wrong with my sorting. So if we change this, we applied everything is back to normal. So that's quite an easy way to check. What's going on, so you don't need to open up your web developer tools to check the rich calls that be made. So you only see that one call for your Search API for the web part itself. So that's in my perspective. It will benefit for the web parts yeah.

A

That's it that's a really clever way of handling that not well, especially in the complex web parts, to have that kind of a way to understand when something goes wrong. That's really nice implementation.

B

So the code itself, as you probably seen, search or react to the parts it all starts with with the web part itself, which loads a component file. In my case this is a component file and in this component file there are two real important things and that's the actions and the store.

B

So my component is aware of which actions it can execute and also of the store work is available. So let's first go to the Action List, so it's under Flex actions and then search actions. I only defined one action, and that's only if yet we give me the new set of results and it's retreats the query string, the maximum items to retrieve the sorting options and also the fields you want to show inside your template.

B

So what happens when your component gets loaded? It will initialize that search action. You will see it over here yet so it gives me a set of results. Now we have the dispatcher. Dispatcher influx is nothing more than just this, but it's Patrese the action call and then it dispatch its to the available stores, as in my components, I only defined one search store. So this is my search store. So this is a search store itself and if you knew how Flex works, the clerk's has a dependency on the switch which checks the action type.

B

Now every action type needs to be defined in this inside your store. So in this case it's my search get action. So if it sees the search gets action, then it will execute all what's inside that switch statement, a statement, so in this case it will retrieve the URL or it will build up URL for the search call that has been or should be made. So this is all what this need and has been needed.

B

So it will retrieve the query options: the fields it needs to be retrieving the amount of results and the sorting options. Once you have your URL available, then you can make the call to your Search API. So you usually get search data. It's nothing more than calling the HTTP client, which is available in the search framework itself, so it will do get action for the URL you just built and once that's done, you will return the cases of it.

B

So there's the JSON object object, and here you will see that now, if you log in to your web part- and you check to do some checks, if you have the available data for your search call so here this is the most important one. Are there any rows inside your JSON object? If, if that's true, then we have a write object. We set the search results, object in our store, so every time there is a new component, it can retrieve all the data from that object itself.

B

So it doesn't need to necessarily do a call to the API again and again and again so it's catching the data, and once that is done, my search store does something special which is emitting a change. So this tells my components that my store has done its work and that it's time to rerender my component itself.

B

So if we now go back to my components, there are two things you need to be aware of: is the component date mount and the component will and month in this two functionalities you have a search, store at change listener and remove change listener. So here you will add an event handler that waits for DM exchange in the search store itself. So once it sees the emit change, then it knows. Okay, now, I need to read, render my component on the page.

B

So when you know don't need a component anymore or you're loading in other components, then it will, it will trigger the component, will announce and then you can remove the event listener. So, as you don't need it anymore,.

B

A

That's yeah, that's pretty much the flow with flux. No doubt can you just out of Korea, so they can actually show where the data is stored or how the data is stored within the store and how do we then get the data from store as well, when you do have the get search results from search store in the web part in this component? Yes, that's.

B

A

The results away and how do we actually save them in a store.

B

So here I have another function in that function. I do some optimization of my object itself. I, don't need to have all the data available from meditation object, I'm only interested in the fields. So me right, creates my new object with only the fields I am interested in so, and this is stored in this search store in a variable called AmeriCorps or in an object, falls under store, underscore results. Yeah.

A

B

How its retrieved that's retrieved inside the components so inside your components, once there isn't change going on, you have an unchanged callback function that needs to be called. So, if you're going to take a look at this, you will have a set state and in this set state you will retrieve the result. So, in the beginning of your component, loading the state will be empty, so it's an empty object and now we will load your results from the store itself. So there's a function in the store gets search results.

B

So if we go and take a look at that, it's not even more than returning that objects, what was just created in the set search results and functionality, so quick and easy, the only thing is: you need to know how Flex works before you. Can it start implementing that yeah.

A

And that will, whenever we set the state that will then fire the render method for actually outputting the information yeah. So that's this to say a this is actually creates an example also from from a flux, pattern, perspectives, so how to actually take advantage of Lux, and what does it actually mean- and in this case yes, there's only one action, but there could be tens and tens of actions if you do have a comb, let's say complex UI, but this is a great kind of a stepping stone. Oh, this is how it works.

A

A simple example on under your flux, usage as well.

B

So then we can quickly dive into the external templates. So, as you can see in my render, I have two renders available so I have an external template and an internal template rendering so as I defined. An internal template is a template. You create inside your SharePoint framework project itself, so here you have a template. Folder, which has two templates I see well. Over already saw the default templates in the table, template layouts, so these are available by default.

B

So if you're loading the web parts- and you go to your template settings, you will see the table and default now for an external template. I wanted to load it from an external location so to be able to load it from an external location.

B

The template itself needs to be in an exact order or in an exact template pattern which I defined as the looking like this. So you have a function called external template which contains a couple of properties. These properties are a key value text of the name of your template, the mapping properties, which fields you want to retrieve for rendering inside your templates, which clips you want to get loading before you start using your template and which Styles you will Styles. You want to loot before using your templates.

B

So in this, in this case, this is a carousel template, so I wanted to have some CSS to the loaded for rendering my carousel layouts and I also need to have a key query, reloaded and a library called cycle to which, as a dependency on key query and if we are going back to our sites, I already added it to my side. So here I have just a document library with my template.

B

So let me get that link to the file if we are going back back to the table lamps first, let's do a very with only two matches. You can remove this. If they are applying this now, we should only retrieve images and that's correct.

B

Now we can go to the template settings and we can turn on external template loading and, as you can see now, the text box becomes available, so we can enter the URL to that template and once I click on apply, my carousel template is getting loaded, so this is loaded from that URL. So.

B

This the output of my JavaScript template- and this is here so if you don't believe me, let's do a quick change, so I want to add some paging and read it. So, let's add some painting underneath the carousel template. Let's add this to my slides so once this is done behind the scenes. There's this job running and I hope this is open. We put it on the screen, so this is a group watch function and it's checking which files has been changed and once file change has been seen.

B

Then it's going to upload my file back to SharePoint.

B

It's a little bit similar how sharepoint framework pushes everything to a CDN. So if you are going to load that again now we have our custom pages at the bottom available and also our data that we are added. So if we now reload the page, hopefully into a work so and now we have some paging underneath the images. So this is just a quick example of how you can work with external templates, in combination with the Search reports, yeah.

A

That's a that's a great pattern as well, and obviously there will be a native by the way, a native SharePoint search web part in the in the modern team sites as well, but the whole point of this sample. What Delia has done is to show this individual technical samples and technical approaches, and this is a great great example, demonstrating multiple different scenarios, which is superb.

B

So I can show you other things just.

A

Out of curiosity, actually man now that before we close up, can you actually show how did you switch the drop-down to a text box in the editor pane, so.

B

A

Because they will say, that's not a native thing, that's happening as well. You know indeed,.

B

So going back to the main file, so in my case this is a search. Spf X report file inside the property pane settings I created a statement to check if my external templates property is turned on or not so by default, I'm going to show you a property drop-down, and if my property, external template is turned on, so it's true, then I'm going to switch the template property to a text field and I'm only going to add this filled to the template group. So this is the template group.

B

So here is the template property, so in case of or by default it will load the drop-down and in case of when you're turning down it will show you the text fields instead of the drop-down. So that's how I switched it so quite simple to do. Yeah.

A

Quite simple from me, because the framework is properly providing you some of these controls and behaviors, but it's it's great. Well, it's a it's another great sample included in this one or a pattern. They included in this room, so cray, clipart and overall good I think that's it from a demo perspective. So let's switch for the slides and close up. The webcast then, but yeah so like mentioned on the search web part itself, so Oberst there will be a native out-of-the-box search web part and there is already in the modern, modern team science.

A

But this is really around showing individual capabilities like how do we build react and using a flux and also a few other scenarios there, like the external templates and also the editor pane options, it's a great way part to actually pull down from the samples and have a closer look on hey. This is how I'm able to implement my customizations to SharePoint framework as well anything wanna kind of a that's on there, a Leo.

B

When I was building it, so I implemented quite a couple of things to to touch all the endpoints and all the functionalities that are available inside the SharePoint framework. So if you are interested check out the web part itself and see what does we can do with SharePoint framework itself, cool.

A

Cool and and but I think, that's it then so thank you earlier for this one crate sample crate weight port and will come up with a new webcast sooner or later. Thank you. Thank you.