Microsoft 365 Community Community Demos, 25 Feb 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SPFx Design Guidance – Property pane input validation and error messages

Description

In this 13-minute developer-focused demo, Hugo Bernier delivers custom properties (part 4). Help users give you the right information for best and most secure user experience. Best error messages are non-dramatic and helpful. Validate inputs using onGetErrorMessage attribute. Avoid throttling issue by not validating user’s every key stroke, give user time to type using deferredValidationTime attribute, then validate. Validation often requires checking on the existence of list or data before validation can occur. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on January 27, 2022.

Demo Presenter: Hugo Bernier (Microsoft) | @bernierh

Supporting materials:
• Documentation - Validate web part property values | https://docs.microsoft.com/sharepoint/dev/spfx/web-parts/guidance/validate-web-part-property-values
• 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
• SharePoint Framework Design Patterns – Custom Web Part Properties (Part 3) – 13 January
• 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

All right, so this is a series on uh design patterns and what we're trying to do is we're trying to make every developer a designer without having to go to design.

A

So it doesn't necessarily mean that we're all going to uh you know do super pretty web parts, but we're definitely going to be focusing on a better user experience and better design patterns. Overall, we've been talking about custom properties. We still have a few things to talk about custom properties and property panes.

A

I can't wait to get to the parts where we talk about the content of the web part itself, but before we do, let's talk about property paints all right, so this is a web part that I've created and what one of the things that I've done in that in that whole solution is something where I validate properties, and so, if we take a look at kind of how this works, you know if I go in, and I start typing here.

A

um If I remove the description, it says: hey, you need to provide a description and if I put a description, it's happy. If I put a long description, it says: hey, you know the prop. The description description can be longer than 40 characters. Now, why is it important to do validation?

A

Well, one of the things that we have to remember is we've talked about this before, but from a user experience perspective right users, don't really like usually computers and software, because software tends to make them feel stupid, and so not everyone is an expert at kind of programming. Web parts- and you know coding and things like that- think about the users who are potentially editing these pages and configuring your web parts. They might not know the logic that you've applied.

A

They might not know that your description is is required and your code might not actually account for the description to be empty or look at another example, and I've seen this example plenty of times where we're somehow expecting a list of a certain type to be available. That has certain fields in that list and we don't really say anything in the description or anything like that of that of that property uh and people will pick a list and the web part won't work and it won't give an error message.

A

But if you look at the logs behind the scene, it gives an error message now, every time we do something like this, where we don't help the user understand what's required, we make them feel a little bit stupid right. So that's one of the aspects here is user experience and when we do user experience, it's it's important to think of a few things. You know the first thing is obviously try not to be too dramatic right, like fatal air.

A

I know we still see some of these errors sometimes but fatal air like it's, not that bad right nobody's gonna die here. So why are we ever saying something like fatal air? um You know I I kind of tend to joke about uh error messages and I tend to say that no developer should ever be allowed to create error messages, because we have a tendency to write stuff like this, and it's it's just not that good.

A

The other thing you got to be careful about- and this is actually a real error message uh and it's hard to do to read. I apologize, but uh you got to be careful about what information you reveal with your error. Messages right, air. This password is already in use by starboy98.

A

Try another, that's not good, and that's actually a real error message. uh So let's be careful about that now, we'll come back to the user experience in a minute, but the other aspect we need to consider is security. Right. Remember. The security consists of confidentiality, integrity and availability.

A

So those are the three things that we try to protect when we, when we protect or when we apply security to things now, there's an organization called the o wasp foundation. They do an os stands for open web application security project.

A

I believe they're an online community that they kind of create, create like freely available articles, methodologies, documentations and tools and stuff like that on how to improve web application security and uh one of the things that they do every year is they produce kind of a top 10 concerns security concerns or exploits basically or risks, uh and so in 2021?

A

uh Actually, this is 2017 to 2021.

A

These were the top security risk and you'll notice that in 2017 injection was actually a big issue, so the ability for someone to maybe you're giving them a screen to enter their name or or a description of a field or something like that and you're, allowing people to enter some stuff in that field that will get saved in the database that will get executed or when it gets displayed again, maybe on someone else's screen that actually can execute some malicious code.

A

Now, thankfully, technologies are improving. Right react has built-in capabilities to prevent you from by accident, injecting unsafe html, and you have to explicitly say. I know that this html can be unsafe for me to display it. So the on the. If we look at kind of in history here we went from having injection in 2017 as the top.

A

