Post on 16-Apr-2017
SharePoint Framework, React, Office UI Fabric
SONJA MADSENSONJASAPPS
SPONSORS
SharePoint Framework CLIENT-SIDE WEB PARTS
LIST-BASED AND PAGE-BASED APPLICATIONSWEBHOOKS
Sonja Madsen MICROSOFT MVP, SONJASAPPSBEST INTERNATIONAL DEVELOPER
SharePoint Framework, React, Office UI Fabric
Bigger, better, faster
Office UI Fabric
• dev.office.com/fabric/styles• Fonts, colors• Grid• Icons• Controls
The Grid
DEMO OFFICE UI FABRIC
• SharePoint on-premise
• Office 365
No isolated app web
No app domain
Development• Visual Studio Code, Visual Studio• TypeScript• React is a suggested framework• Office UI Fabric
Development
&
Visual Studio CodeVisual Studio
& WORKBENCH
Workbench
DEMO WEB PART AND THE WORKBENCH
What’s new• TypeScript –> JavaScript• LESS -> CSS• .spapp package• Hosting of js and other files• No cross-domain• No .aspx page with HTML
Why TypeScriptcontext = new SP.ClientContext.get_current();
var context
var context
var context
var context
JavaScript Patternsfunction getImages() { context = new SP.ClientContext.get_current(); var request = new SP.WebRequestInfo(); var url = rssurl; var account = getProperty("Account");}
var myApp = (function () { var getImages = function () { context = new SP.ClientContext.get_current(); var request = new SP.WebRequestInfo(); var url = rssurl; var account = getProperty("Account");};
.spapp SharePoint App Catalog
.spapp package
No .wsp, no .js, no .css, no images
Microsoft Azure CDN point of presence (POP) locations
.js file on CDN
.js file in Style Library
.js file in the Scripts folder
.js file in Style Library
Hosting on a CDN or remote server• Updates and versioning• Price• IP: Anonymous access to .js and .css files that are no
longer within the app• CDN hosting and security: files that have access to your
data• Reference my .js files - highjack functionality and design
Reactjs• React is front end library developed by Facebook• Used for handling view layer for web and mobile apps• JSX − JSX is JavaScript syntax extension• Components − everything is a component• Unidirectional data flow and Flux − React
implements one way data flow• Virtual DOM which is JavaScript object• Inline templating and JSX
DEMO REACT
List-based applications
A list with custom list form pages
Main page
Any other page
New item, Edit item, Display item
DEMO LIST-BASED APPLICATION
Page-based applications
Site Pages Library Pages
DEMO PAGE-BASED APPLICATION
Webhooks• List item receivers• Add item, delete item, check-out, check-in
SharePoint Add-ins - Advantages• You can hide the lists from end-user• Both pages and an app part• .aspx page – HTML• Images, scripts, stylesheets hosted on SharePoint• Isolated is not always a bad thing
SharePoint Framework - Advantages• Responsive mobile friendly• No iframe• Dynamic properties• Webhooks• List-based and Page-based• No need for cross-domain library to access SharePoint
resources
@SONJAMADSEN SP2013.BLOGSPOT.COM DEV@SONJASAPPS.COM
thank youquestions?
live ratingsSP2013.BLOGSPOT.COMSONJAMADSEN
spca.biz/NKLM