Microsoft 365 Community Community Demos, 2 May 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Enabling any control to be used in the SPFx property pane with a custom solution

Description

In this 18-minute developer-focused demo, Christophe Humbert shows makes it very clear just how you can add any control - HTML, MGT, Northstar, PnP to the Property pane. Get the lay-of-the-land with a Property Pane Portal Architecture drawing. See how controls from library are called into a web part and how the control’s properties are configured in the Property Pane. Install npm property pane host and portal. Create portal - ReactDOM.createPortal(child, container). Push child (control) to container (Property pane). This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on April 7, 2022.

Demo Presenter
• Christophe Humbert | @Path2SharePoint

Supporting materials
• Tool - NPM packages (property-pane-portal, property-pane-wrap) | https://www.npmjs.com/~pathtosharepoint
• Sample - Property Pane Portal PnP Controls | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-ppp-pnp-controls
• Library - @fluentui/react-northstar | aka.ms/fluent-ui
• Controls - Reusable React controls for your SharePoint Framework solutions |
aka.ms/pnp-react-controls
• Tools - Microsoft Graph Toolkit Playground | https://mgt.dev

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

Hello, my name is christoph: I am an applications architect at the flow firm, headquartered in seattle and called davis wright tremaine, and today I'm going to talk about uh the specifics property paints or what you called earlier, the edit pane in in the sharepoint web parts and uh how like I combined it and made it work with react portal.

A

So a few words about my recently published solutions. I've been working with sharepoint, so I started working with sharepoint in april of 2004.

A

I've released a number of solutions over the years, but more on my personal blog or my personal stuff, and this year I've done more heavy contributions to the community, and so this is a short list of what I've done and in particular that was also 2022 was my first year to start publishing, known modules. So today the ones we're going to focus on are the property paying portal. So this is a node module that you're going to install through an npm install and then the sample. The related sample that you can find on.

A

Pnp is react ppp and then whatever, because it's supposed to be a series of different controls. I'm going to showcase so right now, there's one, but that's supposed to more is supposed to come in in the future.

A

I'm mentioning also some other words here, because it's kind of related to what I'm presenting today and uh I think it's worth taking a look so the property pain, wrap, is another solution that is supposed to help the property pane, and I'm also listing here. The cherry picked content web part because it's also a solution that is using the portal so other stuff to explore if you're, if you're interested okay, so the objective for today property paid portal, so we are looking at the right hand side of this web bar.

A

So it's the one that you trigger when you click on this little pen here in the top left and it's going to open the property pane and what the property pane is. Is that configuration form that allows you to enter specific values, specific parameters that are going to uh to customize your web parts? So in my screenshot here, for example, I have picked san diego did I mention um out of san diego, a nice reminder here, and uh so I picked the location and this is rendered here.

A

So I chose to render it as a map, so here in the in the main weapon.

A

So the objective here is to create those custom controls, and uh the idea here with the property plane portal is that you can add as many controls any kind of control you want from any kind of library you can insert them in in the property pane.

A

So if we take a closer look at the the code on here, on the left hand, hand side, you can see an example of a property pane with some controls, description, slider, checkbox drop down, so I would say some standard controls and if you look at the code in spfx, this is what it looks like on the right.

A

So uh it could be a little bit surprising at first, but spfx is not using directly elements or react components. It uses this. These wrapper functions so a kind. I would say it's a kind of flow code here, we're having in the property pane where uh the sharpened framework offers this wrapper function. That takes care of all you know. Everything that's happening behind the scene and all you have to do is uh include the json to configure the the control.

A

So this is very convenient, very, very easy to use. The issue is what, if you want to insert a control that is not covered by the out-of-the-box functions? So that's one of the questions here. Other question is what, if you want some interaction between the controls, so, for example, you have a cascading dropdown, you want to select a site and then you need to select a list in the site or you want to select country, and then you want to select a city in that country.

A

So all of this is not covered by these out-of-the-box functions. What you can do so, what microsoft offers you is to create custom controls. So you have all this extensibility model that is available within the property pane. Simply if you start using it you're going to see that it's not very straightforward. It takes some time to get into it so, uh and uh maybe I'd be interested. uh You know uh for for you listening to this presentation, I'd be interested to hear how you you deal with that.

A

So how, when you have to a need for custom controls, how do you insert them? How do you build them and have them in the property page here? I just mentioned that uh on pnp, and it was mentioned a little bit earlier in the call uh a new release in pnp. We have those two packages. We have the reusable react, controls that go in the main panel of the sharpened framework, and then we have dedicated property paint controls that are supposed to go in the property.

A

So that's currently, I think I would say probably the best solution. I've seen around the issue here is that uh so you're going to use the ones on the right to uh to build your property pain. The issue is that you're limited to the one that are made available by the library and the other issue is that maybe you already have your own set of your own library, your own set of controls, and these are the ones that you would like to use. So that's what I'm going to to demonstrate today.

A

It's how you can use any controls you already have, and you can push them uh to to the property pane you're not limited to this, this set of out out-of-the-box controls or the property paying controls from uh from this package. So what I'm going to do as an just as an exercise?

A

What I'm going to do today is instead of using the package on the right, which is the one you're supposed to do when you do property, paying, I'm actually going to take the controls from the package on the left and insert it in the property pane just as a demo that you don't need those uh those specific property paying controls.

A

