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:

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;
  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. });
  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. }
  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. }
  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. }
  71. }
  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. }
  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. }
  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.