Microsoft 365 Community Community Demos, 13 Jan 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint Framework Design Patterns – Custom Web Part Properties (Part 3)

Description

In this 13-minute developer-focused demo regarding web part properties and property panes, Hugo Bernier explains that having a configurable property pane allows you to go from a single-use to a multi-use component with many variations while using same code! The Quick links web part for example can look very different by changing layout properties - just rendering differences. Demo focuses on modifications to the getPropertyPaneConfiguration( ) method that contains pages, groups and fields. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 13, 2021.

Demo Presenter: Hugo Bernier (Microsoft) | @bernierh

Supporting materials:
• Documentation - Use the Quick Links web part | https://support.microsoft.com/office/use-the-quick-links-web-part-e1df7561-209d-4362-96d4-469f85ab2a82#:~:text=Add%20the%20Quick%20links%20web%20part%201%20If,button%20to%20set%20your%20options%3A%20More%20items...%20
• Documentation - Make your SharePoint client-side web part configurable | https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/basics/integrate-with-property-pane
• Documentation - Integrate web part properties with SharePoint |
https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/integrate-web-part-properties-with-sharepoint

Previous demos from Hugo Bernier (Microsoft) | @bernierh, on SPFx Design Patterns series
• SPFx Design Patterns – Custom Properties (Part 2) – 30 December
• SPFx Design Patterns – Custom Properties (Part 1) – 4 November
• SPFx Design Patterns – Property Panes - 21 October

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

So this series it's about, we call them the spf x design pattern. The whole idea here is: how can we make every single developer a designer and or maybe the better way to say it is? How can we make every single developer, whether they're building solutions for web parts, teams, apps or viva connections?

A

How can they do it and they look awesome without having to be a designer right and that's really what these sessions are about? So, yes, we do talk about some of the code, but you also talk about some of the design ideas behind the scenes. So this is the third session that we've done about custom properties and we'll talk a little bit more about it.

A

My name is hugo bernier, I'm a cloud solution, architect, I'm also the world's laziest developer and some things that I'll show you today also, I think, demonstrate some of these lazy concepts all right so like I said this is the third time we've been talking about web part properties and property paints, and you know web part, properties and property. Panes is how you allow your users to configure your web parts.

A

Your team's apps and your viva adaptive carts, but you might be asking well hugo like why are we spending so much time on design patterns for properties and property panes, when most users, who aren't owners or administrators will probably never get to see the property pane? And that's a very good point but think about it?

A

Right properties is really how you can go from designing a single use component to something that is versatile right that can be used in many many scenarios, and this is where the being lazy part pays off, because you can actually use the same code to do a lot of things with a single solution. Let's use an example.

A

Just take the quick links web part, for example, and you can use that same web part by changing a few properties like the layout property. You can use it many different ways. The sharepoint lookbook, which we have examples here, is a great example of using quick links in different ways to achieve different designs. In fact, let me show you: we've got some here and we've got a few more samples here and a few more here right.

A

Lots of variations of the exact same web part with the exact same code, but it just renders it in a different way and it achieves very different, look and feel how to do that behind the scenes. Is you know with uh this configuration option where you can pick the layout and depending on the layout, that you pick, for example, the button layout or the list layout, you see that you get actually different choices, so the button layout has the option to pick what type of icon, but the list layout does not do that.

A

It actually only allows you to pick show descriptions and the icon or the tiles one allows you to pick the size of the icon. So that's interesting, but why would you design a web part property to do that? Remember our friends hike in hyman right? We talked about them a little while ago, their uh psychologists who came up with kind of a they found, a relationship between the number of choices present and a person's reaction time to that given number of choice.

A

So the more things we have to choose from the longer it takes for us to make a decision- it's almost exponential, so when you bombard your users with too many choices at once, they have to take the time and they have to take. You know uh exponentially more time to look at all the choices that are available and giving them more work that they don't want, and that's one of the reasons why people you know if who are not in I t people don't like computers, because computers make them feel stupid.

A

They're, like oh there's, too many choices. All I want is a display list of links right. I don't really want to have to pick 72 choices and that's what we're going to try to talk about today is how can we build these relationships, where I only need to show the number of choices that are relevant to the user at the time that they've selected it? This is a concept in user experience, design, that's called progressive disclosure. We progressively disclose more information or more choices, as the user indicates. They want to see more.

A

Let's, uh let's show you an example of a web part that I built, which should look pretty familiar because it's pretty much an exact copy of the quick links web part right, and I do this- the exact same options that they have uh more or less anyways, and uh you know by the way all this code for all these web parts is going to be.

A

I'm going to merge your pr to put that in the in the sample gallery, so you're going to have all these samples for all the design sessions that we've talked so far. But let's talk about how we do that in code.

A

If you remember correctly in the web part code, we have a method called get property, pane configuration and the get property pane configuration. Its job is to return kind of a object, and I property pane configuration that contains pages and groups and fields.

