Article 20 from 30 : Implementing Cross Domain calls

30 Articles App Series, Apps, SharePoint 2013 1 Minute

This post is article 20 from the 30 Articles App series for SharePoint

I assume you have read article -19 to understand basic about cross-domain calls in SP Apps.

In this article I will discuss about implementing cross-domain communication from an SharePoint app.

crossdomaincalls

  • Let’s get started with placing SP.RequestExecuter.js library ( you can find this in LAYOUTS folder ) into you app project. you can put this file in scripts folder in your app project.
  • Register the trusted domain(s) in your app manifest like below.
    Lets say for example I want to put otherdomain.com as a trusted domain so I am registering that as following.

     <AppPrincipal> 
   <Internal AllowedRemoteHostUrl="https://otherdomain.com/" /> 
 </AppPrincipal>
  • With this library you can use REST or JSOM to communicate with SharePoint
  • For REST option you will need to create a new SP.RequestExecutor as following. 
    var executor = new SP.RequestExecutor(appweburl);
executor.executeAsync(
{
url:
appweburl +
"/_api/SP.AppContextSite(@target)/web/lists/getbytitle('aanuslist')?@target='" + targeturl+ "'" ,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: successHandler,
error: errorHandler
}
);
  • If you choose JSOM then get client context as below. 
    var context = new SP.ClientContext(appweburl);    
// context: The ClientContext object provides access to the web and lists objects. 
var factory =  new SP.ProxyWebRequestExecutorFactory(appweburl); 
// factory: Initialize the factory object with the app web URL. 
context.set_webRequestExecutorFactory(factory); 
var contextt = new SP.AppContextSite(context, targeturl);

//Get the web and list objects and prepare the query 
var web = contextt.get_web(); 
var list = web.get_lists().getByTitle("aanuslist"); 
var camlString = "<View> <ViewFields>" +
                 "<FieldRef Name='Title' />" +           
                 "</ViewFields> </View>";
var camlQuery = new SP.CamlQuery(); 
camlQuery.set_viewXml(camlString); 
allItems= list.getItems(camlQuery); 
context.load(allItems, "Include(Title)"); 
//Execute the query with all the set options and parameters 
context.executeQueryAsync(successHandler, errorHandler);
  • Make sure in both scenarios your page includes reference to the cross-domain js library

Happy reading… and see you guys for the next article 🙂

Published by aanuwizard

Published

5 thoughts on “Article 20 from 30 : Implementing Cross Domain calls”

  2. where your code will be running? on a javascript in a SP server? in a javascript in an app? why you should use cross domain call when you send appweburl to SP.RequestExecutor(appweburl);?? you used otherdomain and you send appwebUrl to RequestExecutor? I don’t understand. how it could be a cross domain?

    1. Hi kourosh,

      Q. Where your code will be running? On a javascript in a SP server? In a javascript in an app?

      Ans>> Your code resides in javascript code on your app pages and also could be hosted in SharePoint, but javascript runs on client.

      Q. Why you should use cross domain call when you send appweburl to SP.RequestExecutor(appweburl);?? You used otherdomain and you send appwebUrl to RequestExecutor? I don’t understand. How it could be a cross domain?

      Ans>>When you get executor object (like new SP.RequestExecutor(appweburl) ), you are asking sharepoint to let you allow cross-domain call from your appweb context. Fetching data from other sharepoint site , other than appweb is – other domain.

      And then the executor will make cross-domain call using AppContextSite like /_api/ SP.AppContextSite (@target) from the proxy page provided from sharepoint.

      I hope that answer your question.
      -Aanu

  4. hi
    I have been struggling to get a app to communicate with host web – I can pick out the valid appweb and hostweb urls from the ul when the app executes but I get a runtime issue when I try to access the host web context.
    var spHostUrl = decodeURIComponent(getQueryStringParameter(‘SPHostUrl’));
    var factory = new SP.ProxyWebRequestExecutorFactory(context.get_url());
    // factory: Initialize the factory object with the app web URL.
    context.set_webRequestExecutorFactory(factory);
    var hostWebContext = new SP.AppContextSite(context, spHostUrl);
    var hostWeb = hostWebContext.get_web();
    alert(hostWeb.get_description());
    0x800a139e – JavaScript runtime error: The property or field ‘Description’ has not been initialized. It has not been requested or the request has not been executed. It may need to be explicitly requested.
    Any ideas – I am thinking that provider hosted has to be easier if you need to do anything serious

Comments are closed.