My Apps on the SharePoint Store

My Books

  • Apps
  • Azure
  • REST
  • CSOM/JSOM
  • Service Apps
  • WCF
  • REST/OData
  • CSOM/JSOM
  • SharePoint API
  • Silverlight
  • jQuery

Recent blog posts

User login

Home | Blogs | Stephane Eyskens's blog

Using CSOM from an App Part

Hi,

Since I couldn't find any example on the web showing how to use CSOM from an App Part and since it's actually a bit more tricky than using CSOM from the App itself, I thought it could be a good idea to blog about that!

It might sound so easy to use CSOM from an App Part but just try and you'll most probably face many Javascript errors such as ExecuteOrDelayUntilScriptLoaded is undefined etc... The reason for that is because the App Part is hosted within an IFRAME, meaning that the page loaded within the IFRAME is not aware of the Javascript context defined in the Host Web nor in the App Web of course.

Therefore, you need to make sure to include all the required JS references in the page loaded by the App Part. Those references are:

        

     

 
 
   

Once you have these scripts loaded, you can start using CSOM the usual way. Here is an example that grabs the title of both the Host Web & the App Web

Type.registerNamespace('SilverIT.Core');
SilverIT.Core.GetQueryStringParameter = function (param) {
    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] == param)
            return singleParam[1];
    }
};
Type.registerNamespace('SilverIT.RESTCommunicator');
SilverIT.CSOMCommunicator = function () {
    this.HostWebUrl =
        decodeURIComponent(
            SilverIT.Core.GetQueryStringParameter('SPHostUrl'));
    this.AppWebUrl =
        decodeURIComponent(
            SilverIT.Core.GetQueryStringParameter('SPAppWebUrl'));
    this.AppWebContext = new SP.ClientContext.get_current();
    var proxy = new SP.ProxyWebRequestExecutorFactory(this.AppWebUrl);
    this.AppWebContext.set_webRequestExecutorFactory(
        proxy);
    this.HostWebContext =
     new SP.AppContextSite(
        this.AppWebContext, this.HostWebUrl);
};

SilverIT.CSOMCommunicator.prototype = (function () {
    var SuccessCallback = function (web) {
        return function () {
            alert(web.get_title());
        }
    };
    var ErrorCallback = function (sender, args) {
        alert(args.get_message());
    };
    return {
        GetHostWebTitle: function () {
            var web = this.HostWebContext.get_web();
            this.AppWebContext.load(web);               

            this.AppWebContext.executeQueryAsync(
                SuccessCallback(web),
                ErrorCallback);
        },
        GetAppWebTitle: function () {
            var web =this.AppWebContext.get_web();
            this.AppWebContext.load(web);                
            this.AppWebContext.executeQueryAsync(
                SuccessCallback(web),
                ErrorCallback);
        }
    };
})();
$.getScript("/_layouts/15/sp.requestexecutor.js",
    function () {
        var CSOMCommunitator = new SilverIT.CSOMCommunicator();
        CSOMCommunitator.GetAppWebTitle();
        CSOMCommunitator.GetHostWebTitle();
    }
);

Happy Coding!