SlideShare une entreprise Scribd logo
1  sur  16
Télécharger pour lire hors ligne
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
PlatinumGoldSilver
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Working with
SharePoint 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
instead
config/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 format
http://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 bootstrap
MyWebPart.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 data
MyWebPart.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 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 '';
}
}
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
Waldek Mastykarz
Office Development MVP
Rencore
http://www.rencore.com
https://blog.mastykarz.nl
@waldekm
SharePoint Saturday Belgium 2016 • October 15 • Brussels
Thank You!
Feedback
http://spsbe.be

Contenu connexe

Tendances

Create a modern(ish) BAM portal in (roughly) one hour!
Create a modern(ish) BAM portal in (roughly) one hour!Create a modern(ish) BAM portal in (roughly) one hour!
Create a modern(ish) BAM portal in (roughly) one hour!BizTalk360
 
Office script labs
Office script labsOffice script labs
Office script labsMark Roden
 
Host, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server AppsHost, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server AppsJose Javier Columbie
 
Going Serverless with Azure Functions
Going Serverless with Azure FunctionsGoing Serverless with Azure Functions
Going Serverless with Azure FunctionsChristos Matskas
 
Logic Apps – Deployments
Logic Apps – DeploymentsLogic Apps – Deployments
Logic Apps – DeploymentsBizTalk360
 
[DevDay 2017] Serverless Architecture - Speaker: Trung Huynh - Software Engin...
[DevDay 2017] Serverless Architecture - Speaker: Trung Huynh - Software Engin...[DevDay 2017] Serverless Architecture - Speaker: Trung Huynh - Software Engin...
[DevDay 2017] Serverless Architecture - Speaker: Trung Huynh - Software Engin...DevDay.org
 
Conf 2018 Track 2 - Custom Web Elements with Stencil
Conf 2018 Track 2 - Custom Web Elements with StencilConf 2018 Track 2 - Custom Web Elements with Stencil
Conf 2018 Track 2 - Custom Web Elements with StencilTechExeter
 
Build a SharePoint website in 60 minutes
Build a SharePoint website in 60 minutesBuild a SharePoint website in 60 minutes
Build a SharePoint website in 60 minutesBen Robb
 
Azure Web Jobs
Azure Web JobsAzure Web Jobs
Azure Web JobsBizTalk360
 
Building high scale, highly available websites in SharePoint 2010
Building high scale, highly available websites in SharePoint 2010Building high scale, highly available websites in SharePoint 2010
Building high scale, highly available websites in SharePoint 2010Ben Robb
 
