Question

I have found allot of resources which point out how to handle a simple promise or deferred Async call in SharePoint apps. (for example) But I cant understand how to properly use a promise if I am performing some work on the returned data before I want the promise resolved.

below I have a restHelper.js Module which contains the ajax call and then I have the App.js calling the restHelper function, how can I defer the drawUserData() function until the objectCache has been populated by the _onRestPeopleSearchSucceeded function?

TIA

restHelper.js

var restHelper = (function () {
var objectCache = {};

var peopleSearchQuery = function (options) {
    _restPeopleSearchQuery(options);
};

var getQueryStringParameter = function (urlParameterKey) {
    return _getQueryStringParameter(urlParameterKey);
};

var _restPeopleSearchQuery = function (options) {
    var searchUrl = "/_api/search/query?querytext='" + options.queryProperty + ":" + options.queryValue + "'&sourceid='b09a7990-05ea-4af9-81ef-edfab16c4e31'";
    var appWebUrl = getQueryStringParameter("SPAppWebUrl");
    var fullUrl = appWebUrl + searchUrl;
    jQuery.ajax(
        {
            url: fullUrl,
            type: "GET",
            headers: {
                "accept": "application/json; odata=verbose",
                "content-type": "application/json; odata=verbose"
            },
            success: _onRestPeopleSearchSucceeded,
            error: _onRestPeopleSearchFailed
        }
        );
}

var _onRestPeopleSearchSucceeded = function (data) {
    // fill cache object with people objects
    var data = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results
    for (var i = 0; i < data.length; i++) {
        var results = data[i].Cells.results;
        // Create an object for each person and store it in the global store
        var person = {};
        // Loop through all returned data and create key value pair object for each
        // TODO, check if array or object, map will not work for objects of objects
        results.map(function (p) {
            var newPropertyName = p.Key
            // ChangeCase js Package to change the capitalisation on the first letter (the Key in this data is capitalised) 
            person[newPropertyName] = p.Value
        });
        // Create SearchPeopleCache object in the ObjectCache if it doesnt already exist and store the person Object
        if (!(objectCache.hasOwnProperty('searchPeopleResults'))) {
            objectCache['searchPeopleResults'] = {};
        }
        if (!(objectCache.searchPeopleResults[person.UserProfile_GUID])) {
            objectCache.searchPeopleResults[person.UserProfile_GUID] = person;
        }
    }
}

var _onRestPeopleSearchFailed = function (err) {
    // return error to Console or log error to App
    console.log(err);
}

// Allows pulling variables from query string paramters
var _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 decodeURIComponent(singleParam[1]);
    }
}

return {
    objectCache: objectCache,
    peopleSearchQuery: peopleSearchQuery,
    getQueryStringParameter: getQueryStringParameter,
};

})();

app.js

$(document).ready(function () {
    // Prepare Global Window variables
    window.departmentProperty = "ICT Infrastructure - Sharepoint"; // decodeURIComponent(getQueryStringParameter("Department"));
    window.hostUrl = decodeURIComponent(restHelper.getQueryStringParameter("SPHostUrl"));
    window.appWebUrl = restHelper.getQueryStringParameter("SPAppWebUrl");
    window.scriptbase = hostUrl + "/_layouts/15/";
    window.profilesSearchArray = {};
    // set window department name
    $('#teamProperty').text(departmentProperty);
    // Get initial data from search and set window
    var options = {
        queryProperty: "Department",
        queryValue: departmentProperty
    };

    // Create new Promise for Async Call
    restHelper.peopleSearchQuery(options);
    // below relies on above completing
    drawUserData();
});
Was it helpful?

Solution

As your restHelper.peopleSearchQuery(options);is a promise, you can call that function and add a then() which in turn calls drawUserData

 restHelper.peopleSearchQuery(options).then(drawUserData);
Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top