Cross Domain and SharePoint Hosted Apps using CSOM

Continuing on from last week blog post on Cross Domain and SharePoint Hosted Apps using REST, today I’m going to show you how to do the same Cross Domain calls but by using CSOM.

If you remember the 2 different calls I made in my project were a call back to the host domain to retrieve the title, and to retrieve all the lists in the host web. Here I’m going to extend that project and include two additional buttons that are going to do exactly the same thing, but using CSOM.

Below is a screen shot where we last left off.

If you were following along, open the solution from last week, and let us continue.

• Open the Default.aspx page. Here we will add the two buttons to the relevant sections. Under the last button with the id=”btnStandardRestGetTitle” but before the </div> lets add the button to get Title via CSOM.

<span><input type="button" id="btnCSOMGetTitle" value="Get Title via CSOM" onclick="getTitleCSOM()" /></span>

• While we are in the Default.aspx page, let us add the button to get the lists via CSOM as well. Under the last button with the id=”btnStandardRestGetLists” but before the </div> lets add the button to get Lists via CSOM.

<span><input type="button" id="btnCSOMGetLists" value="Get Lists via CSOM" onclick="getListsCSOM()" /></span>

• Open up your App.js file. Let us add the two click event handlers for the buttons we just placed on default.aspx

/*Button Click Get CSOM*/
function getTitleCSOM() {
    execCSOMTitleRequest();
}
/*button Click Get List CSOM*/
function getListsCSOM() { execCSOMListRequest();}

• Lastly we are going to add the two functions that returns the title and Lists, with their corresponding Success and Fail handlers.

/*********************************CSOM*****************************************************/
//CSOM Cross Domain call to obtain HostWeb Title
function execCSOMTitleRequest() {
    var context;
    var factory;
    var appContextSite;
    var collList;
    //Get the client context of the AppWebUrl
    context = new SP.ClientContext(appwebUrl);
    //Get the ProxyWebRequestExecutorFactory
    factory = new SP.ProxyWebRequestExecutorFactory(appwebUrl);
    //Assign the factory to the client context.
    context.set_webRequestExecutorFactory(factory);
    //Get the app context of the Host Web using the client context of the Application.
    appContextSite = new SP.AppContextSite(context, hostwebUrl);
    //Get the Web
    this.web = appContextSite.get_web();
    //Load Web.
    context.load(this.web);
    context.executeQueryAsync(
        Function.createDelegate(this, successTitleHandlerCSOM),
        Function.createDelegate(this, errorTitleHandlerCSOM)
        );
    //success Title
    function successTitleHandlerCSOM(data) {
        $('#lblResultTitle').html("<b>Via CSOM the title is:</b> " + this.web.get_title());
    }
    //Error Title
    function errorTitleHandlerCSOM(data, errorCode, errorMessage) {
        $('#lblResultLists').html("Could not complete CSOM call: " + errorMessage);
    }
}
//CSOM Cross domain call to obtain HostWeb Lists
function execCSOMListRequest(){
    var context;
    var factory;
    var appContextSite;
    var collList;
    //Get the client context of the AppWebUrl
    context = new SP.ClientContext(appwebUrl);
    //Get the ProxyWebRequestExecutorFactory
    factory = new SP.ProxyWebRequestExecutorFactory(appwebUrl);
    //Assign the factory to the client context.
    context.set_webRequestExecutorFactory(factory);
    //Get the app context of the Host Web using the client context of the Application.
    appContextSite = new SP.AppContextSite(context, hostwebUrl);
    //Get the Web
    this.web = appContextSite.get_web();
    // Get the Web lists.
    collList = this.web.get_lists();
    //Load Lists.
    context.load(collList);
    context.executeQueryAsync(
        Function.createDelegate(this, successListHandlerCSOM),
        Function.createDelegate(this, errorListHandlerCSOM)
        );
    //Success Lists
    function successListHandlerCSOM() {
            var listEnumerator = collList.getEnumerator();
            $('#lblResultLists').html("<b>Via CSOM the lists are:</b><br/>");
        while (listEnumerator.moveNext()) {
            var oList = listEnumerator.get_current();
            $('#lblResultLists').append(oList.get_title() + " (" + oList.get_itemCount() + ")<br/>");
        }
    }
    //Error Lists
    function errorListHandlerCSOM(data, errorCode, errorMessage) {
        $('#lblResultLists').html("Could not complete CSOM Call: " + errorMessage);
    }
};

• If we now run out solution, you should see all three ways of obtaining the title and lists from the host.

• By clicking Get Title via CSOM this will return the title “Cannonfodder Development” in my case, exactly the same result as if we tried via REST.

• By clicking Get Lists via CSOM this will return all the lists from my host Cannonfodder development, exactly the same list as if we tried via REST.

I hope these two blogs gave you a basic understanding of the different ways you can interact with the host in SharePoint 2013.