sharepoint hosted add-in with angularjs and bootstrap

21
Roy Kim @roykimtoronto [email protected] July 2015 SharePoint Hosted Add- in with AngularJS and Bootstrap

Upload: roy-kim

Post on 16-Apr-2017

1.784 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: SharePoint Hosted Add-in with AngularJS and Bootstrap

Roy Kim@roykimtoronto

[email protected] 2015

SharePoint Hosted Add-in with AngularJS and Bootstrap

Page 2: SharePoint Hosted Add-in with AngularJS and Bootstrap

Agenda

CoverPhotos App Requirements SharePoint Add-in design AngularJS and Bootstrap Design Commentary

Page 3: SharePoint Hosted Add-in with AngularJS and Bootstrap

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

Demo

Page 5: SharePoint Hosted Add-in with AngularJS and Bootstrap

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

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

Visual StudioProject

Page 8: SharePoint Hosted Add-in with AngularJS and Bootstrap

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

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

AngularJS vs Alternatives Interest

AngularJS has trending upward search interest than other frameworks

Page 11: SharePoint Hosted Add-in with AngularJS and Bootstrap

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

HTML

Scripts

CSS

Visual Studio SharePointApp Web

NuGet Packages

Page 13: SharePoint Hosted Add-in with AngularJS and Bootstrap

AngularJS

http://devgirl.org/2013/03/21/fun-with-angularjs/

Page 14: SharePoint Hosted Add-in with AngularJS and Bootstrap

AngularJS

https://docs.angularjs.org/tutorial/step_02

Page 15: SharePoint Hosted Add-in with AngularJS and Bootstrap

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

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

.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

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

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

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.

Page 21: SharePoint Hosted Add-in with AngularJS and Bootstrap

Questions?

Feel free to contact! • @roykimtoronto• [email protected]• www.roykim.ca