Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016
Download as PPTX, PDF0 likes1,038 views
The document outlines a presentation from SharePoint Saturday Belgium 2016, focusing on building solutions with the SharePoint Framework. It covers best practices such as managing project dependencies, using external scripts, and validating web part properties. Additional resources for setting up and documenting SharePoint Framework projects are provided, along with links for further learning.
Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016
- 1. SharePoint Saturday Belgium 2016 • October 15 • Brussels Track: Developer | Level: 300 Deep Dive building solutions on the SharePoint Framework Waldek Mastykarz Office Development MVP | Rencore
- 3. SharePoint Saturday Belgium 2016 • October 15 • Brussels Working with SharePoint Framework
- 4. SharePoint Saturday Belgium 2016 • October 15 • Brussels Store project dependencies $ npm install angular --save package.json { dependencies: { "angular": "^1.5.8" } }
- 5. SharePoint Saturday Belgium 2016 • October 15 • Brussels Don’t bundle frameworks. Load from URL instead config/config.json { externals: { "angular": { "path": "https://cdn.com/…/angular.min.js", "globalName": "angular" } } }
- 6. SharePoint Saturday Belgium 2016 • October 15 • Brussels Don’t guess the JavaScript framework format http://rc-scripttype.azurewebsites.net/
- 7. 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
- 8. SharePoint Saturday Belgium 2016 • October 15 • Brussels Avoid using non-AMD scripts whenever possible
- 9. SharePoint Saturday Belgium 2016 • October 15 • Brussels Clean old project build files $ gulp nuke
- 10. SharePoint Saturday Belgium 2016 • October 15 • Brussels Use one-time bootstrap MyWebPart.ts export default class ToDoWebPartWebPart extends BaseClientSideWebPart<IToDoWebPartWebPartProps> { public render(): void { if (this.renderedOnce === false) { // one-time bootstrap } } }
- 11. SharePoint Saturday Belgium 2016 • October 15 • Brussels Use non-reactive pane with external data MyWebPart.ts export default class ToDoWebPartWebPart extends BaseClientSideWebPart<IToDoWebPartWebPartProps> { protected get disableReactivePropertyChanges(): boolean { return true; } }
- 12. SharePoint Saturday Belgium 2016 • October 15 • Brussels Validate web part properties values MyWebPart.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 ''; } }
- 13. Next steps 1. Get SPFx http://wldk.nl/spfx-setup 2. Check out docs http://wldk.nl/spfx-docs 3. Check out samples http://wldk.nl/spfx-samples 4. Latest SPFx content http://wldk.nl/waldek-blog
- 14. Waldek Mastykarz Office Development MVP Rencore http://www.rencore.com https://blog.mastykarz.nl @waldekm
- 15. SharePoint Saturday Belgium 2016 • October 15 • Brussels Thank You!