Microsoft 365 Community Community Demos, 22 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Accelerate SPFx development with reusable open-source controls

Description

In this 12-minute developer-focused demo, Alex Terentiev delivers an overview on available PnP React controls and Property pane controls you can leverage in your SPFx solutions. The assignment: Create a carousel web part that will display images stored in a document library. The web part should work on site across tenant. A complex endeavor if starting from ground zero. See how controls (WebPartTitle, TreeView and Carousel) are plugged into a web part delivering a native experience in short order. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on September 22, 2022.

Demo Presenter
• Alex Terentiev (Microsoft) | @alexaterentiev

Supporting materials
• Tools - Reusable React controls for your SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-controls-react/
• Tools - Reusable property pane controls for the SharePoint Framework solutions | https://pnp.github.io/sp-dev-fx-property-controls

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

A

This small session is about like intro to PNP reusable control, so who is not familiar with those? We have kind of two flavors of reusable controls that you can use free of charge in your Solutions. One is the react controls. This is the set of controls that can be used in your in, let's say, main body of your web part or in SharePoint framework extensions, and the second type of controls we have is the reusable property pane controls that can be used in property panes for either web parts or adaptive cards extensions as well.

A

So the main idea of these controls is you don't need to think about the kind of UI and some basic regular operations related to SharePoint, for example, like many still Solutions need controls that will communicate with the SharePoint to request sites and display some site, picker, Or, List, picker, or maybe details list or something like that. So, instead of each time implementing these controls and your Solutions, you can just reference our modules. These are npm modules and reuse, these controls and your Solutions.

A

So we have pretty neat documentation for both the spfx property controls and spfx react controls. If you go to the docs, you can go to control sections in the menu, and you will see that we have huge huge number of different controls that you can use in your applications. Some of those can be pretty easy. One, for example, webpart title.

A

It just provides you like small text area where you can kind of set your title and if you are in read mode, this will display in the similar way to out of the box web Parts, but we also have some pretty complicated, pretty complex components as well. For example, uh Tree View that you can use to display different trees in your components. We have different types of charts. We have Carousel as well that I'll be demon uh today, so many many many components that you can use in your webparts and extensions same for property controls.

A

Again. If you go to controls, you will see that you have lots of controls in there and, to be honest, most of them are pretty similar to what you have in react: control, sweeper. The difference is in implementation, so property pain is a bit different from kind of standard react control.

A

You still can use react controls in your property controls bodies, but you should have some additional implementations, let's say, contract that can be used by spfx core to understand how to render your control, how to pass properties to your controls and how to react on the changes in your properties.

A

So this kind of eat from like documentation perspective from a definition of what are these controls and let's actually go to the actual demo and code, how you can use the uh components and controls. So, uh let's imagine that you need to develop a web part that will display a carousel of images that are stored in some document library, on your talent and it should be pretty flexible. So it's not tied to one specific site or one specific document Library.

A

uh The author of the page should be able to select the site and the document library from where you need to grab these uh pictures and display it as a carousel control. So if you start thinking about implementing all of that from scratch, it will be pretty complex tasks, so you will need to have some site picker and document Library picker to understand where you should request data from then you need to request these data, these pictures, and then you will also need to implement the carousel control with the standard.

A

Carousel features like animation to slide back and forth, probably some additional functionality to display some additional content on Hover and so on so forth. So, and let me actually show you what I'm talking about so I. Have this PNP Carousel control on here. You can provide some title hello world, as you can see right now. Our web art is not configured so I click on configure we go to the property. Pane I can select some site. We have a beautiful searching here when the site is selected.

A

My select document Library component is enabled and I can select a the document library from here, and this is the document Library picker, so it doesn't show you any additional list on the same side and as soon as I select the uh document library from here I can see the carousel, so it has some additional functionality on Hover, so it provides some additional text and it has buttons to go back and forth from one slide to another and if I go to the preview mode, it also works in the same way.

