After you register your custom applications with Azure Active Directory, it’s straightforward to build a completely remote application for working with Office 365 SharePoint data which depends only on the SharePoint REST web services.

Angular SharePoint App Demo

Below is a demo of a Business and Client Management application I wrote in AngularJS. Specifically Angular 1.7. Actually, I’ve already migrated the app to Angular 6, but it still needs some clean-up before it’s demo-ready.

Regardless of the Angular version, the SharePoint REST web service calls are the same; those are covered below after the brief demo for context:

This shows:

1. The use of SharePoint REST Web Services to create an item in a list – creating client.
2. The use of SharePoint REST Web Services to read all items in a list – getting clients.

Calling SharePoint REST Web Services

Here’s a snippet of code I use to switch through the appropriate actions and preset my query and headers before executing the web service call:

switch (action) {
    case "readAllItems":
        restquery = localStorage.getItem("tenantUrl") + "/sites/sitename/_api/web/lists/GetByTitle('" + listTitle + "')/items";
        headers = {
           'Authorization': 'Bearer ' + localStorage["adal.idtoken"],
           'Accept': 'application/json;odata=verbose'
        };
        break;
    case "create":
        restquery = localStorage.getItem("tenantUrl") + "/sites/sitename/_api/web/lists/GetByTitle('" + listTitle + "')/items";
        headers = {
          'Authorization': 'Bearer ' + localStorage["adal.idtoken"],
          'Accept': 'application/json;odata=verbose',
          'Content-Length': bodyLength,
          'Content-Type': 'application/json;odata=verbose',
          'X-RequestDigest': sdata.data.FormDigestValue
        };
        break;
}

You can see that I’ve used the ADAL library as a core component of the solution. I definitely recommend this for Angular 1.7. However, for Angular 6 and Angular 7, you should consider writing the AAA code yourself. Well, let me qualify that and write that I wrote the code myself because I couldn’t find a suitable library at the time, but that may have actually changed by now. If you can find an Angular 6 / Angular 7 compatible version of ADAL supported by Microsoft…use that.

So, after you get the REST call setup, and your headers configured, you can then configure your HTTP GET and HTTP POST calls. The former is used for “readAllItems” and the latter is used for creating new items:

case "readAllItems":
    $http.get(restquery, { headers: headers }).then(function (sdata) {
        obj.resolve(sdata);                                           
    }, function (edata) {        
        obj.reject(edata);                                            
    }).finally(function () { });
break;
case "create":
    $http.post(restquery, body, { headers: headers }).then(function (sdata) {                                                
        obj.resolve(sdata)
    }, function (edata) {                                                
        obj.reject(edata);
    }).finally(function () { });
break;

I basically follow this same pattern for all CRUD operations against list items and document library items…I’ll cover those in future posts.

Thanks for reading.

Categories: Angular, Apps, Azure, Office 365 and O365, SharePoint, Software Development

Tags: Ajax, Angular and AngularJS, Apps, Azure, Development, JavaScript, Office 365 and O365, SharePoint