sharepoint hosted add-in with angularjs and bootstrap
TRANSCRIPT
Agenda
CoverPhotos App Requirements SharePoint Add-in design AngularJS and Bootstrap Design Commentary
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.
Demo
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.
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
Visual StudioProject
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
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.
AngularJS vs Alternatives Interest
AngularJS has trending upward search interest than other frameworks
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
HTML
Scripts
CSS
Visual Studio SharePointApp Web
NuGet Packages
AngularJS
http://devgirl.org/2013/03/21/fun-with-angularjs/
AngularJS
https://docs.angularjs.org/tutorial/step_02
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
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
.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
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
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
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.
Questions?
Feel free to contact! • @roykimtoronto• [email protected]• www.roykim.ca