Microsoft 365 Community SharePoint, 11 Feb 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: React web part to group documents based on metadata

Description

For this 14-minute Developer-focused demo, Hugo Bernier delivers a demo on behalf of web part creator João Mendes showing viewers a full-featured web part called List Item Menu which allows developers to dynamically generate a collapsible menu of items pulled from a list or a document library, as an alternative to hard-coding menus. Items show within expandable and collapsible menus, grouped by any document library column. The web part works in SharePoint and Microsoft Teams and supports section theme colors. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on February 11, 2021.

Demo presenter: Hugo Bernier (Tahoe Ninjas) | @bernierh

Sample creator: João Mendes | @joaojmendes

Supporting materials:
• Repo - List Items Menu | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-list-items-menu
• Samples Gallery - Samples by JavaScript Framework | https://aka.ms/spfx-webparts

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Thanks everyone, my name is hugo bernier. I actually curate the spf example repositories and today I'll actually be presenting a new web part on behalf of joao mendez uh who's on the call right now and he's actually going to be helping with in the chat with questions.

A

But joao is one probably one of the most prolific uh contributors to the spfx webpart sample repositories. Dual is the senior microsoft, 365, architect, solution developer and he typically builds really useful web parts that look good and that are usually ready to use, even though they're just intended to be a sample. They're, usually ready for you to use the web part that I'm showing you today is called list item menu webpart, and it does exactly what the name says.

A

It allows you to build menu items that are delivered from lists and documents and like most of schwa's web parts. The web part supports. You know, theme background support, uh it actually works inside of teams and lots of other cool functionality.

A

But let's not talk about it. Let's demo, something all right, so this is actually a page that is coming from the sharepoint lookbook. If you haven't used the sharepoint lookbook, I strongly recommend it. I think it's uh lookbook.microsoft.com and it allows you to provision really cool professionally designed pages in sharepoint with some sample content. This is one of the ones that I believe this is the hr one and you see there's lots of cool content. One of the things that it has in the web. Part itself is something like this.

A

That says: oh here's, some links to benefits, here's some links to career, here's, some tools and things like that and as cool as this looks, these links are all manually, curated right, they're, not directly connected to a document. If you want to point to a document, then you have to actually create the link yourself. However, zhao actually came up with a web part that takes care of this.

A

So if you go to my library's behind the scene here, I have a hr policy library that I created and uh let's click on it, and I created three documents here: transitioning to work, travel policy and work from home policy, and I also created a category that allows me to group these documents.

A

I also created another library called recruitment where I put some samples like long resume. Template short resume, template standard application, template centered offer, and then, if I go to a blank page here- and I just kind of edit the page and hopefully if the demo gods are with me here, I should find zhao's web part.

A

This menu documents. There you go and again like most web parts of dual builds, the the start. Experience is always great, it doesn't start broken. It actually tries to suggest something for you, but if I click on edit and I say, select the document, library and I'll just say- select hr policies here.

A

And I want to group by category.

A

And if I click apply, what we should do, what we should see is automatically. I now have kind of a menu that gets built that automatically creates the list of documents that are available from that library. So I'll just do another example of this super quickly and then we'll go back to showing the code uh list. My new document, I'll click on a different library here, which one was the other one, that I said, recruitment, recruitment.

A

It works better when you spell right and category, and so it's actually finding the documents group by category and again, oh, I didn't uh there, you go and again. If we go back to these documents that I had created, you see all the documents that are listed here are actually the documents that show up in this web part. Now, of course, I'm not a designer. I didn't design a beautiful page like joao did in his in his screenshot, but it's it's a great way to get started by pulling content to directly from a list.

A

So let's look at the code, though so there's a few points of interest in the code and again I could probably talk to death about about the code, but I'm really going to try to focus on the important parts.

A

The first thing to point out is that there is a list items menu web part now, most spfx web part projects consist of or have at least one webpart class, which is responsible for hosting the web parts, chrome and that's kind of that invisible frame around the content and it hosts the property pane it stores and loads. The properties- and it's also responsible for telling things to the content, for example, when the theme of the section changes and that's something I forgot to show you- is that the the web part is section aware.

A

The imports at the top of the class is really what's responsible for telling the web part what kind of functionality we're going to be using. So, for example, here we're importing logic to do the to understand about the read-only theme, the theme provider and also how to handle events like the themes are changing.

A

Another import here, that's very useful is the pnp js library, the pmpjs library. If you haven't used it, you should probably attend the uh the ask me anything session. I don't think we've mentioned it yet, but doesn't ask me anything session about pmpgs right after this call. In this case, what the library will do.

A

Is it's going to be responsible to make it super easy to call sharepoint, apis and or graph apis, and it will take care of things like automatically syntax completion, authentication, batching, caching and all sorts of other things, so we'll use the pfpjs library in in this code. Later and we'll retrieve things like documents and things like that, while we're on the topic of cool pnp libraries, one of the other things that you may notice is that we have a property pane that lists all the fields in the library.

