0

I am using a provider hosted app and developing the app using angular js and SharePoint REST API for fetching List data.

I am facing an issue with calling SharePoint lists through multiple cross domain calls to SharePoint REST API. I have 2 controllers calling the same service on different user interactions. The first call gets the data properly but when the user clicks a button to call second controller on a different user interaction to fetch data from a different list i get a request timed out error. I am initiating the SP.RequestExecutor every time the service is called. I am not sure why this is working when i call the service multiple times through one controller but not when i call the service through another controller. Could you please let me know if the above issue you were facing has been resolved? Below is my code sample.

Service Call:

var getRequest = function (listTitle) {
 deferred = $q.defer();
  var executor = new SP.RequestExecutor(appweburl);
            executor.executeAsync({

                url: query,
                method: "GET",
                headers: { "Accept": "application/json; odata=verbose" },
                success: function (data, textStatus, xhr) {
                    deferred.resolve(JSON.parse(data.body));
                },
                error: function (xhr, textStatus, errorThrown) {
                    deferred.reject(JSON.parse(xhr.body).error);
                }
            }); return deferred.promise;

        };
        return {
            getRequest: getRequest

        };

Controller 1:

app.controller("progressController", ["$scope", "baseSvc", "$q", "$filter",
function ($scope, baseSvc, $q, $filter) {
   $scope.profiles = [];
                     executeOnSPLoaded(function () {
                      $q.all([baseSvc.getRequest('CandidateList'), baseSvc.getRequest('GeneralSearchDocuments')]).then(function (data) {
            $scope.profilesFromSp = data[0].d.results;
           $scope.Candidatedocuments = data[1].d.results;
           $scope.loadData();
            });
   });

Controller 2: (Fails when user clicks button to execute this call)

app.controller("documentsController", ["$scope", "baseSvc", "$q", "$filter",
    function ($scope, baseSvc, $q, $filter) {
            executeOnSPLoaded(function () {
            $q.all([baseSvc.getRequest('GeneralSearchDocuments')]).then(function (data) {
                  $scope.documents = data[0].d.results;

            });
        });

Load SP.js & SP.RequestExecutor

function executeOnSPLoaded(loaded) {

    var hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
    var appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
    var scriptbase = hostweburl + "/_layouts/15/";
    $.when(
        //$.getScript(scriptbase + "SP.Runtime.js"),
        $.getScript(scriptbase + "SP.js"),
        $.getScript(scriptbase + "SP.RequestExecutor.js"),
        $.Deferred(function (deferred) {
            $(deferred.resolve);
        })
    ).done(function () {
        loaded();
          });
}
  • What is the error in Controller 2? – Atish Dipongkor - MVP Jan 15 '16 at 4:10
  • Hi Atish, Thanks for your response. I have 2 tabs on my UI. On page load the first controller 1 loads and calls the service properly and gets the data to bind it to my view. When i click on the second tab the controller 2 gets called and requests the service to get data from a different SP list. I see that the call is being made but when the code executes the REST call i get an error message saying "Request aborted or times out". I am not sure if this is happening due to multiple loading of SP.js and SP.RequestExecutor.js files. But when i reload the page on tab 2 it executes and gets data. – user545359 Jan 15 '16 at 4:19
  • Ya... That could be the reason. You are loading SP.js multiple times. That is not needed I guess. Load sp.js only once and then call angular.element(document).ready(function() { angular.bootstrap(document, ['Your App Name']); }); – Atish Dipongkor - MVP Jan 15 '16 at 5:48
1

You loading SP.js and SP.RequestExecutor.js in every call to baseSvc. That is not needed. Try following

  1. Load SP.js and SP.RequestExecutor.js in document ready
  2. Then initialize angular app

Example

$(document).ready(function() {
    var hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
    var appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
    var scriptbase = hostweburl + "/_layouts/15/";
    $.when(
        //$.getScript(scriptbase + "SP.Runtime.js"),
        $.getScript(scriptbase + "SP.js"),
        $.getScript(scriptbase + "SP.RequestExecutor.js"),
        $.Deferred(function(deferred) {
            $(deferred.resolve);
        })
    ).done(function() {
        angular.element(document).ready(function() {
            angular.bootstrap(document, ['Your App Name']);
        });
    });
});

In the controllers, just call something like

$q.all([baseSvc.getRequest('GeneralSearchDocuments')]).then(function(data) {
    $scope.documents = data[0].d.results;
});

Meaning remove all executeOnSPLoaded.

Also see Angular's Manual Initialization

  • Thank you very much Atish this fixed my issue :). Also, i am trying to use CAML query REST API to fetch the files from multiple folders. I have posted my issue in the below link could you please let me know what am i missing here? I followed one of your posts on code project about the same and not able to figure out the issue. Could you please help me with this issue sharepoint.stackexchange.com/questions/167515/… – user545359 Jan 18 '16 at 22:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.