다음을 통해 공유

Getting started with Bootstrap and AngularJS (for the SharePoint Developer)

  • 아티클

Over past few months I’ve traveled the world talking to developers about building applications with Office 365. One of my favorite topics is building apps with Bootstrap and AngularJS. I like this topic because it illustrates the “new” Microsoft and our commitment to open source technologies. Bootstrap and AngularJS are wildly popular frameworks and we want to enable developers to use these and just about any other framework/library with Office 365. For some traditional SharePoint/Office developers, these technologies can be unfamiliar given they were difficult/impossible to leverage in the past.

In this video I’ll illustrate the basics of Bootstrap and AngularJS from the ground up. I’ll start with a completely blank page and build it into a completed app in easy to follow steps. Finally, I’ll import the HTML/JS/CSS assets into a SharePoint app in Visual Studio and connect everything with REST. This is a beginner’s guide to Bootstrap and AngularJS focused on traditional SharePoint developers.

[View:https://www.youtube.com/watch?v=LXfVHrdqj7I]

Request Digest and Bootstrap

Two-thirds of the video is a pure beginner’s guide to Bootstrap and AngularJS with no mention of SharePoint/Office. However, the end discusses specific considerations of leveraging these technologies in a SharePoint app. Specifically, the challenge of Bootstrap and the Request Digest value for a page.

The SharePoint masterpage adds a hidden “__RequestDigest” input field to all SharePoint pages. The value of this input field must be included in the header of HTTP POSTS against the SharePoint REST endpoints (read: add/update/delete). However, if we are building an app that leverages Bootstrap, it is unlikely we will leverage the SharePoint masterpage for app pages. This means the “__RequestDigest” field will not exist on app pages. Instead, we can make an explicit REST call to get the Request Digest value when our app loads. I’ve created an ensureFormDigest function that I always add to my AngularJS service(s). I can wrap all my SharePoint operations in this function to ensure I have a Request Digest value available for POSTS.

Angular App/Service for SharePoint and ensureFormDigest

var app = angular.module('artistApp', ['ngRoute']).config(function ($routeProvider) {    $routeProvider.when('/artists', {        templateUrl: 'views/view-list.html',        controller: 'listController'    }).when('/artists/add', {        templateUrl: 'views/view-detail.html',        controller: 'addController'    }).when('/artists/:index', {        templateUrl: 'views/view-detail.html',        controller: 'editController'    }).otherwise({        redirectTo: '/artists'    });}); app.factory('shptService', ['$rootScope', '$http',  function ($rootScope, $http) {      var shptService = {};       //utility function to get parameter from query string      shptService.getQueryStringParameter = function (urlParameterKey) {          var params = document.URL.split('?')[1].split('&');          var strParams = '';          for (var i = 0; i < params.length; i = i + 1) {              var singleParam = params[i].split('=');              if (singleParam[0] == urlParameterKey)                  return singleParam[1];          }      }      shptService.appWebUrl = decodeURIComponent(shptService.getQueryStringParameter('SPAppWebUrl')).split('#')[0];      shptService.hostWebUrl = decodeURIComponent(shptService.getQueryStringParameter('SPHostUrl')).split('#')[0];       //form digest opertions since we aren't using SharePoint MasterPage      var formDigest = null;      shptService.ensureFormDigest = function (callback) {          if (formDigest != null)              callback(formDigest);          else {              $http.post(shptService.appWebUrl + '/_api/contextinfo?$select=FormDigestValue', {}, {                  headers: {                      'Accept': 'application/json; odata=verbose',                      'Content-Type': 'application/json; odata=verbose'                  }              }).success(function (d) {                  formDigest = d.d.GetContextWebInformation.FormDigestValue;                  callback(formDigest);              }).error(function (er) {                  alert('Error getting form digest value');              });          }      };       //artist operations      var artists = null;      shptService.getArtists = function (callback) {          //check if we already have artists          if (artists != null)              callback(artists);          else {              //ensure form digest              shptService.ensureFormDigest(function (fDigest) {                  //perform GET for all artists                  $http({                      method: 'GET',                      url: shptService.appWebUrl + '/_api/web/Lists/getbytitle(\'Artists\')/Items?select=Title,Genre,Rating',                      headers: {                          'Accept': 'application/json; odata=verbose'                      }                  }).success(function (d) {                      artists = [];                      $(d.d.results).each(function (i, e) {                          artists.push({                              id: e['Id'],                              artist: e['Title'],                              genre: e['Genre'],                              rating: e['AverageRating']                          });                      });                      callback(artists);                  }).error(function (er) {                      alert(er);                  });              });          }      };       //add artist      shptService.addArtist = function (artist, callback) {          //ensure form digest          shptService.ensureFormDigest(function (fDigest) {              $http.post(                  shptService.appWebUrl + '/_api/web/Lists/getbytitle(\'Artists\')/items',                  { 'Title': artist.artist, 'Genre': artist.genre, 'AverageRating': artist.rating },                  {                  headers: {                      'Accept': 'application/json; odata=verbose',                      'X-RequestDigest': fDigest                  }                  }).success(function (d) {                      artist.id = d.d.ID;                      artists.push(artist);                      callback();                  }).error(function (er) {                      alert(er);                  });          });      };       //update artist      shptService.updateArtist = function (artist, callback) {          //ensure form digest          shptService.ensureFormDigest(function (fDigest) {              $http.post(                  shptService.appWebUrl + '/_api/web/Lists/getbytitle(\'Artists\')/items(' + artist.id + ')',                  { 'Title': artist.artist, 'Genre': artist.genre, 'AverageRating': artist.rating },                  {                      headers: {                          'Accept': 'application/json; odata=verbose',                          'X-RequestDigest': fDigest,                          'X-HTTP-Method': 'MERGE',                          'IF-MATCH': '*'                      }                  }).success(function (d) {                      callback();                  }).error(function (er) {                      alert(er);                  });          });      };       //genre operations      var genres = null;      shptService.getGenres = function (callback) {          //check if we already have genres          if (genres != null)              callback(genres);          else {              //ensure form digest              shptService.ensureFormDigest(function (fDigest) {                  //perform GET for all genres                  $http({                      method: 'GET',                      url: shptService.appWebUrl + '/_api/web/Lists/getbytitle(\'Genres\')/Items?select=Title',                      headers: {                          'Accept': 'application/json; odata=verbose'                      }                  }).success(function (d) {                      genres = [];                      $(d.d.results).each(function (i, e) {                          genres.push({                              genre: e['Title']                          });                      });                      callback(genres)                  }).error(function (er) {                      alert(er);                  });              });          }      };       return shptService;  }]);

 

I do this so frequently, that I’ve created a Visual Studio code snippet for getting app web/host web URLs and ensureFormDigest. You can download it at the bottom of this post.

Conclusion

Hopefully you can see how Bootstrap and AngularJS can greatly accelerate web development. In the past these were difficult to use in conjunction with SharePoint/Office development, but not with the app model. Hopefully this video helped you get a better understanding of Bootstrap, AngularJS, and how they can work with SharePoint/Office. You can download the completed solution and code snippet below.

ArtistCatalog Solution

Angular Service Code Snippet

Comments

  • Anonymous
    February 24, 2015
    Exactly what I was looking for, Thanks

  • Anonymous
    February 24, 2015
    The comment has been removed

  • Anonymous
    February 25, 2015
    It looks interesting. I tried to open the project in my machine installed VS2013, SharePoint 2013, it says "The target version of the SharePoint site is 15.0.4420.1017, which is lower than the minimum supported SharePoint version of the app. To fix this, go to the SharePoint tab on the app for SharePoint project’s properties page, and change the Target SharePoint Version property to the version of the SharePoint site or lower." how can I open this project ?  What do I need to do?

  • Anonymous
    February 26, 2015
    The comment has been removed

  • Anonymous
    April 16, 2015
    The comment has been removed

  • Anonymous
    May 12, 2015
    The comment has been removed

  • Anonymous
    May 13, 2015
    This is an awesome introduction to Angular, thank you for this.  If there are other videos from you on SharePoint hosted custom apps or resources for next steps I would love to know. Once again, this is well done.

  • Anonymous
    May 16, 2015
    The comment has been removed

  • Anonymous
    July 11, 2015
    See this Module for Sharepoint + AngularJs github.com/.../SennitShareAngularJs

  • Anonymous
    July 30, 2015
    Hi, I couldn't open the project in VisualStudios Community 2013, does it require VisualStudio 2015? Thanks!

  • Anonymous
    August 25, 2015
    I tried running your solution but I am facing below error while adding an item from the form:- WcfDataServices 5.6 is missing. Original error: System.InvalidOperationException: The required version of WcfDataServices is missing. Please refer to go.microsoft.com/fwlink for more information.     at Microsoft.SharePoint.Client.WcfDataServices56Info..ctor(ClientServiceHost serviceHost)     at Microsoft.SharePoint.Client.WcfDataServices56Info.GetInstance(ClientServiceHost serviceHost)     at Microsoft.SharePoint.Client.Rest.RestRequestProcessor.ReadRequestODataObject(ServerStub serverStub, Object entity)     at Microsoft.SharePoint.Client.Rest.RestRequestProcessor.InvokeMethodWithRequestODataEntry(Object target, ServerStub serverStub, String methodName)     at Microsoft.SharePoint.Client.Rest.RestRequestProcessor.TryAddEntity(Object entity, ServerStub serverStub, Object& newEntity)     at Microsof... 4ca8279d-2331-e0c3-0d58-c7250bc627c4 ...t.SharePoint.Client.Rest.RestRequestProcessor.Process()     at Microsoft.SharePoint.Client.Rest.RestRequestProcessor.ProcessRequest() 4ca8279d-2331-e0c3-0d58-c7250bc627c4 SocialRESTExceptionProcessingHandler.DoServerExceptionProcessing - SharePoint Server Exception [System.InvalidOperationException: The required version of WcfDataServices is missing. Please refer to go.microsoft.com/fwlink for more information.     at Microsoft.SharePoint.Client.WcfDataServices56Info..ctor(ClientServiceHost serviceHost)     at Microsoft.SharePoint.Client.WcfDataServices56Info.GetInstance(ClientServiceHost serviceHost)     at Microsoft.SharePoint.Client.Rest.RestRequestProcessor.ReadRequestODataObject(ServerStub serverStub, Object entity)     at Microsoft.SharePoint.Client.Rest.RestRequestProcessor.InvokeMethodWithRequestODataEntry(Object target, ServerStub serverStub, String methodName)     at Microsoft.SharePoint.Client.Rest.RestRequestProcessor.TryAd... 4ca8279d-2331-e0c3-0d58-c7250bc627c4 ...dEntity(Object entity, ServerStub serverStub, Object& newEntity)     at Microsoft.SharePoint.Client.Rest.RestRequestProcessor.Process()     at Microsoft.SharePoint.Client.Rest.RestRequestProcessor.ProcessRequest()] 4ca8279d-2331-e0c3-0d58-c7250bc627c4 serviceHost_RequestExecuted End CSOM Request. Duration=145 milliseconds.   I tried googling in but could not find anything related to this. Can you please help in resolving this issue?

  • Anonymous
    February 16, 2016
    The comment has been removed

  • Anonymous
    March 03, 2016
    Great post! I am using the exact solution provided by you for my on-prem SP farm. I have just made one change for the SharePoint version property in the Project Properties. It builds and installs perfectly fine. But for every operations, including the getArtists throws the exception "Error getting form digest value." Seems like the http request never completes successfully. Appreciate, if you can take a minute to respond to this issue. Thanks! Nch