Menu

Easy Way to get the SharePoint Context

I was thinking how to name that post, and it reminds me how much time I spent trying to get list items from Host Web, or update/insert items somewhere in sub site of Host Web, or another one, when you are trying to get Project Online Context and even you referenced all .js files, it is still complaining. All that happened to me, and one day, I just found a really good solution, which I decided to share today.

I think most of you, at least, heard about Lightswitch and you can find couple posts on my blog about that awesome framework, built by Microsoft. The thing is, guys made it really easy to build apps for SharePoint and I was interested in how they did it. It is always a good practice to see how the monsters of SP made it, so you can learn something.

After 10-20 minutes of reverse engineering, I came up with a file called SPLoader.js. You can grab the file here:SPLoader

So, after all you need to do is to reference that file.

Here is how to use it. Let’s say you need to query List in Provider hosted app:

something

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

functiongetListItems(){

vardeferred=$.Deferred();

SpLoader.ready(function(){

SpLoader.executor.executeAsync(

{

url:

SpLoader.appWebUrl+

"/_api/web/lists/getbytitle('MyList')/items",

method:"GET",

headers:{"Accept":"application/json; odata=verbose"},

success:function(data){

varjsonObject=JSON.parse(data.body);

deferred.resolve(jsonObject);

},

error:function(a,b,c,d){

deferred.resolve();

}

}

);

});

returndeferred.promise();

}

If you look closer at SpLoader file, you will find that all magic is happening here;

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

varscriptbase=hostUrl+"/_layouts/15/";

promise=$.getScript(scriptbase+'MicrosoftAjax.js')

.then(function(){

return$.getScript(scriptbase+'SP.Runtime.js');

})

.then(function(){

return$.getScript(scriptbase+'SP.js');

})

.then(function(){

return$.getScript(scriptbase+'SP.RequestExecutor.js');

})

.then(function(){

return$.getScript(scriptbase+'init.js');

})

//.then(function () {

// return $.getScript(scriptbase + 'PS.js');

//})

.then(function(){

varcon=SP.ClientContext.get_current();

varcontext,factory;

if(!(SP=window.SP)||

!SP.ProxyWebRequestExecutorFactory||

!SP.ClientObject||!SP.ClientContext){

return$.Deferred().reject();

}

context=newSP.ClientContext(appWebUrl);

factory=newSP.ProxyWebRequestExecutorFactory(appWebUrl);

//SpLoader.projContext = PS.ProjectContext.get_current();

context.set_webRequestExecutorFactory(factory);

SpLoader.context=context;

SpLoader.hostWeb=newSP.AppContextSite(context,hostUrl).get_web();

SpLoader.appWeb=newSP.AppContextSite(context,appWebUrl).get_web();

SpLoader.executor=newSP.RequestExecutor(appWebUrl);

})

.always(function(){

// msls_mark(msls_codeMarkers.loadSharePointEnd);

});

You can see that the function loads all .js files in the correct order. (Example: PS.js library will be loaded the last.). You can easily add you code to load UserProfile or Search libraries as well.