Okay, so it seems that it's demo time. Let me try and switch to my demo here, okay, so so this is my demo. This is the code part, and so hopefully we will have some time to get back to uh to it, but for now let me go to the workbench here and I have already started this- this demo, this web parts, so I'm going to click here on on the little pen and I'm opening the property playing controls, uh I'm here in in light mode.

A

uh I have the same day when in dark mode works too. Okay. So what you see here, I have uh four. I have created four pages for this specific demo. uh First page, I have the pnp controls, so those are the ones we just talked about another ones on the left of the right. We are using the ones on the left.

A

I have also regular html controls. So this is a big evolution. We've seen last year that now that we're not supporting internet explorer anymore or legacy edge, we can start using those directly. Instead of going to a library, we can start using directly the html5 controls here uh in well in our solutions and in particular in the property page. So that's exactly what I have here.

A

Let me do a demo where I'm here so, for example, I'm going to pick a start date of april 11th here and then I'm going to pick an end date and you see that uh all the dates before april 11th have been disabled. I'm just using the uh here are the capabilities of html5 controls, and I'm going to pick this one. So again here you just have out of the box. Html controls.

A

Okay, I'm going just to play with the toggle here, which is uh well a little bit more advanced customization, but still out of the box. Html controls, okay, another one, uh the microsoft graph toolkit, so microsoft toolkit has a number of controllers, and I can use them here directly. So I'm going to type.

A

Have some very famous people in my team here: uh let's start patty and okay and uh well it's not spectacular here, but you can see that the web part has been updated with the value okay and the last one I have. I have uh this fluent uh ui example. So that's actually the one that with which I started, because I was creating uh solution for appsource and I used a north star functional star at the time.

A

So this is, let me just play with color picker here so again here, I'm just going to the fluent ui north star page and doing a copy paste and the contour is working here and let me move back to my presentation.

A

Okay, so let's take a look now at the code, so a few words about portals. I I put a general definition here: a technique to transport to a distant seemingly inaccessible place. In our case, we are uh in the context of react and uh ui libraries like react and view have such capabilities, and so you can see just a very simple sample here.

A

It comes from react, dom create portal of child container and what it does. It allows you to take that child that may reside in one place of the dom and transport it to the container.

A

So this is a technique that is uh used in general for tooltips and panels. That kind of thing. The idea is that you don't necessarily have full control of the container. So this what it allows you to do is have a child in your own branch. In your own tree of the dom, where you have full control so you're going to apply, you can apply context, you can apply a theme you can apply.

A

Maybe some uh manage some state and then just display it in its container and in our case the container is going to be the property pane.

A

So the idea is we might we manage the child wherever we want and then, when it's ready, we push it to the container and the container is going to have so we're talking about the gateway that is, allow us going to allow us to go to go to the container and the container is going to have a beacon that identifies the proper location where the control or the set of controls are supposed to land.

A

Okay. So uh in terms of architecture, this is what it's going to look like and here so I'm going to just look at this column here, the property pane. So this is where you would have the built-in controls I showed earlier. So it's going to be property paint text, for example those controls made available by spfx.

A

But in addition to that, I will have that custom control that is going to serve as a beacon and it's going to be the same. Real, reusable control, host that we're going to put wherever we need it, and then we are managing in a separate place here that is going to be more of the body of the web part. We are managing these controls that can come from different uh controls. Libraries- and this is what the portal is going to do. It's that those yellow arrows that you see here.

A

This is going to transport your controls in place in the property plane, okay in terms of installation. So again this is a node module, so you're going to install it. You would provision your sharepoint framework web part and then install property paying portal, and then we are going to have as part of this module two components available: you're going to have the property pane host that is going to go in in the property pane. That is going to be that bacon.

A

I was talking about uh for the recipient recipe under the control and then uh in the web part body itself we're going to have that gateway, so property, paying portal component. That is going to take care of sending the uh the controls to the right place so uh uh in in the in the interest of time. I'm just going to stick to to the slides here, not show the the actual code, but it's supposed to look the same.

A

So uh this is what it would look like in the property pane, so you would have property paying post. That is just the generic control. You see here that I am trying to implement four different controls from mgt person, people, picker group picker, the team speaker and so the only property, and I need to pass to that control to that generic control is the context of the web part. So what it really needs is just the id the instance id of the web part.

A

I'm compressing the whole context, because it's kind of simpler, but this is the only thing you have to do so, the name of the property and then the context in the property plane host.

A

And now, if I move to the body of the web part, then the body is going to look like that. So saying I have my property paying portal component, which is a react function component.

A

Also, it's going to leverage the context of the web part to be able to talk to the host, and then I just include so within my property paying portal. I just include my controls the same way. I would do it if I was putting them in the body of the web part, so here people picker- I I have so these examples.

A

For example, if you go to mgt dot dev, if you go to a playground of ngt you're going to take those samples- and you could just do a copy paste and put them, make them available in the property pane, the only additional thing you need to do is to add that data property here that is kind of is going to give the control uh or it's going to give the property paying portal the address of the destination.

A

So in, uh let me go back to the previous slide here. I had uh the name of the property in the the property pane, so this is the address the destination and I'm just entering the address, and it's going to go to the right place. Okay, so that's! uh That's it uh a few! Yes, a few! Thank you a few special thanks here to the people who have helped me on the way encouraged me. So uh you recognize your name here on the on the slide.

A

Please try this this property pin portal. It's! uh I would say: it's not, you know the the main, uh the main pass, it's more out of the box uh thinking, so I'd be interested to know how far this can go.

A

Okay, thank you and back to you, patrick, all, right great stuff.