![Page 1: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/1.jpg)
The New Way to Build Collaborative Applications with SharePoint and SharePoint Online
Bob GermanPrincipal Architect
Power Up Your Project Sites:
![Page 2: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/2.jpg)
Agenda
• Shared Collaboration Workspaces• SharePoint Provisioning – Then and Now•Demonstration and Code Walk-through• Content Provisioning with PowerShell•Web Parts• Forms
![Page 3: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/3.jpg)
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
![Page 4: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/4.jpg)
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
![Page 5: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/5.jpg)
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
![Page 6: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/6.jpg)
“Wait? No feature framework?”
We are indeed gradually moving away from feature framework to alternative patterns…
(from Microsoft Patterns and Practices team, February 2015)
![Page 7: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/7.jpg)
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
![Page 8: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/8.jpg)
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
![Page 9: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/9.jpg)
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?
![Page 10: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/10.jpg)
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
![Page 11: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/11.jpg)
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
![Page 12: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/12.jpg)
Commonly Used Angular Services
$http HTTPcalls
$scopeAccess toview scope
$locationBrowser location
$log Logging service
$qPromises
$interval$timeout
Timerservices
Custom
![Page 13: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/13.jpg)
Microsurvey App
main.html
mainController.js
surveyService.js
spDataService.js
settingsController.js
settings.html
initU
I.js
Default.aspx
VIEWS
CONTROLLERS
SERVICES
![Page 14: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/14.jpg)
SharePoint
Hosted App
Drag and Drop
Deployment
Centrally Managed
demo• List Provisioning• Web Parts• Custom List
Forms
![Page 15: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/15.jpg)
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
![Page 16: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/16.jpg)
demoJavascript Injection
![Page 17: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/17.jpg)
![Page 18: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/18.jpg)
demoJavascript Injection
![Page 19: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/19.jpg)
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
![Page 20: Power up your Project Sites - SPS New Hampshire 2015](https://reader035.vdocuments.mx/reader035/viewer/2022062401/58ee1ba61a28abae778b4681/html5/thumbnails/20.jpg)
Thank you