Get Image From SharePoint App Host Web Picture Library Using JavaScript

In this article I would like to share the code to get the Image from an APP host web picture library in a SharePoint hosted APP.

Use the following code to get an image from a library using the JavaScript object model:

  • getLibraryfromHostweb: This method is used to get all the libraries from the app host web.

  • IsListExist: On the success method of getLibraryfromHostweb, it will check whether the library (var libraryName = "NewsPictureLibrary";) is already available or not.

  • getListItemCollection: If the list is available it will call the getListItemCollection method, it will get the item collection from the current library with Query.

  • OnGetListItemSuccess: Then finally get the image name from the current library in this success event.
Variables declaration:
  1. var libraryName = "NewsPictureLibrary";  
  2. var hostWebUrl;  
  3. var appWebUrl;  
  4. var ctx;  
  5. var appCtxSite;  
  6. var web;  
  7. var libraries;  
  8. var listEnumerator;  
  9. var currentlibrary;  
  10. var library;  
  11.   
  12. //This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model  
  13. $(document).ready(function () {  
  14. // Get the URI decoded URLs.  
  15.     hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));  
  16.     appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));  
  17. //calling the get image library method in ready function to get image on when page is ready  
  18.     getLibraryfromHostweb();  
  19. });  
  20.   
  21. //This function is used to get the host web url  
  22. function manageQueryStringParameter(paramToRetrieve) {  
  23.     var params =  
  24.     document.URL.split("?")[1].split("&");  
  25.     var strParams = "";  
  26.     for (var i = 0; i < params.length; i = i + 1) {  
  27.         var singleParam = params[i].split("=");  
  28.         if (singleParam[0] == paramToRetrieve) {  
  29.             return singleParam[1];  
  30.         }  
  31.     }  
  32. }  
  33.   
  34. //Get Image from Picture Library  
  35. function getLibraryfromHostweb ()  
  36. {  
  37. //Get the app web context   
  38.     ctx = new SP.ClientContext(appWebUrl);   
  39.   //Get the app web context   
  40.     appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);  
  41. //get current web from host web  
  42.     web = appCtxSite.get_web();  
  43. //get all libraries from web  
  44.     libraries = web.get_lists();  
  45. // .load() tells CSOM to load the properties of this object  
  46.     ctx.load(libraries);  
  47. // now start the asynchronous call and perform all commands  
  48.     ctx.executeQueryAsync(IsListExist, OnGetListItemFailure);  
  49. // method will exit here and IsListExist or OnGetListItemFailure will be called asynchronously  
  50. }  
  51.   
  52. //check whether list is exist or not  
  53. function IsListExist() {  
  54.     debugger;  
  55.     //alert('check whether list is exist or not');  
  56.     var isListAvail = false;  
  57.     listEnumerator = libraries.getEnumerator();  
  58.     while (listEnumerator.moveNext()) {  
  59.      currentlibrary = listEnumerator.get_current();  
  60. //check whether the library name is equal to current library   
  61.         if (currentlibrary.get_title() == libraryName) {  
  62.             isListAvail = true;  
  63.             //Retrieve list items from the lists  
  64.             getListItemCollection();  
  65.         }  
  66.     }  
  67.     if (!isListAvail) {  
  68.         alert('News Library is not available in this site');  
  69.     }  
  70.   
  71. }  
  72.   
  73. //Get image collection from Library  
  74. function getListItemCollection() {  
  75.     debugger;  
  76. //Get the library by Title  
  77.     library = libraries.getByTitle(libraryName);  
  78. //get two items on library using caml Query  
  79.     var camlQuery = new SP.CamlQuery();  
  80.     camlQuery.set_viewXml("<View>" + "<RowLimit>2</RowLimit>" + "</View>");  
  81. //returns the item collectionbased on the query.  
  82. // “getItems” is one of the method that is used to retrieve the items from the list using the listitem object. This method specifies which items to return.  
  83.     itemCollection = library.getItems(camlQuery);  
  84.     ctx.load(itemCollection);  
  85.     ctx.executeQueryAsync(OnGetListItemSuccess, OnGetListItemFailure);  
  86. }  
  87.   
  88. //Get Image name from Library  
  89. function OnGetListItemSuccess() {  
  90.     debugger;  
  91.     var imageStr = "";  
  92.     var ImageName;  
  93. //get_count() is used to get the items from current library  
  94.     if (itemCollection.get_count() > 0) {  
  95.         var enumerator = itemCollection.getEnumerator();  
  96.         while (enumerator.moveNext()) {  
  97.             var currentListItems = enumerator.get_current();  
  98. //get Image Name from current Item  
  99.             ImageName = currentListItems.get_item("FileLeafRef");  
  100.             }  
  101.         }     
  102.     }  
  103.   
  104. //Failure method  
  105. function OnGetListItemFailure(sender, args) {  
  106.     alert('Failed to get user name. Error:' + args.get_message());  
  107. }  
note

In the AppManifest.xml file give read permission to the Site Collection.

Summary

In this article we explored how to get an image from a SharePoint app host web picture library using the JavaScript object model in a SharePoint Hosted App.

Up Next
    Ebook Download
    View all
    Learn
    View all