A

You see the title: you see the carousel, you see the automatic animation everything that you can expect from this kind of control and from the data perspective in this Carousel document Library we have the image we have some title. We have some description and URL, so nothing specific, nothing unique from like control perspective, just standard metadata that you can have in your document Library.

A

So again, if you start developing this control from scratch, it might take you a while to develop all these kind of UI all these requests that you need to do, but if you're using PNP controls, it's pretty easy and let me actually show you the code.

A

So this is our web part pretty standard one. If you look at this one, uh we have few properties to store like sites, let's selected list, ID or document library and title. Our render method is pretty small, so here we just have. We are creating the PNP Carousel. It's our custom react component. We are providing some properties and I'll go back to that and the interesting part here is property, paying configuration.

A

As you saw, we have a site picker and also a list picker in our property pane, but we don't actually need to develop anything custom. We just call property field, site, picker and property field list picker. These two functions are imported from spfx property controls and you just need to pass some standard properties like context properties, your label, what should happen when the property has changed and some additional configuration like what are initial size for you, you. This is, for example, the filter to display only a document Library.

A

So you can select the base template for the list and that's it your property pane is configured. You don't need to do anything else. Now, let's go to our react component. That we have PNP Carousel again here, it's pretty standard.

A

The only actual logic that we have in here is this dot get images, and let me go to this one first in this got get images we are checking if site URL property is set if list ID is set, and we are doing just one rest: API request to SharePoint to collect our documents, our pictures from the document library and after that we are just kind of massaging these data to create I, Carousel image interfaces or instances that will can be passed to a carousel control.

A

And now, let's go to our render method, to show what's happening in here and again, the render is pretty small. First here we have this Vapor title that is imported from PNP react controls. So again you don't need to implement any logic like hey in edit mode. You need to display a text area and in read mode you just need to display the text itself with the specific styling. Everything is done for you in the control itself. You don't need to do anything if we don't have list ID inside URL.

A

So this is the situation where, when your web part is not configured yet again, we are using placeholder component from the Imperial controls library and it will display this beautiful kind of placeholder for you with a button that can open the property Pane and then, if actually your web art is configured, we are displaying the main content and in the main content again it just practically one component, one control here: Carousel in Carousel, you're providing element, it's pretty flexible property you can provide either your own GSX elements react components in there or you can provide the IQ cell image props components in that case, Carousel itself will be rendering like a standard UI for each and every uh slide, or you can also provide just single react component.

A

In that case, you will need to implement on move next clicked and on move prep, clicked in that case, you'll. Just replace this react components, and with this flexibility you can basically have not even images in your Carousel, but instead of that, you can provide some rich UI or some text or whatever you want, and each slide can be actually different again. You're just providing few properties in there. How exactly you want your Carousel to behave where you want your buttons, how you want these buttons to be displayed some additional styling for the control?

A

uh If you want uh infinite Loop of your animation or no and that's basically it you don't need to do anything else again. If you're thinking about like implementing everything from scratch, it can easily take you a day or two to implement all this stuff. But here we have kind of like 100 lines of code. In our component. We have additional like 80 lines of code in our web property uh web art. Sorry, and at the end we have this beautiful control and we also have the configuration ready for it as well.

A

So this is the main power of the reusable controls you can kind of think about. Your business needs about implementation of your specific scenarios and don't care too much about the UI and about the standard operations with the SharePoint. If you are using a PNP, reusable controls, your controls will behave similarly to out of the box UI in SharePoint and we'll provide you a lot of functionality that you don't need to implement each and every time in your custom. Solutions and that's all I have.

B

Fantastic great demo, Alex yep PMP, reusable controls, great way of accelerating your SharePoint framework development, and you know, give yourself a jump start as well. Having used them myself in the past, I know how fantastic they are. So, if you've, yet to use one of the reusable controls. I, definitely encourage you to check out the repository check out the documentation and and give them a try.

A