Retrieve SharePoint APP Host Web List Items in SharePoint Hosted App


In this article I would like to share the code to get the list items from the app host web site collection in a SharePoint Hosted app using JavaScript.

Use the following code to get the items:

  1. var context = SP.ClientContext.get_current();
  2. var user = context.get_web().get_currentUser();  
  3. var hostWebUrl;  
  4. var appWebUrl;  
  5. var listName = "NewsList";  
  6. var itemCollection;  
  7. var lists;  
  8. var ctx;  
  9. var appCtxSite;  
  10. var listEnumerator;  
  11. var currentlist;  
  12. var list;  
  13. var currentListItems;  
  14. var itemTitle;  
  15. var web;  
  16. var siteUrl;  
  17.   
  18. // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model  
  19. $(document).ready(function ()   
  20. {       
  21.     hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));    
  22.     appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));  
  23.     getListItemFromHostWeb();  
  24.       
  25. });  
  26.   
  27.   
  28. //This function is used to get the hostweb url  
  29. function manageQueryStringParameter(paramToRetrieve)   
  30. {  
  31.     var params =  
  32.     document.URL.split("?")[1].split("&");  
  33.     var strParams = "";  
  34.   for (var i = 0; i < params.length; i = i + 1)  
  35.    {  
  36.         var singleParam = params[i].split("=");  
  37.         if (singleParam[0] == paramToRetrieve)   
  38.     {  
  39.             return singleParam[1];  
  40.         }  
  41.     }  
  42. }  
  43.   
  44. //get the list data from host web  
  45. function getListItemFromHostWeb() {  
  46.     debugger;  
  47.     ctx = new SP.ClientContext(appWebUrl);      
  48.     appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);  
  49.     web = appCtxSite.get_web();  
  50.     lists = web.get_lists();  
  51.     ctx.load(lists);  
  52.     ctx.executeQueryAsync(IsListExist, OnGetListItemFailure);  
  53.   
  54. }  
  55.   
  56. //check whether list is exist or not  
  57. function IsListExist() {  
  58.     debugger;  
  59.     //alert('check whether list is exist or not');  
  60.     var isListAvail = false;  
  61.     listEnumerator = lists.getEnumerator();  
  62.     while (listEnumerator.moveNext()) {  
  63.         currentlist = listEnumerator.get_current();   
  64.         if (currentlist.get_title() == listName) {  
  65.             isListAvail = true;  
  66.             //Read list items from the lists  
  67.             getListItemCollection();  
  68.         }  
  69.     }  
  70.     if (!isListAvail) {  
  71.         alert('News List not available in this site');  
  72.     }  
  73.   
  74. }  
  75.   
  76. //getItemsCollection from sp host web list  
  77. function getListItemCollection() {  
  78.     debugger;  
  79.     list = lists.getByTitle(listName);  
  80.     var camlQuery = new SP.CamlQuery();  
  81.     camlQuery.set_viewXml("<View>" + "<RowLimit>2</RowLimit>" + "</View>");  
  82.     itemCollection = list.getItems(camlQuery);  
  83.     ctx.load(itemCollection);  
  84.     ctx.executeQueryAsync(OnGetListItemSuccess, OnGetListItemFailure);  
  85. }  
  86.   
  87. // Get Items from List Item collection  
  88. function OnGetListItemSuccess() {  
  89.     debugger;  
  90.     var imageStr = "";  
  91.     if (itemCollection.get_count() > 0) {  
  92.         var enumerator = itemCollection.getEnumerator();  
  93.         while (enumerator.moveNext()) {  
  94.             currentListItems = enumerator.get_current();  
  95.             itemTitle = currentListItems.get_item("Title");  
  96.             var itemImageURL = currentListItems.get_item("ImageUrl");  
  97.             document.getElementById('lblTitle').innerHTML += itemTitle + ",";             
  98.             if (itemImageURL != "" && itemImageURL!=null) {                
  99.                 imageStr += "<img src='" + itemImageURL.get_url() + "' alt='No Image' />";  
  100.   
  101.             }  
  102.         }  
  103.         document.getElementById('image').innerHTML = imageStr;  
  104.         
  105.     }  
  106. }  
  107.     
  108. function OnGetListItemFailure(sender, args) {  
  109.     alert('Failed to get user name. Error:' + args.get_message());  
  110. }  
note

In the AppManifest.xml file give Read permission to the SiteCollection.

Summary

In this article we explored how to retrieve list items in a SharePoint Hosted app from an app host web list.