You know it's a number three, it's still kind of a an issue, but we have to consider that so when we look at our applications that we're building, even though sharepoint is doing a great job at protecting you right and and we've talked about how you can mark fields as being html or containing text, and things like that, so that sharepoint can actually do uh some validation and remove some malicious script.

A

It's still possible for you to maybe capture some information and reveal some information that you shouldn't be doing so any type of user supplied data should always be validated filtered and or sanitized as as much as you can.

A

So, if you're asking should I do a validation for all my property pains yeah, you should you should uh I'll skip the other ones, but we have to be careful about that now. How do I do validation of property pay?

A

So if you remember many many sessions ago, we started talking about how you can use the get property pane configuration method to actually return an array of property, pane configuration and then what we have to do is we return the individual property, pane uh text or field story that we want to display in the property page now, you'll notice that I've added a new attribute property attribute, whatever I've added a new thing on on the on the property pane text field.

A

That is on get error message. This is actually a standard error message or standard method that you can call for pretty much any property paying field and all you need to do is it's a function that gets passed. The value that was entered and its job is to return an error message.

A

So let's take a look at kind of what a validate description I just demoed would look like now. I have to to be clear: normally you would want to localize the text, not hard code text like I did here, but just for simplicity purpose. I actually hard-coded the text. Please don't scream at me all right. So the validate description gets a value, that's the value, that's been entered and then it returns a string. Now, if the string contains text it'll actually display that text, if the string is empty, it'll just say: okay, everything looks good.

A

So all I do here is I just look. If the value is null is, is null or if I trim the value and it's you know uh equal to zero, then I say: please provide a description.

A

If the value is greater than uh the length of the value is greater than 40, I say: please don't make it no longer than 40.. Otherwise I just return nothing and that's how the behavior is going to work.

A

Now, let's take a look at what happens, though, if I start logging, how often I actually validate the text so here I'm going to start typing and david will probably make fun of me, because I've switched to a new keyboard and I'm not the fastest typer at these nowadays.

A

But uh when you start typing, if you look on the right side here, I started logging when I validate and you'll notice that it's actually validating every single time that I'm typing something which might be the behavior you want, but we have to be careful about that, because what, if you're, actually making some calls to uh something a bit more advanced right?

A

So, for example, what if I wanted to validate a list from you know, go to actually sharepoint query sharepoint and say: give me the list and see if it exists right, it has to make calls to sharepoint or what, if you're, I don't try to validate a postal code or zip code right then you're going against a database and you're going or you're calling an external api that has that has throttling and has limitations.

A

Do you really want to search every time or validate the text every single time? Someone enters text? Well, there's something you can do with that. So, let's talk about it. So one of the things that you can do with the property pane here I use the text field now we'll talk in future sessions about how there's actually controls that are probably more suited or better suited for validating. uh You know a list name, but let's just pretend that we.

A

uh We also want to verify that the list contains the the right columns that we're looking for, and things like that. So, as you saw before, I now added a get error message for validate list name and same thing. We get a string and we return in this case. Instead of returning a string, we return a promise. So what we're saying is I'm not going to slow you down? If you have? You know if just tell me when you need me to to go validate my text and we'll go.

A

Do that and then what we do in this particular case. uh We actually just do an asynchronous call to sharepoint where we pass. uh You know the the value that's been entered and we try to retrieve that list by title and one thing that we got to be careful here is again. We want to make sure that we're escaping that text.

A

We probably should escape it a little bit more than just calling escape, but just don't take any text, that's entered by the users and randomly throw it in there because you don't know what we could be doing here in terms of injecting some some bad stuff.

A

Now, in this case, what I do is, I say if I, the response is okay. In other words, if there was an actual list by that name, I will return no error message. If I get a 404 I'll say this list doesn't exist in the current site and if there's an actual error, I'll, say oops, you know, try again and then a little try and catch uh just in case. Something else happens.

A

uh We can deal with that so again. So what happens? If you have slow apis? What happens if I again, I'm throttled and things like that and I'm running out of time here, but uh one of the things that we can do that uh I know I spent a lot of time trying to work around this and turns out there's a method you can do or function or feature.

A

You can actually just say, deferred, validation, time and specify the amount of time in milliseconds. So by default, the deferred validation time is 200 milliseconds. But if you want to actually kind of slow down the time that it takes and gives the user the ability to type more text, you can do that as well.

A

All right, so I had set some time to talk about error messages and guidelines, and things like that. uh We're running out of time, so we'll have to do that another time, but uh in terms of code and my design series, that's it for me for today back to you julie, thank you so much you go.