deep dive building solutions on the sharepoint framework - sps brussels 2016
TRANSCRIPT
SharePoint Saturday Belgium 2016 • October 15 • Brussels Track: Developer | Level: 300
Deep Dive building solutions on the SharePoint Framework
Waldek MastykarzOffice Development MVP | Rencore
Platinum
Gold
Silver
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Working withSharePoint Framework
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Store project dependencies$ npm install angular --save
package.json
{dependencies: {
"angular": "^1.5.8"}
}
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Don’t bundle frameworks. Load from URL insteadconfig/config.json
{externals: {"angular": {"path": "https://cdn.com/…/angular.min.js","globalName": "angular"}}
}
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Don’t guess the JavaScript framework formathttp://rc-scripttype.azurewebsites.net/
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Non-AMD scripts in web parts• Isolated within web part• Each web part uses its own version• Version loaded by one web part doesn’t affect the version loaded by another
web part
• Exposed in the global scope• Last version loaded overwrites any version loaded previously in the global
scope
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Avoid using non-AMD scripts whenever possible
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Clean old project build files$ gulp nuke
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Use one-time bootstrapMyWebPart.ts
export default class ToDoWebPartWebPart extends BaseClientSideWebPart<IToDoWebPartWebPartProps> {
public render(): void {if (this.renderedOnce === false) {// one-time bootstrap}}
}
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Use non-reactive pane with external dataMyWebPart.ts
export default class ToDoWebPartWebPart extends BaseClientSideWebPart<IToDoWebPartWebPartProps> {
protected get disableReactivePropertyChanges(): boolean {
return true;}
}
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Validate web part properties valuesMyWebPart.ts
PropertyPaneTextField('description', {label: strings.DescriptionFieldLabel,onGetErrorMessage: this.validateDescription.bind(this)
})
private validateDescription(description: string): string {if (description && description.length > 20) {return 'Description shouldn\'t be longer than 20 characters';}else {return '';}
}
Next steps1. Get SPFx
http://wldk.nl/spfx-setup
2. Check out docshttp://wldk.nl/spfx-docs
3. Check out sampleshttp://wldk.nl/spfx-samples
4. Latest SPFx contenthttp://wldk.nl/waldek-blog
Waldek MastykarzOffice Development MVP
Rencorehttp://www.rencore.com
https://blog.mastykarz.nl@waldekm
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Thank You!
Feedbackhttp://spsbe.be