Making Rest API Call Using AngularJS From Office 365 SharePoint Hosted App To Host Web/Parent Web Application

Making Rest API Call using AngularJS from Office 365 SharePoint hosted app to host Web/Parent Web Application.

In order to get the values from host Website to the app, we need to use the item given below.

Note

The name "apps for SharePoint" is changing to "SharePoint Add-ins"

• Get URL’s

HostWebURL and AppWebURL, which can be obtained from the query string, once the add-ins are deployed.

JavaScript code given below is used to get the value from the URL.

var hostweburl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
var appweburl = decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));

function getQueryStringParameter(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 decodeURIComponent(singleParam[1]);
    }
}

• Load SP.Requestor.js file and execute the function, once the file is loaded and execute CrossDomainRequest.

When we create new SharePoint add-in initially, we will get an error while making AJAX call, using jQuery or $http call, using AngularJS.

403 -Access is denied error.

CROS request error.

Using JavaScript Object model and whole CRUD operation will be possible but using jQuery or AngularJS , consuming list REST API will be useful. In order to do it, we use SP.Requestor.js file, which enables us to make CROS call to SharePoint Office 365 sites.

When we use the cross-domain library, the Webpages in your add-in/app can access the data in add-in domain and the SharePoint domain. The developer site, which is used to develop an app and host SharePoint site, once the add-in is published in an app catalogue.

The cross-domain library is a client-side alternative in the form of a JavaScript file (SP.RequestExecutor.js), which is hosted in SharePoint Website, which can be referenced in add-in. The cross-domain library lets us interact with more than one domain in remote add-in page through a proxy. 

var scriptbase = hostweburl + "/_layouts/15/";
$.getScript(scriptbase + "SP.RequestExecutor.js", execCrossDomainRequest);

function execCrossDomainRequest() {
    var executor = new SP.RequestExecutor(appweburl);
    console.log('url' + appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle(" + "'" + listName + "'" + ")/Items?@target='" + hostweburl + "'");
    executor.executeAsync({
        url: appweburl + "/_api/SP.AppContextSite(@target)/web/lists/getbytitle(" + "'" + listName + "'" + ")/Items?@target='" + hostweburl + "'",
        method: "GET",
        headers: {
            "Accept": "application/json; odata=verbose"
        },
        success: successHandlerNew,
        error: function errorHandlerNew(error) {
            console.log('List not found' + error.statusText);
        }
    });
}

function successHandlerNew(data) {
    var jsonObject = JSON.parse(data.body);
    var results = jsonObject.d.results;
}