Microsoft 365 Community Community Demos, 20 Sep 2019

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Community Demo - Building a modern Search Center using open-source search solution

Description

This community call demo is taken from the SharePoint Framework community call recording on 12th of September 2019. In this video, Franck Cornu (aequos) shows how to build a modern SharePoint Search Center using open-source solutions build by communtiy.

Presenter - Franck Cornu (aequos) – @FranckCornu

Demonstrated sample is available from https://github.com/SharePoint/sp-dev-solutions/tree/master/solutions/ModernSearch/react-search-refiners

Full details on the community call from https://developer.microsoft.com/en-us/sharepoint/blogs/sharepoint-framework-community-call-recording-12th-of-september-2019/

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

A

Okay, everyone, so my name is Franco new I'm, an office 365 developer walking for my own company, based in Montreal Canada, and today, I will show you the latest update for the modern solution. Since the August release, which won a big release.

A

Actually so I will cover and I will not cover the entire solution, but on media, the updates, a quick recap of what is this solutions set of web parts around open search, mainly to fill the gap between the modern search experience and what we had in the classic shopping search experience regarding the source web parts. So, basically you have search wizard web parts, search box, refiners and so on.

A

So first of all for non developers, you can get the latest release from the github repository s/pdif solution, so don't know the package and can install in your App Catalog so and if you want to contribute, you can just fork and make PR in this repository.

A

So let's start with the video date, so I have set up a search page here and so the updates. The first updates we've made. All the updates are mainly in the search result. Web parts, so the first update we made more practical updates instead of before you have to select your selected properties from the search manually, so you have to type the search properties, the manage properties. Now you have a predefined list of manage property. You can select your own manage properties, so not every properties are listed here.

A

So in the case you use for Excel, for example, addresses for manager. You can just type job properly. For instance, I I think I have a properly named PNP sorority. Something like this. So I can add it to the list and it will be something yeah you go, so you can add your own manage property in this list, so more practically than real, big updates. The big updates are mainly around the templating completing layouts, so it basically it all started with a github issue around the templating mechanism for the STIs webparts.

A

Maybe you know this webpart is easily built on handlebars, which is a template in framework javascript operating framework. So the main issue was with Indaba and the base is cool, but it became difficult to get the same experience as the official fabrics native components only with handlebars you, you have either to customize your CSS classes inside your template, for instance, to write your own classes, emulates the official fabric styles, which can be very difficult or you have to use another feature, which is the code renderer, so completely rewrite the experience using pure react component.

A

So it was a major issue, I think, because because of this misbehavior CSS classes and the react components so in this videos, I think we found the middle ground between underbar templates and react components so before digging into the code, and we did it with just go through the all the new layouts we added to the this web part.

A

So the first one I think it's the coolest one is the detail list, so the detail is basically all this is the office you have fabric detail is that you can see in when you browse the the components and the office fabric website, and basically it allows you to view your data, your so data.

A

In the table of view, but the thing is, you have now some template options, so we've added some option in this view, for instance, you can can choose to display the econ or not or to run the compact, your table in compact mode and so on. But the big update on this one is the current builder, so the Colin Miller we allow you to create your own color, obviously and configure the behavior of your columns. So, for instance, we chose : display, name the column value.

A

The current value is basically a managed property you can use, so you can use the raw value of the manage property. For instance, here I used title I have some other options: the width of the column, the little typo some options. It is suitable, resizable, North, aligned and so on, so I can choose. For instance, yeah basically took two custom I my experience and I'm add my own column. So let's say I want to add my column, a little I've added before.

A

Because total is I, think yeah, no multi-line and so on, so I can add by on : on the fly. So I can build my my experience to meet my requirements, but, as you can see here, I took an example with a row. Value of the search results, as you can see, is the last modified column. The last 25 minutes property. As you can see, the output is not really nice.

A

