SharePoint Saturday Paris 2016 - AngularJS with the Microsoft Graph
SharePoint Hosted Add-in with AngularJS and Bootstrap
-
Upload
roy-kim -
Category
Technology
-
view
1.797 -
download
2
Transcript of SharePoint Hosted Add-in with AngularJS and Bootstrap
![Page 2: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/2.jpg)
Agenda
CoverPhotos App Requirements SharePoint Add-in design AngularJS and Bootstrap Design Commentary
![Page 3: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/3.jpg)
Requirements• Create, manage and display a photo rotating
banner with headlines and page links.• As a content author, add an app part, add to
any web part page so that page visitors have a visual headline of announcements or navigation links
• As a content manager, add/remove photos, text, link and configurations settings.
![Page 4: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/4.jpg)
Demo
![Page 5: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/5.jpg)
SharePoint Add-in Hosting OptionsSharePoint-hosted
• No C# server-side code-behind.
• Instances of app's client side files are stored in an "hidden" sub site
• Own domain
• Design decision: Cover photos app is simple UI display with no UI processing and business logic that require high CPU and memory usage.
![Page 6: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/6.jpg)
SharePoint DesignCover Photos App Web
CoverPhotos Library
Setting List
Content TypesPhoto
Setting
Boostrap.cssApp.css
Content
adminApp.jsScripts
Default.aspxsettings.aspx
adminPhoto.aspx
Pages
setting
Photo 1Photo 2Photo N
Host Web
Cover Photos App Part
App Manifest
![Page 7: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/7.jpg)
Visual StudioProject
![Page 8: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/8.jpg)
AngularJS• AngularJS is a structural framework for dynamic single page
applications.• Features:
• 2-way data binding: automatic sync between view (DOM) and model (JS objects)
• Controller: the behavior and model behind the DOM• Routing: navigating between views• Dependency Injection: loosely coupled services that
allows for unit testing and apply separation of concerns principle.
• Built-in services: remote http communication, url management, logging, localization, formatting data displayed, "jQuery", caching, animation, form validation
![Page 9: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/9.jpg)
AngularJS Alternatives• KnockoutJS
Create rich, responsive display and editor user interfaces with a clean underlying data model. Any time you have sections of UI that update dynamically, KO can help you implement it more simply and maintainably.
• EmberJSBuild ambitiously large web applications that are competitive with native apps.
• BackboneJSGive your JS App some Backbone with Models, Views, Collections, and Events.
![Page 10: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/10.jpg)
AngularJS vs Alternatives Interest
AngularJS has trending upward search interest than other frameworks
![Page 11: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/11.jpg)
Bootstrap Front End FrameworkBootstrap is a front-end framework containing HTML/CSS/JS UI templates for typography, forms, buttons, navigation, responsive design, tables, images, progress bar, tool tips, drop downs.
www.getbootstrap.com
![Page 12: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/12.jpg)
HTML
Scripts
CSS
Visual Studio SharePointApp Web
NuGet Packages
![Page 13: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/13.jpg)
AngularJS
http://devgirl.org/2013/03/21/fun-with-angularjs/
![Page 14: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/14.jpg)
AngularJS
https://docs.angularjs.org/tutorial/step_02
![Page 15: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/15.jpg)
View (DOM)
adminApp.js coverPhotoModel.js
Default.aspx
setting.aspx
adminPhoto.aspx
Admin Controller
AdminPhoto Controller
Setting Controller
Routing
SharePoint Server API
$Scope
$Scope
$Scope
CoverPhoto Service
Angular Design
JSOM
![Page 16: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/16.jpg)
App Default.aspx<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div ng-app="photoApp" ng-controller="AdminController" class="container">
<h2>Preview</h2> <div id="slides"> <div class="slides_container"> {{Slides.userMessage}} </div> <a class="prev"><</a> <a href="#" class="next">></a> </div> <br />
<a id='settingsNavLink' href="#/settings">Settings</a> | <a id='adminphotosNavLink' href="#/adminphotos">Admin Photos</a>
<div class="view-animate-container"> <div ng-view class="view-animate"></div> </div> </div>
<!-- angular scripts --> <script type="text/javascript" src="../Scripts/adminApp.js"></script></asp:Content>
SharePoint ASP content control
Angularroot
element
Controller
expression and scope property
routing
routing
![Page 17: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/17.jpg)
.controller('SettingsController', ['$routeParams', '$scope', function ($routeParams, $scope) { $scope.settingsData = {}; var admin = { save: function save() {. $.when(_CPApp.UpdateSettings($scope.settingsData)).done(function () { _CPApp.getCoverPhotosListDataFromAppPage(); }).fail(function (status) { $.extend($scope.settingsData, _CPApp.Settings()); $scope.$apply(); }); } }
$scope.save = admin.save; $scope.Slides = { userMessage: '0' };
coverPhotosVM = new coverPhotosViewModel(); coverPhotosVM.listName = "CoverPhotos"; var options = { … }; var _CPApp = new CoverPhotosApp(options); $.when(_CPApp.GetSettings()).done(function (status) { _CPApp.getCoverPhotosListDataFromAppPage(); $.extend($scope.settingsData, _CPApp.Settings()); $scope.Slides = _CPApp.Slides(); $scope.$apply(); });}])
Settings Controller
Controller
Scope property and behavior definition
Scope initialization / property data population
![Page 18: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/18.jpg)
CoverPhotos
var camlQuery = new SP.CamlQuery();
photoListItems = photoList.getItems(camlQuery);clientContext.load(photoListItems);clientContext.executeQueryAsync(Function.createDelegate(self, self.onGetPhotosList), Function.createDelegate(self, self.onListDataFailed));
self.onGetPhotosList = function (sender, args) { var photoVM = {}; var listItemEnumerator = photoListItems.getEnumerator(); if (photoListItems.get_count() == 0) {
self.Slides.userMessage = "No photos available. Please upload photos."; return; } else { self.Slides.userMessage = ""; } while (listItemEnumerator.moveNext()) { var oListItem = listItemEnumerator.get_current(); photoVM = new photoModel(); photoVM.id = oListItem.get_id(); photoVM.name = oListItem.get_item('Title');
photoVM.fileRef = oListItem.get_item('FileRef');
Callback
Get Photos from library
Return self.Slides to $scope
![Page 19: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/19.jpg)
JSOM vs REST API
Comparison
JavaScript Object Model Intellisense assistance Easier to create and update data “Object-oriented”Batch requests
REST API Easier to troubleshoot and debug with browser and fiddler Batch requests only in Office 365
Preference for JSOM for Cover Photos App
![Page 20: SharePoint Hosted Add-in with AngularJS and Bootstrap](https://reader034.fdocuments.net/reader034/viewer/2022042619/586fcd2a1a28aba24c8b739b/html5/thumbnails/20.jpg)
Final Thoughts
• AngularJS is a powerful framework with lots of features; but can a bit overkill for small apps such as this Cover Photos App
• However, I would still learn and apply AngularJS for future projects as it is the most popular SPA framework and will get easier to implement with more experience.
• AngularJS indeed has a steep learning curve.• Bootstrap is the most popular front end framework and is the current
standard. • AngularJS and Bootstrap are easy to leverage in SharePoint Add-ins
and can be leveraged similarly with even farm solutions in application pages and web parts.