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

Silver

SharePoint Saturday Belgium 2016 • October 15 • Brussels

Working withSharePoint Framework

Store project dependencies$ npm install angular --save

package.json

{dependencies: {

"angular": "^1.5.8"}

Don’t bundle frameworks. Load from URL insteadconfig/config.json

{externals: {"angular": {"path": "https://cdn.com/…/angular.min.js","globalName": "angular"}}

Don’t guess the JavaScript framework formathttp://rc-scripttype.azurewebsites.net/

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

Avoid using non-AMD scripts whenever possible

Clean old project build files$ gulp nuke

Use one-time bootstrapMyWebPart.ts

export default class ToDoWebPartWebPart extends BaseClientSideWebPart<IToDoWebPartWebPartProps> {

public render(): void {if (this.renderedOnce === false) {// one-time bootstrap}}

Use non-reactive pane with external dataMyWebPart.ts

export default class ToDoWebPartWebPart extends BaseClientSideWebPart<IToDoWebPartWebPartProps> {

protected get disableReactivePropertyChanges(): boolean {

return true;}

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

Thank You!

Feedbackhttp://spsbe.be

Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016

Technology