The New Way to Build Collaborative Applications with SharePoint and SharePoint Online

Bob GermanPrincipal Architect

Power Up Your Project Sites:

Agenda

• Shared Collaboration Workspaces• SharePoint Provisioning – Then and Now•Demonstration and Code Walk-through• Content Provisioning with PowerShell•Web Parts• Forms

Shared Workspaces

Shared documents and listsDomain-specific web parts, forms, viewsIT standardizes, users customize

Business Workspace SubjectConsulting EngagementsInformation Technology Projects

Insurance CounterpartiesManufacturing ProductsPharmaceuticals CompoundsProperty Management Properties

2003• Site and List

Templates

2007• Features• Farm Solutions• Web Templates

2010• Sandboxed

Solutions

2013• App Model;

“Storefront”• Sandboxed

Solutions (partly) deprecated

Content Provisioning Challenges

It’s never been easy…

Challenges• Solutions are brittle and hard to migrate

(Two words: “Fab 40”.)• Most solutions are difficult to provision and update at scale

(e.g. 1,000 copies of a sandboxed solution)

No Tools Limited Tools Good Tools Great Tools

Content Provisioning Challenges

… and it just got a lot worse!

2003• Site and List

Templates

2007• Features• Farm Solutions• Web Templates

2010• Sandboxed

Solutions

2013• App Model;

“Storefront”• Sandboxed

Solutions (partly) deprecated

2014• HOLD EVERYTHING!• PnP Team advises

changing the way we do everything!

• Suddenly Microsoft says to stop using Features andTemplates and use Remote Provisioning – but tools arefew

• Office 365 offers little centralized content management;without Farm Solutions there is no way to manage per-sitecustomizations

No Tools Limited Tools Good Tools Great Tools Limited

Tools

“Wait? No feature framework?”

We are indeed gradually moving away from feature framework to alternative patterns…

(from Microsoft Patterns and Practices team, February 2015)

Remote ProvisioningThe “Other” App Model

It’s simple:

Content is created directly in a SharePointsite using any remote API(CSOM, JSOM, SOAP, REST)

Examples:.NET Code in PowerShell or a console

applicationJavascript in a SharePoint Hosted

App or Content Editor Web Part.NET Code in a Provider Hosted AppThe Mechanical Turk approach

(A person manually creates contentusing a web browser)

The Mechanical Turk simulated a chess playing computer using a person hidden inside the machine

Remote Provisioning: The “Other” App Model

Add-in Models Remote Provisioning

Complete access to site (e.g. Branding)

Direct access to page (e.g. Connected Web Parts)

Ease of Data AccessEnd-user additions / modificationsProtection from Untrusted CodeStorefront DistributionCentralized Distribution and Management

App Script Parts• Commonly used on the Internet called ”Web

Widgets”, ”Plugins”, ”Embeds”, etc.• It’s just a clever piece of HTML and Javascript that

acts like a web part• Why not use the same pattern in SharePoint?

What is AngularJS?

• Build complex apps that run on a web page

• Maintained by Google – a good bet for sustained support

• HTML Templates with 2-way data binding

• MVC pattern separates code from DOM manipulation – improves testability

• Adds new HTML elements and attributes for building dynamic applications

• Dependency Injection and Unit Testing

• Simulate pages and navigation on a single HTML page

• Flexible data presentation using Filters

Anatomy of an AngularJS Application

View(HTML with Bindings)

Controllermanipulate scope to control the UI

Services

WebServices

SCOPE

Module

Directivesnew elements and

attributes

Routesnavigation within single-

page app

Web Page

Commonly Used Angular Services

$http HTTPcalls

$scopeAccess toview scope

$locationBrowser location

$log Logging service

$qPromises

$interval$timeout

Timerservices

Custom

Microsurvey App

main.html

mainController.js

surveyService.js

spDataService.js

settingsController.js

settings.html

initU

I.js

Default.aspx

VIEWS

CONTROLLERS

SERVICES

SharePoint

Hosted App

Drag and Drop

Deployment

Centrally Managed

demo• List Provisioning• Web Parts• Custom List

Forms

OfficeDev Patterns and Practices

https://github.com/OfficeDev/PnP

OfficeDev PnPCore Library (C#)

CSOM“15”

CSOM“16”

PowerShellCommands CDN ManagerProvisioning

Samples

YourCode

SharePoint 2013 SharePoint Online

demoJavascript Injection

demoJavascript Injection

Resources

PnP PowerShell Cmdlet Reference http://bit.ly/1KVgrqqAngularJS Tutorial http://bit.ly/18AjTWI Angular JS Training on PluralSight(one of many!)

http://bit.ly/1BY6QL0

How to complete basic operations using SP2013 REST API’s http://bit.ly/1MyirkK

Multiple AngularJS Web Parts on a Page(“The Well-Tempered AngularJS Web Part”

http://bit.ly/1T80iQO

New Guidance from Microsoft for Packaging and Deploying SharePoint Solutions

http://bit.ly/1F54S7L

@Bob1German

Thank you