Microsoft 365 Community SharePoint, 11 Mar 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: DataTable web part for rendering data from lists with advance features

Description

For this 11-minute Developer-focused demo, Chandani Prajapati and David Warner show off a web part that provides an easy way to render an interactive SharePoint custom list in DataTable view with many configuration options in the property pane. Provides all the important table formatting features like: Search & exclude from search, filter, pagination, column selection, column ordering, alternative row formatting, etc. Export the selected table data to CSV or PDF. Uses PnPjs, React property controls. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on March 11, 2021.

Demo Presenters:
• Chandani Prajapati | @Chandani_SPD
• David Warner | @DavidWarnerII

Supporting materials:
• Repo - SharePoint Framework DataTable web part sample | https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-datatable
• Samples - SharePoint Framework Client-Side Web Part Samples | https://aka.ms/spfx-webparts
• Repository - Reusable React controls for your SharePoint Framework solutions | http://aka.ms/pnp-react-controls

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

Thank you all for joining we're going to talk about spf x data table web part using pnp reusable controls. My name is david warner, I'm co-presenting with john donny prajapati. uh Would you like to introduce yourself john donny,.

B

Yeah sure I am chandi prajapati, I am a serpent developer. I am a blogger and open source contributor, first of all, thanks to pnp community, to give me opportunity to present my demo and many thanks to hugo and david to help me to prepare a demo and yeah. This is my first talk, so I am very excited but a bit nervous over to you, david.

A

Awesome, thank you, and, as mentioned, this is her first demo. In fact, all of our prisoners today are first timers, so we look forward to that and uh john donnie is coming in through the sharing his caring buddy system. So we'll talk a little bit more about that at the end.

A

Today, though, we're going to be focusing on the sample that she created now, it's a data table sample and what it does is it takes in information from lists and libraries and renders them in a very nice configurable way that you can drop as a web part. So it provides important features like search and filter, pagination, column selection, column, ordering exportation, alternative row formatting with background colors and more so many cool features and all of them are configurable.

A

So let's go directly to the demo and see how to take advantage of this particular web part now to set the context. What you're looking at is a list that we've created of pnp community contributors. We've got a few items included here based on their home country, favorite, sport and favorite season.

A

Now we could always, of course, use list formatting for some of this stuff, but we might want to drop it on the web part in an interactive way. So I'll go over to a page and I'll edit. That page and we've already got the web part loaded. So I'll just do a search on data table.

A

We see it's here. First thing is we're given the opportunity to configure the web part, so we'll click configure and we see immediately we're provided with a number of options to a number of options to configure our web part, first of which, of course, is scoping to the list that we would like to include. The next is selecting the information that we would like to have displayed so we'll go ahead and include everything, the actual title and or community contributor, favorite sports seasoned home country.

A

We're then able to turn on and off sorting, so we're going to be able to sort on sport and season. We'll include those two. You see that when I hover over sport in season after selecting them, I can sort on them. So that is something that you can include. We can also enable search, so we can define exactly what we want to be included inside of our search. So we can exclude things if we only want to scope to a certain data piece of our list.

A

We can include that so once again, we'll include favorite sport and favorite season. As we move to the second page, we've got additional opportunities for configurability. We can enable exportation to csv or pdf. So we'll talk a little bit more about that and of course we can do pagination, which is very cool. We see the different row options down here, so we'll take a look at that as well and we can define the order in which our items are showing up in our data table here. So we can.

A

We can click to move sport up to the beginning or we can actually drag and drop as well. So if I was to do that, then we'll see that show we'll see that show up and if I turn off and on pagination, we see that occurs as well. So we see now sport is showing at the beginning. We can also set the colors. So if I wanted to change like the background color, of course you know me I'm going to go with a light purple and then perhaps a light orange.

A

If I wanted to get a little bit more branded here with my website, so we have a lot of configurability now you may be thinking this isn't matching exactly to the the brand that we typically see within uh sharepoint out of the box, um and that is something that john donne is working on. We're going to be setting this up to be more comparable to the look and feel of of standard sharepoint. So it looks a little bit more natural, but a lot of very powerful features.

A

So I will just republish here and we'll take a look at how some of that works.

A

