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