sharepoint framework do's and don'ts
TRANSCRIPT
![Page 1: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/1.jpg)
![Page 2: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/2.jpg)
#5ffce46a-3059-40e6-8640-7b58abbca974
SharePoint Framework do's and don'tsWaldek MastykarzOffice Development MVP - Rencore
![Page 3: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/3.jpg)
Store project dependencies$ npm i angular -S
package.json
{dependencies: {
"angular": "^1.5.8"}
}
![Page 4: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/4.jpg)
Distribute release version of your web part$ gulp build --ship
![Page 5: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/5.jpg)
Don’t bundle frameworks. Load from URL insteadconfig/config.json
{externals: {
"angular": {"path":
"https://cdn.com/…/angular.min.js","globalName": "angular"
}}
}
![Page 6: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/6.jpg)
Don’t guess the JavaScript framework formathttp://rc-scripttype.azurewebsites.net/
![Page 7: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/7.jpg)
Use one-time bootstrapMyWebPart.ts
export default class ToDoWebPartWebPart extends BaseClientSideWebPart<IToDoWebPartWebPartProps> {
public render(): void {if (this.renderedOnce === false) {
// one-time bootstrap}
}}
![Page 8: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/8.jpg)
Use non-reactive pane with external dataMyWebPart.ts
export default class ToDoWebPartWebPart extends BaseClientSideWebPart<IToDoWebPartWebPartProps> {
protected get disableReactivePropertyChanges(): boolean {
return true;}
}
![Page 9: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/9.jpg)
Provide preconfigured versions of your web partMyWebPart.manifest.json
{"preconfiguredEntries": [{
"title": { "default": "Events in Amsterdam" }"properties": { "location": "Amsterdam" }
},{
"title": { "default": "Events in The Hague" }"properties": { "location": "The Hague" }
}]}
![Page 10: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/10.jpg)
Avoid using non-AMD scripts whenever possible
![Page 11: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/11.jpg)
Benefit ofOffice 365 public CDN
![Page 12: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/12.jpg)
Validate web part properties valuesMyWebPart.ts
PropertyPaneTextField('description', {label: strings.DescriptionFieldLabel,onGetErrorMessage: this.validateDescription
})
private validateDescription(description: string): string {if (description && description.length > 20) {
return 'Description shouldn\'t be longer than 20 characters';}else {
return '';}
}
![Page 13: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/13.jpg)
Log to console using the standard web part loggingMyWebPart.ts
import { Log } from '@microsoft/sp-client-base';
Log.verbose('HelloWorldWebPart', 'Rendering web part...', this.context.serviceScope);
![Page 14: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/14.jpg)
Next steps:1. get SPFx
http://wldk.nl/spfx-setup2. check out docs
http://wldk.nl/spfx-docs3. check out samples
http://wldk.nl/spfx-samples4. latest SPFx content
http://wldk.nl/waldek-blog
![Page 15: SharePoint Framework do's and don'ts](https://reader033.vdocuments.us/reader033/viewer/2022051520/58864c001a28ab32768b6413/html5/thumbnails/15.jpg)
Waldek MastykarzOffice Development MVPRencorehttp://www.rencore.comhttps://blog.mastykarz.nl@waldekm