So now we had turned on the ability to sort by season, so we can see I can now sort by season or I can sort by sport for example. So when we look at season, we look at hugo. His favorite season is popcorn seasoning, so he said his favorite sport is cycling and he said that means cycling on and off his computer, but we're able to search right. So I can say popcorn and now I am able to see that uh and it defilters to just that item. I can also include the rows right.

A

So if I include 10, then we've got six total items. So if I just wanted to paginate to the sixth, I can do that now. I can also export via pdf, so I'm going to click on that and open up and we'll see. Everything is included there for us right. So everything that we included, but what's really cool, is if I just said, I only want to see pop corner. I only want to see the matches for pop, which is hugo's popcorn favorite season, and then I export again.

A

Then the exportation only includes the items that were actually filtered. So that's a pretty cool feature too, because if you're only looking to include the information that matches your search, then you're able to do that. Alternatively, if I went to all and included all and exported, then we do get all of the items we see. All six items are showing up there. So chandani has done a fantastic job here. The capabilities here are open to extensibility, so there's always options to include additional features and because it is open source.

A

So I'm going to go back to the slides and we're going to hand the mic over to john denis to walk us through the code. John.

B

Yeah sure so, let's.

A

B

With the folder structure of the our react data table, so first one is the react. Data table web.ts file. So in this file I have added all the configuration for the webpad property, and uh from here we will pass the property to our iprofs to render the data in the main component. Now next file is the reactdatatable.tsx.

B

So this is the main parent component so in which we will render the our data, and next one is the service file so service file. In this service file. I have used the pnpjs to pnpgs for all the api communication, like the get fields, get list items and all then next one is the common folder. So in a common folder there are three child components, so I have modulized the code in the different different folder. So first one is the export list item to csa.

B

Second, one is export list item to pdf and third, one is the pagination. uh Next is uh react. Data table webpart.ts file, so yeah first method is create property, pan configuration.

B

So in this pro method I have divided all the property and configuration in different different groups like a list configuration and another one, is the searching and sorting configuration and like advanced features and all so. First one is the list configuration so in list configuration there are three properties. Well, first, one is webpad title. Second, one is the list picker and third, one is the uh fill pic fills for the particular list so for real data table webpart.ts render method.

B

So in render method, I have passed all the properties and I have call get selected list fields. So in this method I am getting all the fields of the selected list. Now react. Data table vapor.tsx file, so in this first one is. The component did mount method, so the this method will call when our webpart will render. So in this I have called the get selected list item method. So in get select a list item method, I am calling a service to get the list item based on selection of list and fields.

B

And after that I have mapped this data in the table container format which I need for that, and then I have set this data in the state and second, one is the render method yeah so in this is the main part of the our component, so in in this method, our webpart will be rendered. So first one is the placeholder.

B

So when initially we will add our web part it will, uh it will show the placeholder to edit the property bank configuration so after property pen configuration. Second one is the enable download as csv component. So this is the child component, and here all are the configurable. If user want to so this button enable downloaded csv, then user have to uh turn on from the property contract configuration, and here I have passed all the properties are dynamic, so same as a same feature as a download.

B

Sp, pdf and yeah main main part is a table container. Here it is divided into three parts. First, one is table heading. Second, one is staple body and third, one is table pagination, so in table heading a data will be sold. The data will be coming from the selection of fields and here also have a sorting functionality. If user will select from property pan configuration if he needs sorting and for the particular field, then sorting icon will show. I will visit on the particular fields, then table body in table body.

B

All the data will render from the list items and yeah here, one background, color property and it is dependent on the our property and configuration of the odd color and even color, so it will be set based on this. Based on that and third one is the pagination so in table there is a pagination component and, and this pagination component will be rendered in the table footer.

B

So that's all from my side back to you, david.

A

Awesome, thank you, john darling, all right. Well, we hope you enjoyed that. We wanted to highlight, though, that uh this was an opportunity for chandan. She was nervous. She didn't want to do it by herself in terms of the presentation, but this is a feature that's available via sharing is carrying the buddy system, so we invite everyone to take advantage. We would love to see your demos.

A

We would love to see you present and sometimes it's a little easier to do when you're able to present with someone that you're comfortable with so please take advantage of this. We would love to help you be more involved. If that's something you would like to do on that we'd like to thank you, the link is here available. All the spfx samples, the spfx reacts controls and the specific link to the sample is available. There, we'll put it in the chat, patrick back to you great stuff, very cool, clean implementation.

A