A

So the first thing is a group called layout options, which is the one that you saw at the top and then what I pass here is I pass a property pane choice group, which is those buttons that you saw and then I just kind of design a button for every choice. Now one thing I want to point out here: uh well, there's a few things I want to point out.

A

The first thing that I should point out is just for legibility: to make it easier to read the code for this demo, I'm using words like compact, film strip grid and so on and so forth. You probably wouldn't want to do that in the code behind the scenes. In fact, if you open the uh the web part, uh sorry what is called the workbench and you drop microsoft's, quick link web part and you look at the show. Data link.

A

It'll actually show you the data that the web part is storing and you'll notice that behind the scenes, they're actually storing numbers, not not words, but again, I didn't want the code to be boring and or more boring than it is right now by having to interpret numbers. So if you see text, just forgive me for, for you know not necessarily being cool about it all right.

A

So what we do is we store an attribute called layout and we make that choice right, but then here's the thing is, we also add all the fields that we needed like, for example, do I show an image in a layout and so on and so forth?

A

We just do one little thing, that's kind of sneaky here we actually do a conditional and method where we say if the layout that's currently selected is the compact layout and then give me a property pane toggle, and we do the same thing for the fumes film strip and we do the same thing for all the other things now. Sometimes we have more complicated uh if conditions right like this one where we do an or right.

A

So if it's a button or list then show the description, otherwise don't show the description and then at the end. um This is what we do here and at the end we get kind of the results we just talked about now. Here's a little problem, though, and there's a few things that you may have noticed from from from this. The first thing take a look at the space that shows up uh see like right there that space- that's not in the original web part.

A

Why is that? Well, I, I kind of think it's it's a bug. Personally, the uh the property pane control tends to render every array item whether the array is empty or not, or the array node is empty or not. It renders it with a space.

A

So the method that I just showed you it works if you have a few choices and it works if it's probably like the last item. But if you don't want that ugly space, um you know we probably have to think of a different approach, and I don't know I always do this david, probably laughing now, because I'm always trying to use the zoom it function to highlight stuff.

A

So this is what the controls are rendered now, if you look at microsoft's version of it where they do the same thing, there's no ugly space and they actually, if you look at the code behind the scenes right, uh if I can show that you'll see that it doesn't have like 72 empty spaces, so how we doing that in code.

A

Well, if you remember again, the get property pin configuration returns, an I property, pin configuration object and normally the way it's done. Is you just do a return call and you pass directly kind of a static.

A

I property pane configuration object, but you could also change your code to say well, I'm going to create a variable called configuration and it's going to be an eye property pane configuration and then I'm going to actually populate it and then I'm going to return that configuration at the end of the function. Essentially I'm doing exactly the same thing that the get property pane configuration method is doing, except that now I can actually do things like manipulate my my groups.

A

So, for example, the first thing I'm going to do before I return that object, I'm going to get the groups and I get the first groups in the uh sorry, the groups in the first page and then I'm going to get in my layout group, which is the first group in that first page and I could have used names. I could have used different approaches like that.

A

You know what I'm doing here is I'm getting that group and now what I can do is. I can actually add my if statements and it's actually a lot cleaner in terms of legibility, because what I can do here is, I can say, look if the layout is compact, I'm going to push right, it's an array of fields, so in typescript you can actually in javascript.

A

You can just do pop and push to modify an array, so I'm just adding my property pane toggle field and then I'm adding my other property pane toggle fields, and then I do the same thing with the film strip and then I return my configuration.

A

So that's a very simple way to actually kind of create one of those um conditional fields and by the way you could do the same thing for condition conditional field groups and see how I don't have that ugly space anymore. So I don't have to lose sleep. I don't have to feel bad because I've told everybody how to add extra faces in their web part panes and that's cool and that's more than likely the same behavior that microsoft is using to render the property property pane all right so next time.

A

Well, what we're going to talk about is we're going to start talking about property, pain, validation because now you're asking people to configure web parts, we should always validate the input again so that people don't feel stupid right. Let's show them hey. You know what uh you selected this option. You should have probably entered a value here or the url you've just entered is invalid.

A

We're also going to take a talk about the property paint controls, the pnp property paint controls and then, at a later session, we're going to show you how to build your own property. Pane controls, we've barely scratched the surface. We haven't even started talking about the content. Part, that's going to be the most awesome part, but that's it for me for today.

A

Thank you. If you have any questions, please don't hesitate to reach out.

B

Awesome, thank you, hugo really, really cool stuff, and those are really. I think these design sessions and discussions are really good because there's a lot of kind of uh inspirational thing as well, so so considerations and you're raising really really great points on the from a thinking perspective. So, let's not just focus on doing things rather focus. Why are we doing things and how we can make it better, which is pretty good? Thank you, hugo. Thank you. Super cool stuff.