Microsoft 365 Community Community Demos, 10 Feb 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Document Links Accordion SPFx Web Part

Description

In this 9-minute developer-focused demo, David Warner takes information from a list or library, grouped by metadata and displays it in an interactive way. Resources used in the web part created by João Mendes includes PnP React Controls (Accordion, Carousel, File Picker…) and PnPjs (Fluent API, Batching, Caching…). Configure the web part – select library, content type… Simple, elegant, native appearing UI. Desktop and mobile experiences. Powerful as web part reuses existing controls to accelerate development and benefits community when shared. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on February 10, 2022.

Demo Presenters:
• David Warner II (Catapult Systems) | @DavidWarnerII
• João Mendes (Valo) | @joaojmendes

Supporting materials:
• Sample - Documents Links Accordion | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-document-links-accordion
• Tools - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react
• Tools – PnP/PnPjs – https://aka.ms/pnpjs

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

My name is david warner, uh but I am presenting today on behalf of joao mendez. He has created an excellent sample that is going to provide a number of benefits, opportunities and ways in which we can see how we can utilize a number of resources that are available to us today, and we want to highlight and really celebrate everyone. That's doing the great work, and so zhao has allowed me to kind of do that for him today. Now the document links accordion. Let's take a quick look at what that looks like uh it's.

A

It's going to take information from a library, obviously we're looking at documents and it's going to allow us to group them together by way of either metadata around the list or the library and display it in an interactive way. Now you may say this looks a lot like list formatting and that's true.

A

It does uh he's actually gone to some great lengths to make it look a little more natural, but there's benefits in this in using the spfx web parts and the resources that he has decided to use, and so we're going to take a look at that. We can see that we're able to utilize that information, so everything gets condensed down nicely.

A

We see that we're able to utilize the iconography to identify. We see the view all there as well, and so, let's take a look at what he decided to utilize from a resources perspective.

A

The first thing is the pmp react controls we saw those mentioned on the call earlier uh they are controls that are already pre-built for you, whether it be the the presentation layer, as we will see today, with the accordion control or perhaps the property control which he is also using, but we won't highlight as much today pre-built components that are available for you to take advantage of to not reinvent the wheel and we'll talk more about that as well he's also using pnpjs.

A

Now I know this is near and dear to most of our hearts and I say most because there are new ones in the community all the time, and once you learn about it, you will absolutely love it. uh It provides a fluent api to connecting to sharepoint. It allows you to do batching and caching. It is absolutely bar. None.

A

The best way to interact with data and again so much effort has been put into these resources for you to take advantage of to accelerate your ability to develop amazing and great things, and that's really what xiao has showcased today. uh The simplicity is, is the magic here around this particular uh sample.

A

So let's take a a look at the demo of of how it is used, so we're going to edit our web part we're going to actually edit our page and we're going to throw the web part look for the accordion and throw it onto our page, and this is also by the way the configure document links coding web part. That is also a react control that we'll see that you can take advantage of that kind of lets. Everyone know when the page loads, hey something has to happen.

A

You need to go edit, the web part to configure it so they're, not just left unknown, not sure what to do next right. It provides guidance so we're going to edit that web part we've got the title. There then we're able to select the document library that we're going to take advantage of so I've got media some books and some movies stored into a document library, and then we've got all the fields that we can group by.

A

So maybe the most popular to start with is is type so we're going to select type we're going to apply that and we're going to see that it now tells us the file type. So we see that there's mp4s videos, we see that there's pdfs. We see that it's ordered by alphanumeric, and then we see the identification clearly of the iconography. That shows that it's it's you know closed, not open. There might be a better opportunity because we have extra metadata that we could always use. So I've created a media type.

A

That's a little bit more human-readable right, not everyone's going to know what an mp4 is or a pdf. So I'm going to apply that and now you see it's a little more uh self-explanatory book, video right. So now I can understand the groupings a little bit better. So if I expand that we see that simple experience uh and if we look at the information we see that it still orders uh by alpha numeric we've got some amazing stuff here to read: cooking with code recipes by chef, hugo tales of herreric hairs, memoirs, patrick rogers.

A

We see our videos power, wrapping the sweet beast with april dunham and, of course the equestrian expose the unauthorized story of warrior horses. So you can see it's simple, but it's very powerful in being able to display information rapidly. Also again that view all which kind of gives that sense of hey, this is gonna match the other components that are available to you and that you have access to.

