sharepoint hosted add-in with angularjs and bootstrap

Roy Kim@roykimtoronto

roykimtoronto@gmail.comJuly 2015

SharePoint Hosted Add-in with AngularJS and Bootstrap

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• roykimtoronto@gmail.com• www.roykim.ca