When we build SharePoint 2013 Apps, one of the common scenario that we will have is to read the data from Host Web.  This presents a classical Cross-Domain call scenario (where the fully-qualified domain for App Web and Host Web are different). By default, when we access the Host Web resources from App Web either using Java Script Model or Client Object Model, we’d get an access denied error. This fix for this scenario is to leverage javascript client-side solution in the form of (SP.RequestExecutor.JS) file. The cross domain libraries helps us to interact with more one domain in the SharePoint 2013 App through the Proxy. Let’s jump on to the steps.

Open Visual Studio 2013

File –> New –> Project –> Apps for SharePoint 2013 –> SharePoint hosted apps and name the App as ‘ReadHostWeb;

Set the site for debugging, in this case I’m using my Office 365 developer tenant ‘https://mytenant.sharepoint.com’

I’ve created an Announcement list in my Host Web and it has three Columns Title, Body and Version.

Open Default.aspx and paste the following snippet of code inside

<div id="ListFieldDiv"></div>

    <script type="text/javascript">
        var HostWebUrl;
        var AppWebUrl;
        var ListFieldHtml;

        // Load the required SharePoint libraries
        $(document).ready(function () {
            //Get the URI decoded URLs.
            HostWebUrl =
                decodeURIComponent(
                    RetrieveQueryStringParameter("SPHostUrl")
            );
            AppWebUrl =
                decodeURIComponent(
                    RetrieveQueryStringParameter("SPAppWebUrl")
            );

            
            var scriptbase = HostWebUrl + "/_layouts/15/";

            
            $.getScript(scriptbase + "SP.RequestExecutor.js", execCrossDomainRequest);
            
        });


        
        
        function execCrossDomainRequest() {
            
            var executor = new SP.RequestExecutor(AppWebUrl);

            
            executor.executeAsync(
    {
        url:
            AppWebUrl +
            "/_api/SP.AppContextSite(@target)/web/lists('5fabe2a3-7a5f-4444-ba3e-a684558d1e27')/fields?@target='" +
            HostWebUrl + "'",
        method: "GET",
        headers: { "Accept": "application/json; odata=verbose" },
        success: successHandler,
        error: errorHandler
    }
);

        }

        
        function successHandler(data) {

            var jsonObject = JSON.parse(data.body);
            var results = jsonObject.d.results;

            for (i = 0; i < results.length; i++)
            {
                if (results[i].Hidden == false) {

                    

                    if ((results[i].TypeDisplayName == "Single line of text") || (results[i].TypeDisplayName == "Multiple lines of text")) {

                        
                        if (results[i].Title == "undefined" || results[i].Title == "Version")
                        {


                        }
                        else
                        {
                            ListFieldHtml = ListFieldHtml + "<p>" + results[i].Title;

                        }

                        
                    }
                }
                

            }
            
            document.getElementById("ListFieldDiv").innerHTML = ListFieldHtml;

            
            


            
        }

       
        function errorHandler(data, errorCode, errorMessage) {
            document.getElementById("AnnouncementsDiv").innerText =
                "Could not complete cross-domain call " + errorMessage;
        }

       
        function RetrieveQueryStringParameter(ParamsforRetrieval) {
            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] == ParamsforRetrieval)
                    return singleParam[1];
            }
        }
        </script>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 Subscribe to my blog