It is the row value so I, not very, very nice. So the thing we can do now is instead of use the raw value of the manage property we can use and then the bar expression. So let's, let's say I want to update this column. Value I want each ear and I can pass handlebar expression here. So all the handlebar elders are available here. So just last time.

A

The format here and yeah, yeah, yeah and I can do something like this, so it alls you basically to format the it puts the way you want and not only the value, but also you can add, also conditions and so on. Another example, let's say I want to change the background regarding the severity. The value of the this column. I can do something like this. So just grab my go. You here.

A

Iego I can do something like this, so just show you the code to see it to see so fast, so I can add condition, even in my style section and so on so ki k. Actually, I can use every field from my item. Context and I can make I can write conditions and so on and I can play with styles, and so you have the control over the column cells. So you can pretty much do everything so for the column border. This is the the big updates for the layout.

A

So, as you can see, you can do pretty much what you want in there. The next layout we've implemented is the tile layout. So before tiles there was a tile layout, but the ties were was made with custom CSS, not the best experience to look like the the official fabric theme so same same Principia, so we added tile layout, so you can configure in the same way your card placeholders, so you're the title tag, preview, image and so on and, as you can see, you can also inject some handle bar expressions.

A

The difference between the cows layout and detail is in is here, you can't add some HTML markup, because I didn't show you, but we just go back to the data list. I can do something like this. You can also inject some HTML markup yeah up. So let's say I want to make this but string, but strong here.

A

Yeah I can do something like this, so the dhtml macro is allowed inside a column cells, but if I switch to the tile layout and I want to do the same thing for CAD placeholders, you cannot inject your own HTML because beyond the since the react, control and we can't add HTML. So if you do something this, only the raw value of your expression will be will be displayed. So I can use the helpers to enter gossipers no problem here. But if I do something like this, the value will be interpreted as this.

A

So, as you can see here, so you can't inject your own HTML except those two fields where the LOA hTML is checked so in these special fields. So the location correspond to this field and tags is yeah. We already this placeholder, because sometimes you have to display some custom information, for instance, taxonomy, tags and and so on. So this is the purpose of this of this field. So you in this field, you can add your own HTML, like you, like you see here, you can use this markup I will talk about this later.

A

The term that follow this is the experience for the photo Cal layout yep, so the few options, few other options and the cards the result preview. So if I click here when I go to the tide and I want to click on the image, I will have the preview automatically, so it works for documents it and it works also for videos, so videos yeah.

A

So let's say I want to display videos. I will also the preview displayed.

A

Ok, I go back to the option and the latest option. I think it is yeah the compact mode, the same way as the detail is so if you want to display it for my son, it's in a smaller slow way. Okay, so the next one is the carousel, the slider, so the slider is basically the same I use for the pimpy internet for first of this name a few years ago. The thing is, with this slider: it's compatible with touch and so on.

A

So it's a very nice later I did not make it myself in my own code, but library, but the thing is in the slider. You can use your own.

A

Let's say content in the slide content, so I will be to this in a few seconds, but before just a couple of options here you can control the autoplay, the posin over number of elements you want to group inside slides. So, for instance, if I take one here, you know it's: okay, I can control the I want to see it.

A

The dots and I want an if in scoring and so on, but the thing is, as you can see, cars are displayed here, but if I want to display anything, my own content I will have to edit this template and show you. So, as you can see, you have the control inside the slide component, the capsule components. So here it is there the document card, but, let's say I, want to display just an image, for instance, so one Lewton imager will take the persona personal control we'll talk about this later, but.

A

ah Doesn't work because don't have the rights know what I we take? The image was simple: you have also the documentation of the top plating. So if you go to the SPD of solution repository, you have a template in markdown file explaining all you can see in this demo. The layout and so on. I will just grab the code. Snippet I I need to do this demo, just yep. Yes, so I go back here. So I did the contents and I only take the image.

A

