Step 1 : Create a List ex: TestList and attach few images
Step 2 : Copy and Pastet the below coding in App.js
Step 2 : Copy and Pastet the below coding in App.js
var Items = null;
'use strict';
var listItems;
var hostweburl = decodeURIComponent(getQueryStringParameter('SPHostUrl'));
var appweburl = decodeURIComponent(getQueryStringParameter('SPAppWebUrl'));
$(document).ready(function () {
SP.SOD.executeFunc('sp.js', 'SP.ClientContext', ListItems)
});
function ListItems() {
var context = new SP.ClientContext(appweburl);
var ContextSite = new SP.AppContextSite(context, hostweburl);
var web = ContextSite.get_web();
context.load(web);
var list = web.get_lists().getByTitle('TestList');
var caml = new SP.CamlQuery();
caml.set_viewXml("<View><Query><FieldRef Name='Title' /></Query></View>"); // U can
Items = list.getItems(SP.CamlQuery.createAllItemsQuery());
context.load(Items, 'Include(AttachmentFiles)');
context.executeQueryAsync(onSucceededCallback, onFailedCallback);
}
function onSucceededCallback(sender, args) {
var enumerator = Items.getEnumerator();
var myText = '';
for (var i = 0; i < Items.get_count() ; i++) {
var item = Items.getItemAtIndex(i);
//print attachments
var attachments = item.get_attachmentFiles();
for (var j = 0; j < attachments.get_count() ; j++) {
var attachment = attachments.getItemAtIndex(j);
var img = new Image(150, 150);
img.src = attachment.get_serverRelativeUrl();
myDiv.appendChild(img);
myText += attachment.get_serverRelativeUrl();
console.log(attachment.get_serverRelativeUrl());
}
}
}
function onFailedCallback(sender, args) {
var myText = '<p>The request failed: <br>';
myText += 'Message: ' + args.get_message() + '<br>';
myDiv.innerHTML = myText;
}
function getQueryStringParameter(paramToRetrieve) {
var params = document.URL.split("?")[1].split("&");
for (var i = 0; i < params.length; i = i + 1) {
var singleParam = params[i].split("=");
if (singleParam[0] == paramToRetrieve) return singleParam[1];
}
}
Step 3: Copy and Paste the below coding in Default.aspx
<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c"MasterPageFile="~masterurl/default.master" Language="C#" %>
<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities"Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages"Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls"Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%-- The markup and script in the following Content element will be placed in the <head> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
<SharePoint:ScriptLink name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true"Localizable="false" />
<meta name="WebPartPageExpansion" content="full" />
<!-- Add your CSS styles to the following file -->
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<!-- Add your JavaScript to the following file -->
<script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>
<%-- The markup in the following Content element will be placed in the TitleArea of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
Page Title
</asp:Content>
<%-- The markup and script in the following Content element will be placed in the <body> of the page --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
<div id="myDiv"></div>
<div>
<p id="message">
<!-- The following content will be replaced with the user name when you run the app - see App.js -->
</p>
</div>
</asp:Content>
Step 4: Appmainfest.xml
Give permission to Sitecollection - Full Control
Step 5: Deploy the Solution
Step 6:Final Result