A

As you saw, that's how I picked a category field and another one that selected the the lists, and so those are actually controls that are available to you in the pmp, reusable property control library. Now we could have written our own code to do this and you know overwritten the drag and drop control and retrieved. All the columns in the list showed them in the drop down all that stuff. But why would you do that when you have controls that are already built that have already been tested uh and verified by the community?

A

You know focus on really the the value added activities is really what we're trying to do here.

A

Another control here, that's that's used, is the property field message which allows you to scream at people when there's errors uh in a nice way. Obviously- and we also have the property field spinner, which actually just does this- uh I think the property field spinner is the one that does the please wait. uh So if it's loading and it's actually taking longer, it's able to show a little display message for you again. The whole point is: let's not reinvent the wheel.

A

Let's leverage the logic, that's already built and tested by by other people, so that we can do the cool stuff like the stuff that joao does all right. So now, one of the things that we need to do when we want to use uh ppgas, especially to call sharepoint library, is we just somewhere in the initialize web part?

A

We want to call sp setup and pass the context of the pmpgs, I'm actually kind of nervous to talk about ppgs when I have patrick and julie on the call, so we passed sp setup to set up the call and while we're there, we also grab a pointer to the microsoft graph client so that we can make calls later- and I know I'm going quickly here- I'm trying to to show as much of the code as possible.

A

The other thing that we do is we grab a connection to the theme provider and the theme provider is actually what tells the web part. What theme is currently selected so that, if you change your background, color or you change to dark mode, the web part will be aware of this.

A

There's a call here called uh try get theme which actually tries to get the theme and pass the theme variant to the web part and we create a connection to the theme changed event so that the web part can react when there's a change while we're on the topic of themes, we're also making provision. If we're currently running inside the context of microsoft teams, we grab information about what uh theme color we're using or we pass the default themes.

A

Try saying teams theme three times fast, it's actually quite complicated, all right and then the fun part when we're ready to render the web part. We actually just called the list items menu component and we passed all the information that we need for, for example, the titles list id field name. What variant for the theme we want to use, and so on and so forth everything else when it comes to rendering the web part happens within the components itself again.

A

We always encourage you to try to keep your functionality clear, like that, so that you don't have to touch 17 places. When you change your web part, you can really localize your changes in one place super quickly here. If I go to the list items menu component, you'll see that the this is where all the rendering happens, but one of the things that I should point out is this is actually a react hook.

A

Class, I guess it's a class, yeah and so react hook is a more is a newer approach to actually doing react, components where it allows you to actually kind of create hooks or really function that extend the functionality of a component, and so you can encompass all this function in one place. So, for example, joao here wrapped all the logic to retrieve the list of documents in a library in something that he called use list and then later in the code, joao is able to make calls to the use list hook.

A

For example, get group items get group, headers get field, and so this is great because again all the logic for retrieving that data is in one place and then the rest of the component is responsible for just rendering the results.

A

So the results that got from the list expanding collecting group keeping track of whether a group is expanded or collapsed. It's all mostly straightforward from there. So I'm going to skip the rendering part I'm going to focus on on really the impressive part, which is that use list component use list hook. So the use list hook here is actually again importing the pmpgs library to make it easy to retrieve stuff from sharepoint.

A

And then the use list has, for example, a method called get list columns and what it does is it says: go to the sharepoint current site, get the lists and then get the list that the person had selected by the list id and then get the fields that are not hidden right, hidden equals false.

A

I know it sounds very uh simple when we look at it like this, but that's the whole point of the pmpjs. It allows you to create this kind of code. That's that's using kind of a fluent syntax where you can just say something dot, something dot something, and it's almost like you're writing a sentence more than uh trying to hard code a api call, so we do the same thing for getting the list of fields again.

A

We do the same thing for getting the list of group headers and I'm not spending the time to explain each one of them and we have a big one that is responsible for getting all the group items.

A

Finally, we have one last one that is responsible for getting the lists in the use list component uh useless hook. Sorry, I should say which is responsible for returning all the lists that are available for my site, but, as you can see, all the functionality to retrieve the sharepoint code is really cleanly located in one place.

A

uh You know, I would bet that you could probably copy and paste the useless hook in your projects and you'd be able to leverage it without with very little modifications, and that allows you to really be able to to do some cool stuff again. This was a super quick tour of code. Joao, I believe, is on the call he's able to answer questions I'll also be here to answer calls. The web part is available at ak dot.

A

Ms slash spfx-webparts, just search for joao as an author or look for the react list items menu web part. Thank you xiao for your awesome contribution and thank you everyone for giving me the opportunity to show you some really cool code. I look forward to the next contributions from xiao and everybody else. Thank you. Everyone back to you, patrick awesome stuff. Thank you.

A