Cross Domain Library in SharePoint 2013

Let’s have a look at the Cross Domain Library in SharePoint 2013

In this series of posts, I will be posting my experience following along to the Microsoft Virtual Academy course on SharePoint Online Development for Office 365.

Let’s see how to use the cross domain library from a provider hosted app.

Create a provider hosted app as mentioned in my blog post Provider Hosted App on Office 365

The only change is to select the ASP.Net Web Forms application instead of the MVC application while creating the project.
Delete the code to write out the Web.Title within the using statement

using (var clientContext = spContext.CreateUserClientContextForSPHost())

When we create a provider hosted app project, it creates two projects one is the SharePoint app project(this gets deployed to the app web) and the other is the web app project(which is either the MVC application or the web forms application which goes to the remote web in the provider hosted app).

The SharePoint App project has two items by default, AppIcon.png and AppManifest.xml. Right click on the SharePoint App project, and add a list item with the custom list type.

Add some data to the list in the elements.xml. This is to ensure that an app web is created. This is required for the authentication using the client side JavaScript.

Add a JavaScript file to the web application project in the scripts folder. And then, add the following code to the script file.

(function () {
    "use strict";

    jQuery(function () {

        //Get Host and App web URLS
        var appWebUrl = "";
        var spHostUrl = "";
        var args = window.location.search.substring(1).split("&");

        for (var i = 0; i < args.length; i++) {
            var n = args[i].split("=");
            if (n[0] == "SPHostUrl")
                spHostUrl = decodeURIComponent(n[1]);
        }

        for (var i = 0; i < args.length; i++) {
            var n = args[i].split("=");
            if (n[0] == "SPAppWebUrl")
                appWebUrl = decodeURIComponent(n[1]);
        }

        //Load Libraries
        var scriptbase = spHostUrl + "/_layouts/15/";

        jQuery.getScript(scriptbase + "SP.RequestExecutor.js", function (data) {

            //Call Host Web with REST
            var executor = new SP.RequestExecutor(appWebUrl);
            executor.executeAsync({
                url: appWebUrl + "/_api/web/lists/getbytitle('Terms')/items",
                method: "GET",
                headers: { "accept": "application/json;odata=verbose" },
                success: function (data) {

                    var results = JSON.parse(data.body).d.results;
                    for (var i = 0; i < results.length; i++) {
                        $("#termList").append("

<li>" + results[i].Title + "</li>


");
                    }
                },
                error: function () {
                    alert("Error!");
                }
            });

        });

    });

}());

In the above code, we are retrieving the host url and the app web url from the query string. We then load the RequestExecutor script file and get the RequestExecutor object. Using this object we can make a REST call to retrieve the list item details and display as a bulleted list.

In the Default.aspx, add the following script references in the head section:

<script type="text/javascript" src="../Scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="../Scripts/crossdomain.js"></script>

Next, replace the empty div with the following:

<div id="chrome_ctrl_placeholder"></div>


<div>

<ul id="termList"></ul>

</div>

Now if you run the application, you should see a list of items we added to the SharePoint list.

If we wanted to access a list in the host web, we have to provide a url like

appWebUrl + "/_api/SP.AppContextSite(@hostWeb)/web/lists/getbytitle('Fruits')/items?hostWeb='"+spHostUrl+"'"

here we have added SP.AppContextSite(@hostWeb) and pass in the host url at the end of the url.

If we run the code now, we’ll get a blank page. This is because we haven’t requested the permissions to read the host web. In case you got an error, then there was some other problem. To request the permissions, double click the appmanifest.xml, go to the permissions tab, Select List for scope and Read for Permission.

If we run the code now, we should see a list of items from the host web.

The post Cross Domain Library in SharePoint 2013 appeared first on SharePoint Guide.