Yup, you read it right. Validations can be added to the properties in the web part property pane of an SPFx webpart. The validation function can be Synchronous as well as Asynchronous.
This means that we can immediately determine whether a property is valid or we can make an HTTP request (e.g. to SharePoint) and then determine if a property is valid depending on the response.
In the following code, I have added a validation to the title property to make sure that it is not the same as the SharePoint site title. Also, I have added a validation to the description property making sure that it is not less than 10 characters.
The code is pretty straightforward. This code should be placed inside your Web part class:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
protected get propertyPaneSettings(): IPropertyPaneSettings { | |
return { | |
pages: [ | |
{ | |
header: { | |
description: strings.PropertyPaneDescription | |
}, | |
groups: [ | |
{ | |
groupName: strings.BasicGroupName, | |
groupFields: [ | |
PropertyPaneTextField('title', { | |
label: strings.TitleFieldLabel, | |
onGetErrorMessage: this._validateTitleAsync.bind(this), // validation function | |
deferredValidationTime: 500 // delay after which to run the validation function | |
}), | |
PropertyPaneTextField('description', { | |
label: strings.DescriptionFieldLabel, | |
multiline: true, | |
resizable: true, | |
onGetErrorMessage: this._validateDescription | |
}) | |
] | |
} | |
] | |
} | |
] | |
}; | |
} | |
private _validateTitleAsync(value: string): Promise<string> { | |
return this.context.httpClient.get(`${this.context.pageContext.web.absoluteUrl}/_api/web/title`) | |
.then((response: Response) => { | |
return response.json().then((responseJSON) => { | |
// If validation is not successful, return a Promise<string> with error message. | |
if (responseJSON.value.toLowerCase() === value.toLowerCase()) { | |
return "Title cannot be the same as the SharePoint site title"; | |
} | |
else { | |
// If validation is successful, return a Promise<string> with empty string. | |
return ""; | |
} | |
}); | |
}); | |
} | |
private _validateDescription(value: string): string { | |
// If validation is not successful, return a string with error message. | |
if (value.length < 10) { | |
return "At least 10 characters required"; | |
} | |
else { | |
// If validation is successful, return an empty string. | |
return ""; | |
} | |
} |
The code for this post is located here: https://github.com/vman/SPFx-Web-part-property-validator
The complete Web part class with the property pane editor is here:
https://github.com/vman/SPFx-Web-part-property-validator/blob/master/src/webparts/propValidator/PropValidatorWebPart.ts
While working on this post, I have discovered two possible issues with the way property pane validations currently work in the SharePoint Framework. I have posted them here if you are interested:
1) Rename IPropertyPaneTextFieldProps.onGetErrorMessage to IPropertyPaneTextFieldProps.GetValidationMessage
2) When property pane is in Non-Reactive mode, the validation function should only fire when clicked on "Apply"
Thanks for reading!
1 comment:
Hello, thanks for nice post, but Im looking for validator for form in UI(html content) web part(spfx&react) so is there any sample about it or do you have any idea how can I make it ?
Post a Comment