ReferenceError: SP is not defined error in Provider Hosted App

Question

I've created Provider Hosted app. I'm using client object model in my app. When I try to call this code I get

ReferenceError: SP is not defined

var context = SP.ClientContext.get_current();

I've tried out with different sp.js call like below but I'm not got any solution:

First way:

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>

Second way:

<script type="text/ecmascript" src="/_layouts/SP.Core.js"></script>

Third way:

<script  type="text/javascript" src="/_layouts/sp.runtime.js"></script>
<script  type="text/javascript" src="/_layouts/sp.js"></script><script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/ecmascript" src="/_layouts/15/SP.Core.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>

but nothing will work for me.

Answer 1

First, you need to have a SharePoint app web in your provider hosted app project in order to make calls back into SharePoint using the Cross Domain Library (this is not included by default in a provider hosted app solution)

Second, you'll need to load the following JS files from from the layouts directory of your SharePoint site (you can do this by including them in your project directly, or by loading them with jQuery on the page you want to work with it) in this order:

• MicrosoftAjax.js
• SP.Runtime.js
• SP.js
• you also probably need SP.RequestExecutor.js if you want to access SP data in the host or app web

You can load these using the standard script tags on your app page, or dynamically using jQuery's getScript method -- I've included an example implementation to read the title of the app web as well:

// retrieve the appWebUrl and hostWebUrl from the querystring somewhere above here
// you'll need them to retrieve the scripts and make the CSOM calls
var scriptBase = hostweburl + "/_layouts/15/";
$.getScript(scriptBase + "MicrosoftAjax.js").then(function (data) {
    return $.getScript(scriptbase + "SP.Runtime.js");
}).then(function (data) {
    return $.getScript(scriptbase + "SP.js");
}).then(function (data) {
    $.getScript(scriptBase + "SP.RequestExecutor.js");
}).then(function (data) {
    var ctx = new SP.ClientContext(appWebUrl),
        factory = new SP.ProxyWebRequestExecutorFactory(appWebUrl),
        web;

    ctx.set_webRequestExecutorFactory(factory);
    web = ctx.get_web();
    ctx.load(web);
    ctx.executeQueryAsync(function() {
        // log the name of the app web to the console
        console.log(web.get_title());
    }, function(sender, args) {
        console.log("Error : " + args.get_message());
    });
});

Note your app will need explicit permissions if you attempt to access data that is in the host web (provider hosted apps have full control of their respective app webs by default).

For a more thorough explanation of the technique as well as how to access data in the host web (not just the app web such as I've done) see this video by Scott Hillier and Ted Pattison at the Microsoft Virtual Academy: Deep Dive into the Office 365 App Model

You'll want Module 6, 28:00 (Programming in Javascript)

Answer 2

SP is undefined because it is on the SharePoint server and your Provider hosted app is running on another web server. So any references to SP.JS are invalid. You can't use SharePoint javascript directly in an your provider hosted app.

You can try the following steps in your page to access this:

Access SharePoint 2013 data from add-ins using the cross-domain library