[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...
[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...
[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...DevDay.org
 
Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)Vincent Biret
 
Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)Vincent Biret
 

Tendances (20)

Jayway Web Tech Radar 2015
Jayway Web Tech Radar 2015Jayway Web Tech Radar 2015
Jayway Web Tech Radar 2015
 
Create a modern(ish) BAM portal in (roughly) one hour!
Create a modern(ish) BAM portal in (roughly) one hour!Create a modern(ish) BAM portal in (roughly) one hour!
Create a modern(ish) BAM portal in (roughly) one hour!
 
Introduction presentation
Introduction presentationIntroduction presentation
Introduction presentation
 
ASP.NET 5
ASP.NET 5ASP.NET 5
ASP.NET 5
 
Office script labs
Office script labsOffice script labs
Office script labs
 
Host, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server AppsHost, deploy & scale Blazor Server Apps
Host, deploy & scale Blazor Server Apps
 
ASP.NET MVC 4
ASP.NET MVC 4ASP.NET MVC 4
ASP.NET MVC 4
 
Mvc razor and working with data
Mvc razor and working with dataMvc razor and working with data
Mvc razor and working with data
 
Going Serverless with Azure Functions
Going Serverless with Azure FunctionsGoing Serverless with Azure Functions
Going Serverless with Azure Functions
 
Logic Apps – Deployments
Logic Apps – DeploymentsLogic Apps – Deployments
Logic Apps – Deployments
 
ColdFusion in Transit action
ColdFusion in Transit actionColdFusion in Transit action
ColdFusion in Transit action
 
[DevDay 2017] Serverless Architecture - Speaker: Trung Huynh - Software Engin...
[DevDay 2017] Serverless Architecture - Speaker: Trung Huynh - Software Engin...[DevDay 2017] Serverless Architecture - Speaker: Trung Huynh - Software Engin...
[DevDay 2017] Serverless Architecture - Speaker: Trung Huynh - Software Engin...
 
Conf 2018 Track 2 - Custom Web Elements with Stencil
Conf 2018 Track 2 - Custom Web Elements with StencilConf 2018 Track 2 - Custom Web Elements with Stencil
Conf 2018 Track 2 - Custom Web Elements with Stencil
 
Build a SharePoint website in 60 minutes
Build a SharePoint website in 60 minutesBuild a SharePoint website in 60 minutes
Build a SharePoint website in 60 minutes
 
Web forms Overview Presentation
Web forms Overview PresentationWeb forms Overview Presentation
Web forms Overview Presentation
 
Azure Web Jobs
Azure Web JobsAzure Web Jobs
Azure Web Jobs
 
Building high scale, highly available websites in SharePoint 2010
Building high scale, highly available websites in SharePoint 2010Building high scale, highly available websites in SharePoint 2010
Building high scale, highly available websites in SharePoint 2010
 
[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...
[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...
[DevDay 2017] ReactJS Hands on - Speaker: Binh Phan - Developer at mgm techno...
 
Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)Vincent biret azure functions and flow (ottawa)
Vincent biret azure functions and flow (ottawa)
 
Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)Vincent biret azure functions and flow (toronto)
Vincent biret azure functions and flow (toronto)
 

En vedette

Building productivity solutions with Microsoft Graph
Building productivity solutions with Microsoft GraphBuilding productivity solutions with Microsoft Graph
Building productivity solutions with Microsoft GraphWaldek Mastykarz
 
SharePoint Online
SharePoint OnlineSharePoint Online
SharePoint OnlineNigel Price
 
Azure Web Apps - Deep Dive
Azure Web Apps - Deep DiveAzure Web Apps - Deep Dive
Azure Web Apps - Deep DiveBizTalk360
 
How to Break the Zombification of the Enterprise!
How to Break the Zombification of the Enterprise!How to Break the Zombification of the Enterprise!
How to Break the Zombification of the Enterprise!Christian Buckley
 
SharePoint Framework do's and don'ts
SharePoint Framework do's and don'tsSharePoint Framework do's and don'ts
SharePoint Framework do's and don'tsWaldek Mastykarz
 
Where Form Meets Function: Understanding Collaboration's Cultural Fit
Where Form Meets Function: Understanding Collaboration's Cultural FitWhere Form Meets Function: Understanding Collaboration's Cultural Fit
Where Form Meets Function: Understanding Collaboration's Cultural FitChristian Buckley
 
Microsoft graph api deep dive
Microsoft graph api deep diveMicrosoft graph api deep dive
Microsoft graph api deep diveAlbert-Jan Schot
 
Project and Portfolio Management with Project Online
Project and Portfolio Management with Project OnlineProject and Portfolio Management with Project Online
Project and Portfolio Management with Project OnlineGregory Zelfond
 
.NET Framework Overview
.NET Framework Overview.NET Framework Overview
.NET Framework OverviewDoncho Minkov
 
GMO'less Software Development Practices
GMO'less Software Development PracticesGMO'less Software Development Practices
GMO'less Software Development PracticesLemi Orhan Ergin
 
How to land a Great Job In Videogames
How to land a Great Job In VideogamesHow to land a Great Job In Videogames
How to land a Great Job In VideogamesChris Ansell
 
Alfresco the clojure way -- Slides from the Alfresco DevCon2011
Alfresco the clojure way -- Slides from the Alfresco DevCon2011Alfresco the clojure way -- Slides from the Alfresco DevCon2011
Alfresco the clojure way -- Slides from the Alfresco DevCon2011Carlo Sciolla
 
Simulador y emulador
Simulador y emuladorSimulador y emulador
Simulador y emuladormamaro09
 
Adapting HTML and CSS Templates to XOOPS
Adapting HTML and CSS Templates to XOOPSAdapting HTML and CSS Templates to XOOPS
Adapting HTML and CSS Templates to XOOPSxoopsproject
 

En vedette (20)

Building productivity solutions with Microsoft Graph
Building productivity solutions with Microsoft GraphBuilding productivity solutions with Microsoft Graph
Building productivity solutions with Microsoft Graph
 
SharePoint Online
SharePoint OnlineSharePoint Online
SharePoint Online
 
Azure Web Apps - Deep Dive
Azure Web Apps - Deep DiveAzure Web Apps - Deep Dive
Azure Web Apps - Deep Dive
 
How to Break the Zombification of the Enterprise!
How to Break the Zombification of the Enterprise!How to Break the Zombification of the Enterprise!
How to Break the Zombification of the Enterprise!
 
Office add ins 0-60
Office add ins 0-60Office add ins 0-60
Office add ins 0-60
 
SharePoint Framework do's and don'ts
SharePoint Framework do's and don'tsSharePoint Framework do's and don'ts
SharePoint Framework do's and don'ts
 
Where Form Meets Function: Understanding Collaboration's Cultural Fit
Where Form Meets Function: Understanding Collaboration's Cultural FitWhere Form Meets Function: Understanding Collaboration's Cultural Fit
Where Form Meets Function: Understanding Collaboration's Cultural Fit
 
Microsoft graph api deep dive
Microsoft graph api deep diveMicrosoft graph api deep dive
Microsoft graph api deep dive
 
Project and Portfolio Management with Project Online
Project and Portfolio Management with Project OnlineProject and Portfolio Management with Project Online
Project and Portfolio Management with Project Online
 
.NET Framework Overview
.NET Framework Overview.NET Framework Overview
.NET Framework Overview
 
Wykładzina vol. 15 ClickMeeting - make your Webinar click!
Wykładzina vol. 15 ClickMeeting - make your Webinar click!Wykładzina vol. 15 ClickMeeting - make your Webinar click!
Wykładzina vol. 15 ClickMeeting - make your Webinar click!
 
GMO'less Software Development Practices
GMO'less Software Development PracticesGMO'less Software Development Practices
GMO'less Software Development Practices
 
Understanding the bible through koranic messages
Understanding the bible through koranic messagesUnderstanding the bible through koranic messages
Understanding the bible through koranic messages
 
How to land a Great Job In Videogames
How to land a Great Job In VideogamesHow to land a Great Job In Videogames
How to land a Great Job In Videogames
 
Alfresco the clojure way -- Slides from the Alfresco DevCon2011
Alfresco the clojure way -- Slides from the Alfresco DevCon2011Alfresco the clojure way -- Slides from the Alfresco DevCon2011
Alfresco the clojure way -- Slides from the Alfresco DevCon2011
 
Simulador y emulador
Simulador y emuladorSimulador y emulador
Simulador y emulador
 
Catrina Meakins 3D CV
Catrina Meakins 3D CVCatrina Meakins 3D CV
Catrina Meakins 3D CV
 
PRywatki na Wykładzinie - Briefly
PRywatki na Wykładzinie - BrieflyPRywatki na Wykładzinie - Briefly
PRywatki na Wykładzinie - Briefly
 
Break the rules - The FOG
Break the rules - The FOGBreak the rules - The FOG
Break the rules - The FOG
 
Adapting HTML and CSS Templates to XOOPS
Adapting HTML and CSS Templates to XOOPSAdapting HTML and CSS Templates to XOOPS
Adapting HTML and CSS Templates to XOOPS
 

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

SharePoint Saturday Belgium 2016
SharePoint Saturday Belgium 2016SharePoint Saturday Belgium 2016
SharePoint Saturday Belgium 2016Rick Van Rousselt
 
Extending Teams & Groups
Extending Teams & GroupsExtending Teams & Groups
Extending Teams & GroupsBIWUG
 
Spsbe2016 extend your office 365 environement to cross-platform apps
Spsbe2016   extend your office 365 environement to cross-platform appsSpsbe2016   extend your office 365 environement to cross-platform apps
Spsbe2016 extend your office 365 environement to cross-platform appsAlexander Meijers
 
Forge - DevCon 2016: From Desktop to the Cloud with Forge
Forge - DevCon 2016: From Desktop to the Cloud with ForgeForge - DevCon 2016: From Desktop to the Cloud with Forge
Forge - DevCon 2016: From Desktop to the Cloud with ForgeAutodesk
 
From desktop to the cloud with forge
From desktop to the cloud with forgeFrom desktop to the cloud with forge
From desktop to the cloud with forgefpm2015
 
Custom Development for SharePoint
Custom Development for SharePointCustom Development for SharePoint
Custom Development for SharePointTalbott Crowell
 
SPCA2013 - Developing SharePoint 2013 Apps with Visual Studio 2012
SPCA2013 - Developing SharePoint 2013 Apps with Visual Studio 2012SPCA2013 - Developing SharePoint 2013 Apps with Visual Studio 2012
SPCA2013 - Developing SharePoint 2013 Apps with Visual Studio 2012NCCOMMS
 
#spsbe Get Typing with Typescript
#spsbe Get Typing with Typescript#spsbe Get Typing with Typescript
#spsbe Get Typing with TypescriptDavid Opdendries
 
Developing SharePoint 2013 apps with Visual Studio 2012 - SharePoint Connecti...
Developing SharePoint 2013 apps with Visual Studio 2012 - SharePoint Connecti...Developing SharePoint 2013 apps with Visual Studio 2012 - SharePoint Connecti...
Developing SharePoint 2013 apps with Visual Studio 2012 - SharePoint Connecti...Bram de Jager
 
Heading to the Cloud : Introduction to deploying a Provider-Hosted App in Azure
Heading to the Cloud : Introduction to deploying a Provider-Hosted App in AzureHeading to the Cloud : Introduction to deploying a Provider-Hosted App in Azure
Heading to the Cloud : Introduction to deploying a Provider-Hosted App in AzureXenox Garavito
 
Building API in the cloud using Azure Functions
Building API in the cloud using Azure FunctionsBuilding API in the cloud using Azure Functions
Building API in the cloud using Azure FunctionsAleksandar Bozinovski
 
Pipeline de deploy com ASP.NET Core e VSTS
Pipeline de deploy com ASP.NET Core e VSTSPipeline de deploy com ASP.NET Core e VSTS
Pipeline de deploy com ASP.NET Core e VSTSJaqueline Ramos
 
Node.js Development with Apache NetBeans
Node.js Development with Apache NetBeansNode.js Development with Apache NetBeans
Node.js Development with Apache NetBeansRyan Cuprak
 
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"Fwdays
 
Write Serverless Applications with PowerShell and Azure Functions
Write Serverless Applications with PowerShell and Azure FunctionsWrite Serverless Applications with PowerShell and Azure Functions
Write Serverless Applications with PowerShell and Azure FunctionsJaap Brasser
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Brian Culver
 
Is Your Developer's Head in the Cloud? May 7 Webinar
Is Your Developer's Head in the Cloud? May 7 WebinarIs Your Developer's Head in the Cloud? May 7 Webinar
Is Your Developer's Head in the Cloud? May 7 WebinarC/D/H Technology Consultants
 
ASP .Net Core SPA Templates
ASP .Net Core SPA TemplatesASP .Net Core SPA Templates
ASP .Net Core SPA TemplatesEamonn Boyle
 
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 Development
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 DevelopmentaOS Canadian Tour - Ottawa - From SharePoint to Office 365 Development
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 DevelopmentSébastien Levert
 

Similaire à Deep Dive building solutions on the SharePoint Framework - SPS Brussels 2016 (20)

SharePoint Saturday Belgium 2016
SharePoint Saturday Belgium 2016SharePoint Saturday Belgium 2016
SharePoint Saturday Belgium 2016
 
Extending Teams & Groups
Extending Teams & GroupsExtending Teams & Groups
Extending Teams & Groups
 
Spsbe2016 extend your office 365 environement to cross-platform apps
Spsbe2016   extend your office 365 environement to cross-platform appsSpsbe2016   extend your office 365 environement to cross-platform apps
Spsbe2016 extend your office 365 environement to cross-platform apps
 
Forge - DevCon 2016: From Desktop to the Cloud with Forge
Forge - DevCon 2016: From Desktop to the Cloud with ForgeForge - DevCon 2016: From Desktop to the Cloud with Forge
Forge - DevCon 2016: From Desktop to the Cloud with Forge
 
Introducción al SharePoint Framework SPFx
Introducción al SharePoint Framework SPFxIntroducción al SharePoint Framework SPFx
Introducción al SharePoint Framework SPFx
 
From desktop to the cloud with forge
From desktop to the cloud with forgeFrom desktop to the cloud with forge
From desktop to the cloud with forge
 
Custom Development for SharePoint
Custom Development for SharePointCustom Development for SharePoint
Custom Development for SharePoint
 
SPCA2013 - Developing SharePoint 2013 Apps with Visual Studio 2012
SPCA2013 - Developing SharePoint 2013 Apps with Visual Studio 2012SPCA2013 - Developing SharePoint 2013 Apps with Visual Studio 2012
SPCA2013 - Developing SharePoint 2013 Apps with Visual Studio 2012
 
#spsbe Get Typing with Typescript
#spsbe Get Typing with Typescript#spsbe Get Typing with Typescript
#spsbe Get Typing with Typescript
 
Developing SharePoint 2013 apps with Visual Studio 2012 - SharePoint Connecti...
Developing SharePoint 2013 apps with Visual Studio 2012 - SharePoint Connecti...Developing SharePoint 2013 apps with Visual Studio 2012 - SharePoint Connecti...
Developing SharePoint 2013 apps with Visual Studio 2012 - SharePoint Connecti...
 
Heading to the Cloud : Introduction to deploying a Provider-Hosted App in Azure
Heading to the Cloud : Introduction to deploying a Provider-Hosted App in AzureHeading to the Cloud : Introduction to deploying a Provider-Hosted App in Azure
Heading to the Cloud : Introduction to deploying a Provider-Hosted App in Azure
 
Building API in the cloud using Azure Functions
Building API in the cloud using Azure FunctionsBuilding API in the cloud using Azure Functions
Building API in the cloud using Azure Functions
 
Pipeline de deploy com ASP.NET Core e VSTS
Pipeline de deploy com ASP.NET Core e VSTSPipeline de deploy com ASP.NET Core e VSTS
Pipeline de deploy com ASP.NET Core e VSTS
 
Node.js Development with Apache NetBeans
Node.js Development with Apache NetBeansNode.js Development with Apache NetBeans
Node.js Development with Apache NetBeans
 
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
Oleksandr Skachkov "Running С# in your Web Browser with WebAssembly"
 
Write Serverless Applications with PowerShell and Azure Functions
Write Serverless Applications with PowerShell and Azure FunctionsWrite Serverless Applications with PowerShell and Azure Functions
Write Serverless Applications with PowerShell and Azure Functions
 
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Convert your Full Trust Solutions to the SharePoint Framework (SPFx)
 
Is Your Developer's Head in the Cloud? May 7 Webinar
Is Your Developer's Head in the Cloud? May 7 WebinarIs Your Developer's Head in the Cloud? May 7 Webinar
Is Your Developer's Head in the Cloud? May 7 Webinar
 
ASP .Net Core SPA Templates
ASP .Net Core SPA TemplatesASP .Net Core SPA Templates
ASP .Net Core SPA Templates
 
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 Development
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 DevelopmentaOS Canadian Tour - Ottawa - From SharePoint to Office 365 Development
aOS Canadian Tour - Ottawa - From SharePoint to Office 365 Development
 

Plus de Waldek Mastykarz

Building Office 365 solutions with React
Building Office 365 solutions with ReactBuilding Office 365 solutions with React
Building Office 365 solutions with ReactWaldek Mastykarz
 
Building contextual experiences with the Office Graph
Building contextual experiences with the Office GraphBuilding contextual experiences with the Office Graph
Building contextual experiences with the Office GraphWaldek Mastykarz
 
NextGen Portal for Your Organization
NextGen Portal for Your OrganizationNextGen Portal for Your Organization
NextGen Portal for Your OrganizationWaldek Mastykarz
 
NextGen Portal for Your Organization
NextGen Portal for Your OrganizationNextGen Portal for Your Organization
NextGen Portal for Your OrganizationWaldek Mastykarz
 
Building solutions with the Office Graph (Unity Connect Amsterdam 2015)
Building solutions with the Office Graph (Unity Connect Amsterdam 2015)Building solutions with the Office Graph (Unity Connect Amsterdam 2015)
Building solutions with the Office Graph (Unity Connect Amsterdam 2015)Waldek Mastykarz
 
Building contextual experiences with the Office Graph (SPSMUC 15)
Building contextual experiences with the Office Graph (SPSMUC 15)Building contextual experiences with the Office Graph (SPSMUC 15)
Building contextual experiences with the Office Graph (SPSMUC 15)Waldek Mastykarz
 
Building solutions with the Office Graph
Building solutions with the Office GraphBuilding solutions with the Office Graph
Building solutions with the Office GraphWaldek Mastykarz
 
Optimizing SharePoint 2013 public-facing websites for Internet search engines
Optimizing SharePoint 2013 public-facing websites for Internet search enginesOptimizing SharePoint 2013 public-facing websites for Internet search engines
Optimizing SharePoint 2013 public-facing websites for Internet search enginesWaldek Mastykarz
 
Building rich search experiences Apps for SharePoint
Building rich search experiences Apps for SharePointBuilding rich search experiences Apps for SharePoint
Building rich search experiences Apps for SharePointWaldek Mastykarz
 
Building solutions with Office Graph
Building solutions with Office GraphBuilding solutions with Office Graph
Building solutions with Office GraphWaldek Mastykarz
 
Building solutions with Office Graph - SharePoint Connect 2014 Amsterdam
Building solutions with Office Graph - SharePoint Connect 2014 AmsterdamBuilding solutions with Office Graph - SharePoint Connect 2014 Amsterdam
Building solutions with Office Graph - SharePoint Connect 2014 AmsterdamWaldek Mastykarz
 
SharePoint Connections Amsterdam 2013: Real-life building public-facing websi...
SharePoint Connections Amsterdam 2013: Real-life building public-facing websi...SharePoint Connections Amsterdam 2013: Real-life building public-facing websi...
SharePoint Connections Amsterdam 2013: Real-life building public-facing websi...Waldek Mastykarz
 
SPSNL13 - Building intelligent websites with SharePoint 2013
SPSNL13 - Building intelligent websites with SharePoint 2013SPSNL13 - Building intelligent websites with SharePoint 2013
SPSNL13 - Building intelligent websites with SharePoint 2013Waldek Mastykarz
 
P&M307 Building intelligent websites with SharePoint 2013
P&M307 Building intelligent websites with SharePoint 2013P&M307 Building intelligent websites with SharePoint 2013
P&M307 Building intelligent websites with SharePoint 2013Waldek Mastykarz
 
P&M302 Real-life building public-facing websites with SharePoint 2013
P&M302 Real-life building public-facing websites with SharePoint 2013P&M302 Real-life building public-facing websites with SharePoint 2013
P&M302 Real-life building public-facing websites with SharePoint 2013Waldek Mastykarz
 
BIWUG - What’s new in SharePoint 2013 for public-facing websites
BIWUG - What’s new in SharePoint 2013 for public-facing websitesBIWUG - What’s new in SharePoint 2013 for public-facing websites
BIWUG - What’s new in SharePoint 2013 for public-facing websitesWaldek Mastykarz
 
SharePoint 2010 Web Content Management - The Developer Story
SharePoint 2010 Web Content Management - The Developer StorySharePoint 2010 Web Content Management - The Developer Story
SharePoint 2010 Web Content Management - The Developer StoryWaldek Mastykarz
 

Plus de Waldek Mastykarz (17)

Building Office 365 solutions with React
Building Office 365 solutions with ReactBuilding Office 365 solutions with React
Building Office 365 solutions with React
 
Building contextual experiences with the Office Graph
Building contextual experiences with the Office GraphBuilding contextual experiences with the Office Graph
Building contextual experiences with the Office Graph
 
NextGen Portal for Your Organization
NextGen Portal for Your OrganizationNextGen Portal for Your Organization
NextGen Portal for Your Organization
 
NextGen Portal for Your Organization
NextGen Portal for Your OrganizationNextGen Portal for Your Organization
NextGen Portal for Your Organization
 
Building solutions with the Office Graph (Unity Connect Amsterdam 2015)
Building solutions with the Office Graph (Unity Connect Amsterdam 2015)Building solutions with the Office Graph (Unity Connect Amsterdam 2015)
Building solutions with the Office Graph (Unity Connect Amsterdam 2015)
 
Building contextual experiences with the Office Graph (SPSMUC 15)
Building contextual experiences with the Office Graph (SPSMUC 15)Building contextual experiences with the Office Graph (SPSMUC 15)
Building contextual experiences with the Office Graph (SPSMUC 15)
 
Building solutions with the Office Graph
Building solutions with the Office GraphBuilding solutions with the Office Graph
Building solutions with the Office Graph
 
Optimizing SharePoint 2013 public-facing websites for Internet search engines
Optimizing SharePoint 2013 public-facing websites for Internet search enginesOptimizing SharePoint 2013 public-facing websites for Internet search engines
Optimizing SharePoint 2013 public-facing websites for Internet search engines
 
Building rich search experiences Apps for SharePoint
Building rich search experiences Apps for SharePointBuilding rich search experiences Apps for SharePoint
Building rich search experiences Apps for SharePoint
 
Building solutions with Office Graph
Building solutions with Office GraphBuilding solutions with Office Graph
Building solutions with Office Graph
 
Building solutions with Office Graph - SharePoint Connect 2014 Amsterdam
Building solutions with Office Graph - SharePoint Connect 2014 AmsterdamBuilding solutions with Office Graph - SharePoint Connect 2014 Amsterdam
Building solutions with Office Graph - SharePoint Connect 2014 Amsterdam
 
SharePoint Connections Amsterdam 2013: Real-life building public-facing websi...
SharePoint Connections Amsterdam 2013: Real-life building public-facing websi...SharePoint Connections Amsterdam 2013: Real-life building public-facing websi...
SharePoint Connections Amsterdam 2013: Real-life building public-facing websi...
 
SPSNL13 - Building intelligent websites with SharePoint 2013
SPSNL13 - Building intelligent websites with SharePoint 2013SPSNL13 - Building intelligent websites with SharePoint 2013
SPSNL13 - Building intelligent websites with SharePoint 2013
 
P&M307 Building intelligent websites with SharePoint 2013
P&M307 Building intelligent websites with SharePoint 2013P&M307 Building intelligent websites with SharePoint 2013
P&M307 Building intelligent websites with SharePoint 2013
 
P&M302 Real-life building public-facing websites with SharePoint 2013
P&M302 Real-life building public-facing websites with SharePoint 2013P&M302 Real-life building public-facing websites with SharePoint 2013
P&M302 Real-life building public-facing websites with SharePoint 2013
 
BIWUG - What’s new in SharePoint 2013 for public-facing websites
BIWUG - What’s new in SharePoint 2013 for public-facing websitesBIWUG - What’s new in SharePoint 2013 for public-facing websites
BIWUG - What’s new in SharePoint 2013 for public-facing websites
 
SharePoint 2010 Web Content Management - The Developer Story
SharePoint 2010 Web Content Management - The Developer StorySharePoint 2010 Web Content Management - The Developer Story
SharePoint 2010 Web Content Management - The Developer Story
 

Dernier

9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataSafe Software
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServiceRenan Moreira de Oliveira
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdfJamie (Taka) Wang
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesDavid Newbury
 

Dernier (20)

9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial DataCloud Revolution: Exploring the New Wave of Serverless Spatial Data
Cloud Revolution: Exploring the New Wave of Serverless Spatial Data
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer ServicePicPay - GenAI Finance Assistant - ChatGPT for Customer Service
PicPay - GenAI Finance Assistant - ChatGPT for Customer Service
 
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
20200723_insight_release_plan_v6.pdf20200723_insight_release_plan_v6.pdf
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Linked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond OntologiesLinked Data in Production: Moving Beyond Ontologies
Linked Data in Production: Moving Beyond Ontologies
 

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!