A

We throw it into an emulation of a mobile experience and we see it works just the same as we would expect all of our out-of-the-box components to do this. Matches that experience as well and we see back to normal, it looks great and everything is good. Now, again, the simplicity is the magic here really.

A

So, let's take a look at the code and we'll see that there's there's really some basic information here, but what we're going to highlight we're not going to go too deep into the code, but what we're going to highlight is is where he utilized the resources that really make it easy. So we see here he's importing the accessible accordion from the react.

A

Controls he's importing the placeholder and what this allowed jiao to do is to quickly and rapidly deploy a functionality without having to reinvent the wheel without having to spend a bunch of time and we'll talk a little bit more about that in a moment recreating what others have already done, and so you may say how many lines of code does it take to create something like this when you're able to leverage all of the great work from the community?

A

Well, good thing you asked 357 lines of code is what was written here and that's with everything broken out right. If you were to to sort of minify this a little bit, you might have less, so it really uh exemplifies how you can take advantage of the resources that are available to accelerate. So what are some of the benefits uh that we gain by utilizing and looking at samples like this?

A

Well, the first is reuse right. We talked about time being money, don't reinvent the wheel. These resources have been curated and updated and upgraded, and all that good stuff to make them constantly available for the newest version of sharepoint and the m365 tenancy so use it. Don't spend your time reinventing that wheel, reinventing that cog when you've got so much availability and they're extensible. It's not like you get what you get and you don't throw a fit. All these things are open source, so you're able to extend them.

A

If you want and guess what once you've extended them, you can contribute back. So it's a great great benefit. Samples like this are also fantastic to learn right. So what zhao has provided is he's taken, a number of open source resources and tools. Pnpjs react, controls, property controls and he showed how to use them together, and then he didn't just say: oh I've learned that cool he's actually shared it with everyone else, and so this is a great opportunity to use that and learn from it.

A

The next benefit is, you could use this as an accelerator right. So while it may look like well, there's not a whole lot going on here, but but again that's the magic is it gives you a baseline here to create more and add more to it. Perhaps you wanted to add the ability to maybe hover over that and have an adaptive card uh when you hover over the document, and it shows a little preview of it.

A

So part of the work has already been done for you, so these are fantastic opportunities or excuse me benefits for you to utilize a lot of these samples that are that are done this one specifically by zhao.

A

What are the opportunities for us then, when we think about creating, maybe our own samples matching what zhao has done well, the first opportunity is obviously you're able to share and we want you to share. You have created great things and you may even have created something and said it I liked it. I learned from it, but it's so simple, I'm afraid that it might be too simple to share in the community.

A

Please please, please, don't ever think that what zhao has created here is a fantastic tool from many perspectives, and we know you have them too. So, please don't hesitate to share. Please don't ever think that what you've created is not shareable absolutely is, and we encourage you, but, as mentioned earlier, we understand that there may be some nervousness around that. Maybe you've not done that. Yet maybe you've not submitted a sample, maybe you've not worked with github. Well again, sharing is caring.

A

Is that program we mentioned earlier that provides hands-on sessions and contribution guidance, and we absolutely are going to help. You contribute the amazing things that you've created and then guess what, once you created them, you're going to want to share them with the world in sessions like this and presentations like this, but you might be a little nervous about that. So we have the buddy system in place and you've seen the buddy system in the past, where we will team up with you and provide assistance in that presentation even present with you or for you.

A

If you want, because we know that what you're creating is fantastic, just like what zhao has created is fantastic. So again, please don't hesitate, reach out get involved. All these urls are open and available for you. These programs are here for you. We want to encourage you to do more and help you do more. Not just tell you, okay, here's how you go. Do it. Let us know when you've done it nope. We want to be there right with you every step of the way so take advantage reach out to myself hugo april.

A

Any member of the pnp team in the sharing is caring team and we would love to help you on behalf of myself and zhao. Thank you all again. You can get the code here at the github link or you can just simply go to aka.ms4 spfx-webparts and you can learn more about those components. You can also go to react components in pmpjs to learn more about those tools and resources as well. So thank you all again, patrick back to you awesome stuff. As always. Thank you, david.