Yeah, okay and as you can see the image only the image is displayed so, but I can do pretty much. What I want here and I can use the end up, bars, helpers and context variables and so on. Just don't forget the special ed scape character, because when you are in the slide content the the component contents, we have to escape and all in their expressions to to get it work. So read the doc about this.

A

I would explain all of this now, but it's all explained in the documentation on the next layout is the people layouts. So the people out yeah.

A

Waiting doesn't work, you know what I will just be at my web part and just mess up with something, but.

A

Okay, okay, so the people layout basically is all the same. We use the personal code for official fabric and, like the tile layout, you can customize the display so first option simple ocean is the size of the the personal photo logic and so on and I can also manage the fields so like the tile like the cards, I can choose to display inside the placeholder, so the image first name last name I- can use either the manage property value row value or use an underbar expression. So it works the same way.

A

So I won't use the first name here. So, as you can see, you can customize and customize the display to meet your requirements. So basically it's an easy way to, let's say, build the directory webpart and something based on search.

A

So this is for the for the personal web part. The letters were boys more for developers. It's the debug web part, so the developer part basically allows you to to inspect what variables available are available inside the underbar context. So you have obviously your items, but also all the things you can use inside your templates to the localization values, some context, value and also the rails. One we've added in the last video is the theme properties so for this one I will just show you.

A

The usage of this I will switch back to the simplest, just remove this because I don't need people source yeah. So if I go back to my simple list layout and ICD template, as you can see here, I have a special ccs class using the ten current team value. The time that infirmary so I can use this notation to inject my own, to use it the colors I'm so on inside my uh my template, so I think I use inside the title and so on. I know yeah, that's it.

A

So it means when you something like this. As you can see, it's orange now can change the look here and, let's say hotel.

A

Here so, as you can see, you can control the yeah team, colors and so on inside your in the butt of it. So you can write your own CSS classes and so on. Okay, okay, say! Thank you.

A

Basically, these are the new layouts I didn't talk about how we make them, but as you maybe you you've seen some critical markup here. Let's say: I go to the document curl. If I inspect this, as you can see, there are some specials elements, HTML elements here you have a document car with some attributes and so on. So the way we've built it is we used web components to make the link between endl bars and react, so I would switch to the code to explain you a little bit more.

A

We did this, so we have a couple of components: different ear and a company a web component. Basically, we can use custom elements markup to inject your component insider inch, tml page. Basically, so what we've done is just write. Some custom HTML element components. So when you work with web components, for instance in third people, you have to extend the HTML element, plus we've built a custom custom way to pass parameters to your custom elements, HTML custom elements to react control, so we use a special notation to camelcase to pass the attributes inside.

A

We are component and basically a web component inside the solution is just a wrapper around a react component. So if I take the document card, as you can see, it's very simple I just booked my react: control inside the web component, dom node. So it's very simple and I just inject custom element- attributes react props, so very, very simple, and this way I can write. My components react component to basic as usual. So no problem with this, we defined a couple of components, as you can see here.

A

Also it means you can mix them in your templates, so you can use video cards document cards based on conditions and so on. So this is I think the best of both world to create your custom experience such experience inside inside the modern, such web parts so feel free to expect the code, or we did this in films. You want to write your own web components and make PR.

A

Basically, this we we did it so I think it covers pretty much everything read the documentation. So, like I said, we made a template in markdown file to help you to use these new layouts I think there is also some painting issues, but honestly.

A

But anyway, if you have issues, go to these repositories to show you feedback use this solution, and let me know if you have some question I think I'm done no problem. Okay,.

B

Thank you. Thank you very much Frank. This was a really really cool demo and, let me say the modern search controls in my opinion, are a really great example of what community of force can do and also of what you can do using also the PNP reusable controls, because correct me, if I'm wrong Frank, but under the cover you also use the MP react controls and properly control. So so we are, we are leveraging the community at multiple layers, I would say multiple levels, so really really great stuff. Thank you.