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