power up your project sites - sps new hampshire 2015
TRANSCRIPT
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