SharePoint Hosted Add-in with AngularJS and Bootstrap
Download as pptx, pdf1 like3,054 views
The document describes a SharePoint hosted add-in that uses AngularJS and Bootstrap to create a rotating banner app. The app allows adding and managing photos, headlines and links. It uses AngularJS for two-way data binding, controllers and routing. Bootstrap is used for layout and styling. The add-in retrieves photos from a SharePoint library using JSOM and displays them with Angular bindings. The document provides an overview of the app requirements, architecture, AngularJS and Bootstrap usage, and code snippets from the Angular controllers.
More Related Content
What's hot (20)
Similar to SharePoint Hosted Add-in with AngularJS and Bootstrap (20)
More from Roy Kim (13)
Recently uploaded (20)
SharePoint Hosted Add-in with AngularJS and Bootstrap
- 1. Roy Kim @roykimtoronto [email protected] July 2015 SharePoint Hosted Add-in with AngularJS and Bootstrap
- 2. A g e n d a CoverPhotos App Requirements SharePoint Add-in design AngularJS and Bootstrap Design Commentary
- 3. 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.
- 4. Demo
- 5. SharePoint Add-in Hosting Options SharePoint-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.
- 6. SharePoint Design Cover Photos App Web CoverPhotos Library Setting List Content Types Photo Setting Boostrap.css App.css Content adminApp.js Scripts Default.aspx settings.aspx adminPhoto.aspx Pages setting Photo 1 Photo 2 Photo N Host Web Cover Photos App Part App Manifest
- 8. 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
- 9. 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. • EmberJS Build ambitiously large web applications that are competitive with native apps. • BackboneJS Give your JS App some Backbone with Models, Views, Collections, and Events.
- 10. AngularJS vs Alternatives Interest AngularJS has trending upward search interest than other frameworks
- 11. Bootstrap Front End Framework Bootstrap 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
- 12. Visual Studio SharePoint App Web NuGet Packages
- 15. View (DOM) adminApp.js coverPhotoModel. js Default.aspx setting.aspx adminPhoto.aspx Admin Controller AdminPhoto Controller Setting Controller R o u t i n g SharePoint Server API $Scope $Scope $Scope CoverPhoto Service Angular Design JSOM
- 17. .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
- 18. 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
- 19. 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
- 20. 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.
- 21. Questions? Feel free to contact! • @roykimtoronto • [email protected] • www.roykim.ca