Wednesday, 25 September 2019

SharePoint Online - Send E-mail from JavaScript using REST API

Script / App.js
-----------------

 <script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
  <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        //SUBJECT OF THE EMAIL
        //var subject = "SUBJECT OF THE MAIL";
        //CONTENT OF THE MAIL - CAN BE HTML OR PLAIN TEXT.
       // var mailContent = "<h3>Some Heading for the mail</h3><p>Content</p><div>Content</div>";
        //AN ARRAY HAVING THE RECIPIENT DETAILS.
        //THE USERNAME/EMAIL-ID SHOULD BE OF A VALID SHAREPOINT USER.
        //EXTERNAL USERS OR EXTERNAL EMAIL IDS ARE NOT SUPPORTED
       // var toList = ["DOMAIN\\USERNAME", "USER1-EMAIL-ID@DOMAIN.COM"]
        var userid = _spPageContextInfo.userId;
        var currentuseremail;
       
  var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/web/getuserbyid(" + userid + ")";
  var requestHeaders = { "accept" : "application/json;odata=verbose" };
  $.ajax({
    url : requestUri,
    contentType : "application/json;odata=verbose",
    headers : requestHeaders,
    success : onSuccess,
    error : onError
  });

  function onSuccess(data, request){
    var loginName = data.d.Title;
      currentuseremail = data.d.Email;
        }
                                 
  function onError(error) {
    alert("error");
  }
        function processSendEmails() {
            var toList = [$("#txtRecipients").val()]
              var Emailcc = [currentuseremail]
            var body = $("#txtBody").val();
            var subject = $("#txtSubject").val();
            var mailContent = "<h3>Mail Heading </h3><p>" + body + "</p>";
            // Call sendEmail function     
            sendMail(toList,Emailcc, subject, mailContent).done(function (response) {
                alert("Mail Sent.");
             
            }).fail(function () {
                alert("Error while sending mail.");
            });

        }
        //Send-Email
        function sendMail(toList,Emailcc, subject, mailContent) {

        var restUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/SP.Utilities.Utility.SendEmail",
        restHeaders = {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "Content-Type": "application/json;odata=verbose"
        },
        mailObject = {
            'properties': {
                '__metadata': {
                    'type': 'SP.Utilities.EmailProperties'
                },
                'To': {
                    'results': toList
                },
                 'CC': {
                    'results': Emailcc
                },
                'Subject': subject,
                'Body': mailContent,
                "AdditionalHeaders":
                    {
                        "__metadata":
                           { "type": "Collection(SP.KeyValue)" },
                        "results":
                        [
                            {
                                "__metadata": {
                                    "type": 'SP.KeyValue'
                                },
                                "Key": "content-type",
                                "Value": 'text/html',
                                "ValueType": "Edm.String"
                            }
                        ]
                    }

            }
        };
        return $.ajax({
            contentType: "application/json",
            url: restUrl,
            type: "POST",
            data: JSON.stringify(mailObject),
            headers: restHeaders
           
        });
    }

    </script>

Default.aspx
------------------

  <table>
        <tr>
            <td>User Name</td>
            <td>
                <input type="text" name="txtUserName" id="txtUserName" value="" /></td>
         
        </tr>
        <tr>
            <td>Email Id</td>
            <td>
                <input type="text" name="txtRecipients" id="txtRecipients" value="" />               
            </td>
        </tr>
        <tr>
            <td>Subject :
            </td>
            <td>
                <input type="text" name="txtSubject" id="txtSubject" value="" />
            </td>
        </tr>
        <tr>
            <td>Body :

            </td>
            <td>
                <input type="text" name="txtBody" id="txtBody" value="" />

            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>
                <input id="Button1" onclick="processSendEmails()"  type="button" value="SendMail" />

             
            </td>
        </tr>         
    </table>

Custom MasterPage - SharePoint Online site provisioning solutions App using visual studio

Steps to set master page of host web from app web
1. Create a SharePoint hosted app and add a module named as "CustomMasterPage".
2. Download a copy of seattle.master from Master Page gallery.
3. Copy paste this file content into our modules .txt file and do custom changes on it as required (i have just changed the background color and image for demo).
 Tip: Don't change the extension file (.txt) in module otherwise it is not easy to read file content.
4. Refere sp.JS and sp.runtime.JS on default aspx page
5. below code copy paste on App.js
6. Deploy app


MasterPageModule/Elements

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Module Name="MasterPageModule">
    <File Path="MasterPageModule\CustomAppMaster.txt" Url="MasterPageModule/CustomAppMaster.txt" Level="Published" ReplaceContent="TRUE" />
  </Module>

</Elements>



App.JS
-----------------------------------------


'use strict';
window.COB = window.COB || {};

window.COB.HostWebApp = function () {
    var hostWebUrl,
        appWebUrl,
        hostWebContext,
        destinationServerRelativeUrl,
        destinationFileName,

    // locate a file in the app web and retrieve the contents. If successful, provision to host web..
    readFromAppWebAndProvisionToHost = function (appPageUrl, hostWebServerRelativeUrl, hostWebFileName) {
        destinationServerRelativeUrl = hostWebServerRelativeUrl;
        destinationFileName = hostWebFileName;

        var req = $.ajax({
            url: appPageUrl,
            type: "GET",
            cache: false
        }).done(function (fileContents) {
            if (fileContents !== undefined && fileContents.length > 0) {
                uploadFileToHostWebViaCSOM(destinationServerRelativeUrl, destinationFileName, fileContents);
            }
            else {
                alert('Failed to read file from app web, so not uploading to host web..');
            }
        }).fail(function (jqXHR, textStatus) {
            alert("Request for page in app web failed: " + textStatus);
        });
    },

    // utility method for uploading files to host web..
    uploadFileToHostWebViaCSOM = function (serverRelativeUrl, filename, contents) {
        var createInfo = new SP.FileCreationInformation();
        createInfo.set_content(new SP.Base64EncodedByteArray());
        for (var i = 0; i < contents.length; i++) {

            createInfo.get_content().append(contents.charCodeAt(i));
        }
        createInfo.set_overwrite(true);
        createInfo.set_url(filename);
        var files = hostWebContext.get_web().getFolderByServerRelativeUrl(serverRelativeUrl).get_files();
        hostWebContext.load(files);
        files.add(createInfo);

        hostWebContext.executeQueryAsync(onProvisionFileSuccess, onProvisionFileFail);
    },
    onProvisionFileSuccess = function () {
        $('#message').append('<br /><div>File provisioned in host web successfully: ' + destinationServerRelativeUrl + '/' + destinationFileName + '</div>');
        var masterPageUrl = ["/", hostWebUrl.split("/")[3], "/", hostWebUrl.split("/")[4], "/", destinationServerRelativeUrl, "/", destinationFileName].join("");
        setMaster(masterPageUrl);
        //setMaster('/' + destinationServerRelativeUrl + '/' + destinationFileName);
    },
    onProvisionFileFail = function (sender, args) {
        alert('Failed to provision file into host web. Error:' + sender.statusCode);
    },

    // set master page on host web..
    setMaster = function (masterUrl) {
        var hostWeb = hostWebContext.get_web();
       // hostWeb.set_masterUrl(masterUrl);       
        hostWeb.set_customMasterUrl(masterUrl);
        hostWeb.set_masterUrl(masterUrl);
        hostWeb.update();       
        hostWebContext.load(hostWeb);
        hostWebContext.executeQueryAsync(onSetMasterSuccess, onSetMasterFail);
    },
    onSetMasterSuccess = function () {
        $('#message').append('<br /><div>Master page updated successfully..</div>');
    },
    onSetMasterFail = function (sender, args) {
        alert('Failed to update master page on host web. Error:' + args.get_message());
    },

    init = function () {
        var hostWebUrlFromQS = $.getUrlVar("SPHostUrl");
        hostWebUrl = (hostWebUrlFromQS !== undefined) ? decodeURIComponent(hostWebUrlFromQS) : undefined;

        var appWebUrlFromQS = $.getUrlVar("SPAppWebUrl");
        appWebUrl = (appWebUrlFromQS !== undefined) ? decodeURIComponent(appWebUrlFromQS) : undefined;
    }

    return {
        execute: function () {
            init();

            hostWebContext = new SP.ClientContext(window.COB.AppHelper.getRelativeUrlFromAbsolute(hostWebUrl));
            readFromAppWebAndProvisionToHost(appWebUrl + '/MasterPageModule/CustomAppMaster.txt', '_catalogs/masterpage', 'CustomAppMaster.master');
        }
    }
}();
jQuery.extend({  
    getUrlVars: function () {  
        var vars = [], hash;  
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');  
        for (var i = 0; i < hashes.length; i++) {  
            hash = hashes[i].split('=');  
            vars.push(hash[0]);  
            vars[hash[0]] = hash[1];  
        }  
        return vars;  
    },  
    getUrlVar: function (name) {  
        return jQuery.getUrlVars()[name];  
    }  
});
window.COB.AppHelper = {
    getRelativeUrlFromAbsolute: function (absoluteUrl) {
        absoluteUrl = absoluteUrl.replace('https://', '');
        var parts = absoluteUrl.split('/');
        var relativeUrl = '/';
        for (var i = 1; i < parts.length; i++) {
            relativeUrl += parts[i] + '/';
        }
        return relativeUrl;
    },
};
$(document).ready(function () {   
    window.COB.HostWebApp.execute();
});


default.aspx
------------------------

<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%>

<%@ 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 src="/_layouts/15/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="/_layouts/15/sp.core.js" type="text/javascript"></script>
    <script src="/_layouts/15/sp.runtime.js" type="text/javascript"></script>
    <script src="/_layouts/15/sp.js" type="text/javascript"></script>
    <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 >
        <p id="message">
            <!-- The following content will be replaced with the user name when you run the app - see App.js -->
            initializing...
        </p>
    </div>

</asp:Content>


CustomAppMaster.txt / CustomAppMaster.master
-----------------------------------------------------------------------
<%@Master language="C#"%>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Import Namespace="Microsoft.SharePoint.ApplicationPages" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="wssuc" TagName="Welcome" src="~/_controltemplates/15/Welcome.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<SharePoint:SPHtmlTag dir="<%$Resources:wss,multipages_direction_dir_value%>" ID="SPHtmlTag" runat="server" >
<head runat="server">
<meta name="GENERATOR" content="Microsoft SharePoint" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<SharePoint:IECompatibleMetaTag runat="server" />
<meta http-equiv="Expires" content="0" />
<SharePoint:SPPinnedSiteTile runat="server" TileUrl="/_layouts/15/images/SharePointMetroAppTile.png" TileColor="#0072C6" />
<SharePoint:RobotsMetaTag runat="server"/>
<SharePoint:PageTitle runat="server">
<asp:ContentPlaceHolder id="PlaceHolderPageTitle" runat="server">
<SharePoint:ProjectProperty Property="Title" runat="server" />
</asp:ContentPlaceHolder>
</SharePoint:PageTitle>
<SharePoint:SPShortcutIcon runat="server" IconUrl="/_layouts/15/images/favicon.ico?rev=47" />
<SharePoint:StartScript runat="server" />
<SharePoint:CssLink runat="server" Version="15"/>
<SharePoint:ScriptLink language="javascript" name="core.js" OnDemand="true" runat="server" Localizable="false" />
<SharePoint:ScriptLink language="javascript" name="menu.js" OnDemand="true" runat="server" Localizable="false" />
<SharePoint:ScriptLink language="javascript" name="callout.js" OnDemand="true" runat="server" Localizable="false" />
<SharePoint:ScriptLink language="javascript" name="sharing.js" OnDemand="true" runat="server" Localizable="false" />
<SharePoint:ScriptLink language="javascript" name="suitelinks.js" OnDemand="true" runat="server" Localizable="false" />
<SharePoint:CustomJSUrl runat="server" />
<SharePoint:SoapDiscoveryLink runat="server" />
<SharePoint:AjaxDelta id="DeltaPlaceHolderAdditionalPageHead" Container="false" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server" />
<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true" />
<asp:ContentPlaceHolder id="PlaceHolderBodyAreaClass" Visible="true" runat="server" />
</SharePoint:AjaxDelta>
<SharePoint:CssRegistration Name="Themable/corev15.css" runat="server" />
</head>
<body style="background-color:greenyellow">
  <SharePoint:ImageLink runat="server"/>
  <SharePoint:SPNoScript runat="server"/>
  <SharePoint:SPClientIDGenerator runat="server" ServerControlID="DeltaPlaceHolderMain;DeltaPlaceHolderPageTitleInTitleArea;DeltaPlaceHolderUtilityContent" />
  <SharePoint:SharePointForm runat="server" onsubmit="if (typeof(_spFormOnSubmitWrapper) != 'undefined') {return _spFormOnSubmitWrapper();} else {return true;}">
<script type="text/javascript"> var submitHook = function () { return false; }; theForm._spOldSubmit = theForm.submit; theForm.submit = function () { if (!submitHook()) { this._spOldSubmit(); } }; </script>
<SharePoint:AjaxDelta id="DeltaSPWebPartManager" runat="server">
<WebPartPages:SPWebPartManager runat="Server" />
</SharePoint:AjaxDelta>
<asp:ScriptManager id="ScriptManager" runat="server" EnablePageMethods="false" EnablePartialRendering="true" EnableScriptGlobalization="false" EnableScriptLocalization="true" />
<SharePoint:AjaxDelta id="DeltaDelegateControls" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="GlobalNavigation" />
<SharePoint:DelegateControl ControlId="GlobalSiteLink3" Scope="Farm" runat="server" Visible="false" />
</SharePoint:AjaxDelta>
<div id="TurnOnAccessibility" style="display:none" class="s4-notdlg noindex">
<a id="linkTurnOnAcc" title="<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,master_turnonaccessibility%>' EncodeMethod='HtmlEncode'/>" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(true);UpdateAccessibilityUI();document.getElementById('linkTurnOffAcc').focus();return false;"><SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnonaccessibility%>" EncodeMethod="HtmlEncode"/></a>
</div>
<div id="TurnOffAccessibility" style="display:none" class="s4-notdlg noindex">
<a id="linkTurnOffAcc" title="<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,master_turnoffaccessibility%>' EncodeMethod='HtmlEncode'/>" href="#" class="ms-accessible ms-acc-button" onclick="SetIsAccessibilityFeatureEnabled(false);UpdateAccessibilityUI();document.getElementById('linkTurnOnAcc').focus();return false;"><SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_turnoffaccessibility%>" EncodeMethod="HtmlEncode"/></a>
</div>
<div class="s4-notdlg s4-skipribbonshortcut noindex">
<a href="javascript:;" title="<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,skipRibbonCommandsLink%>' EncodeMethod='HtmlEncode'/>" onclick="document.getElementById('startNavigation').focus();" class="ms-accessible ms-acc-button" accesskey="<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,skipribbon_accesskey%>' EncodeMethod='HtmlEncode'/>"><SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,skipRibbonCommandsLink%>" EncodeMethod="HtmlEncode"/></a>
</div>
<div class="s4-notdlg noindex">
<a href="javascript:;" title="<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,mainContentLink%>' EncodeMethod='HtmlEncode'/>" onclick="document.getElementById('mainContent').focus();" class="ms-accessible ms-acc-button"><SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,mainContentLink%>" EncodeMethod="HtmlEncode"/></a>
</div>
<div id="TurnOffAnimation" style="display:none;" class="s4-notdlg noindex">
<a id="linkTurnOffAnimation" title="<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,master_disableanimation%>' EncodeMethod='HtmlEncode'/>" href="#" class="ms-accessible ms-acc-button" onclick="ToggleAnimationStatus();return false;"><SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_disableanimation%>" EncodeMethod="HtmlEncode"/></a>
</div>
<div id="TurnOnAnimation" style="display:none;" class="s4-notdlg noindex">
<a id="linkTurnOnAnimation" title="<SharePoint:EncodedLiteral runat='server' text='<%$Resources:wss,master_enableanimation%>' EncodeMethod='HtmlEncode'/>" href="#" class="ms-accessible ms-acc-button" onclick="ToggleAnimationStatus();return false;"><SharePoint:EncodedLiteral runat="server" text="<%$Resources:wss,master_enableanimation%>" EncodeMethod="HtmlEncode"/></a>
</div>
<a id="HiddenAnchor" href="javascript:;" style="display:none;"></a>
<SharePoint:AjaxDelta runat="server" id="suiteBarDelta" BlockElement="true" CssClass="ms-dialogHidden ms-fullWidth noindex">
<div id="suiteMenuData" class="ms-hide">
<wssuc:Welcome id="IdWelcomeData" runat="server" EnableViewState="false" RenderDataOnly="true"/>
   <span class="ms-siteactions-root" id="siteactiontd">
   <SharePoint:SiteActions runat="server" accesskey="<%$Resources:wss,tb_SiteActions_AK%>"
id="SiteActionsMenuMainData"
PrefixHtml=""
SuffixHtml=""
ImageUrl="/_layouts/15/images/spcommon.png?rev=47"
ThemeKey="spcommon"
MenuAlignment="Right"
LargeIconMode="false"
>
<CustomTemplate>
<SharePoint:Menu runat="server" Visible="false"/>
<SharePoint:FeatureMenuTemplate runat="server"
FeatureScope="Site"
Location="Microsoft.SharePoint.StandardMenu"
GroupId="SiteActions"
UseShortId="true"
>
  <SharePoint:MenuItemTemplate runat="server"
  id="MenuItem_ShareThisSite"
  Text="<%$Resources:wss,siteactions_sharethissite%>"
  Description="<%$Resources:wss,siteactions_sharethissitedescription%>"
  MenuGroupId="100"
  Sequence="110"
  UseShortId="true"
  PermissionsString="ViewPages"
  PermissionMode="Any" />
  <SharePoint:MenuItemTemplate runat="server" id="MenuItem_EditPage"
  Text="<%$Resources:wss,siteactions_editpage15%>"
  Description="<%$Resources:wss,siteactions_editpagedescriptionv4%>"
  ImageUrl="/_layouts/15/images/ActionsEditPage.png?rev=47"
  MenuGroupId="200"
  Sequence="210"
  PermissionsString="EditListItems"
  ClientOnClickNavigateUrl="javascript:ChangeLayoutMode(false);" />
  <SharePoint:MenuItemTemplate runat="server" id="MenuItem_CreatePage"
  Text="<%$Resources:wss,siteactions_addpage15%>"
  Description="<%$Resources:wss,siteactions_createpagedesc%>"
  ImageUrl="/_layouts/15/images/NewContentPageHH.png?rev=47"
  MenuGroupId="200"
  Sequence="220"
  UseShortId="true"
  ClientOnClickScriptContainingPrefixedUrl="OpenCreateWebPageDialog('~siteLayouts/createwebpage.aspx')"
  PermissionsString="AddListItems, EditListItems"
  PermissionMode="All" />
  <SharePoint:MenuItemTemplate runat="server" id="MenuItem_Create"
  Text="<%$Resources:wss,siteactions_addapp15%>"
  Description="<%$Resources:wss,siteactions_createdesc%>"
  MenuGroupId="200"
  Sequence="230"
  UseShortId="true"
  ClientOnClickScriptContainingPrefixedUrl="GoToPage('~siteLayouts/addanapp.aspx')"
  PermissionsString="ManageLists, ManageSubwebs"
  PermissionMode="Any" />
  <SharePoint:MenuItemTemplate runat="server" id="MenuItem_ViewAllSiteContents"
  Text="<%$Resources:wss,quiklnch_allcontent_15%>"
  Description="<%$Resources:wss,siteactions_allcontentdescription%>"
  ImageUrl="/_layouts/15/images/allcontent32.png?rev=47"
  MenuGroupId="200"
  Sequence="240"
  UseShortId="true"
  ClientOnClickNavigateUrl="~siteLayouts/viewlsts.aspx"
  PermissionsString="ViewFormPages"
  PermissionMode="Any" />
  <SharePoint:MenuItemTemplate runat="server" id="MenuItem_ChangeTheLook"
  Text="<%$Resources:wss,siteactions_changethelook15%>"
  Description="<%$Resources:wss,siteactions_changethelookdesc15%>"
  MenuGroupId="300"
  Sequence="310"
  UseShortId="true"
  ClientOnClickNavigateUrl="~siteLayouts/designgallery.aspx"
  PermissionsString="ApplyThemeAndBorder,ApplyStyleSheets,Open,ViewPages,OpenItems,ViewListItems"
  PermissionMode="All" />
  <SharePoint:MenuItemTemplate runat="server" id="MenuItem_Settings"
  Text="<%$Resources:wss,siteactions_settings15%>"
  Description="<%$Resources:wss,siteactions_sitesettingsdescriptionv4%>"
  ImageUrl="/_layouts/15/images/settingsIcon.png?rev=47"
  MenuGroupId="300"
  Sequence="320"
  UseShortId="true"
  ClientOnClickScriptContainingPrefixedUrl="GoToPage('~siteLayouts/settings.aspx')"
  PermissionsString="EnumeratePermissions,ManageWeb,ManageSubwebs,AddAndCustomizePages,ApplyThemeAndBorder,ManageAlerts,ManageLists,ViewUsageData"
  PermissionMode="Any" />
  <SharePoint:MenuItemTemplate runat="server" id="MenuItem_SwitchToMobileView"
  Visible="false"
  Text="<%$Resources:wss,siteactions_switchtomobileview%>"
  Description="<%$Resources:wss,siteactions_switchtomobileviewdesc%>"
  MenuGroupId="300"
  Sequence="330"
  UseShortId="true"
  ClientOnClickScript="STSNavigate(StURLSetVar2(ajaxNavigate.get_href(), 'mobile', '1'));" />
</SharePoint:FeatureMenuTemplate>
</CustomTemplate>
  </SharePoint:SiteActions></span>
</div>
<SharePoint:ScriptBlock runat="server">
var g_navBarHelpDefaultKey = "HelpHome";
</SharePoint:ScriptBlock>
<SharePoint:DelegateControl id="ID_SuiteBarDelegate" ControlId="SuiteBarDelegate" runat="server" />
</SharePoint:AjaxDelta>
<div id="ms-hcTest"></div>
<div id="s4-ribbonrow">
<div id="globalNavBox" class="noindex">
<div id="ribbonBox">
<div id="s4-ribboncont">
<SharePoint:AjaxDelta id="DeltaSPRibbon" BlockElement="true" runat="server">
<SharePoint:DelegateControl runat="server" ID="GlobalDelegate0" ControlId="GlobalSiteLink0" />
<SharePoint:SPRibbon
runat="server"
PlaceholderElementId="RibbonContainer"
CssFile="" >
<SharePoint:SPRibbonPeripheralContent
runat="server"
CssClass="ms-core-defaultFont ms-dialogHidden"
Location="TabRowLeft">
</SharePoint:SPRibbonPeripheralContent>
<SharePoint:SPRibbonPeripheralContent
runat="server"
Location="TabRowRight"
ID="RibbonTabRowRight"
CssClass="s4-trc-container s4-notdlg ms-core-defaultFont">
<SharePoint:SPSharePromotedActionButton runat="server"/>
<SharePoint:DelegateControl runat="server" ControlId="PromotedActions" AllowMultipleControls="true" />
<SharePoint:SPSyncPromotedActionButton runat="server"/>
<SharePoint:PageStateActionButton id="PageStateActionButton" runat="server" Visible="false" />
<span id="fullscreenmodebox" class="ms-qatbutton">
<span id="fullscreenmode">
<SharePoint:ThemedClusteredHoverImage
runat="server"
ID="fullscreenmodeBtn"
ThemeKey="spcommon"
TouchMode="true"
TouchModeWidth="30"
TouchModeHeight="30"
TouchModePaddingLeft="7"
TouchModePaddingTop="7"
TouchModePaddingRight="7"
TouchModePaddingBottom="7"
ImageUrl="/_layouts/15/images/spcommon.png?rev=47"
Width="16"
Height="16"
OffsetX="143"
OffsetY="178"
HoverOffsetX="125"
HoverOffsetY="178"
NavigateUrl="#"
onclick="SetFullScreenMode(true);PreventDefaultNavigation();return false;"
AlternateText="<%$Resources:wss,multipages_fullscreenmodelinkalt_text%>"
ToolTip="<%$Resources:wss,multipages_fullscreenmodelinkalt_text%>"
/>
</span>
<span id="exitfullscreenmode" style="display: none;">
<SharePoint:ThemedClusteredHoverImage
runat="server"
ID="exitfullscreenmodeBtn"
ThemeKey="spcommon"
TouchMode="true"
TouchModeWidth="30"
TouchModeHeight="30"
TouchModePaddingLeft="7"
TouchModePaddingTop="7"
TouchModePaddingRight="7"
TouchModePaddingBottom="7"
ImageUrl="/_layouts/15/images/spcommon.png?rev=47"
Width="16"
Height="16"
OffsetX="107"
OffsetY="178"
HoverOffsetX="179"
HoverOffsetY="96"
NavigateUrl="#"
onclick="SetFullScreenMode(false);PreventDefaultNavigation();return false;"
AlternateText="<%$Resources:wss,multipages_fullscreenmodelinkalt_text%>"
ToolTip="<%$Resources:wss,multipages_fullscreenmodelinkalt_text%>"
/>
</span>
</span>
<SharePoint:DeveloperDashboard runat="server" />
<SharePoint:DeveloperDashboardLauncher
ID="DeveloperDashboardLauncher"
ThemeKey="spcommon"
TouchMode="true"
TouchModeWidth="30"
TouchModeHeight="30"
TouchModePaddingLeft="7"
TouchModePaddingTop="7"
TouchModePaddingRight="7"
TouchModePaddingBottom="7"
NavigateUrl="javascript:return false"
OnClick="ToggleDeveloperDashboard(window.g_ddHostBase);return false"
OuterCssClass="ms-dd-button ms-qatbutton"
runat="server"
ImageUrl="/_layouts/15/images/spcommon.png?rev=47"
AlternateText="<%$Resources:wss,multipages_launchdevdashalt_text%>"
ToolTip="<%$Resources:wss,multipages_launchdevdashalt_text%>"
OffsetX="145"
OffsetY="196"
HoverOffsetX="163"
HoverOffsetY="196"
Height="16"
Width="16" />
</SharePoint:SPRibbonPeripheralContent>
</SharePoint:SPRibbon>
</SharePoint:AjaxDelta>
</div>
<SharePoint:AjaxDelta id="DeltaSPNavigation" runat="server">
<asp:ContentPlaceHolder ID="SPNavigation" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="PublishingConsole" Id="PublishingConsoleDelegate" />
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
</div>
<SharePoint:AjaxDelta id="DeltaWebPartAdderUpdatePanelContainer" BlockElement="true" CssClass="ms-core-webpartadder" runat="server">
  <div id="WebPartAdderUpdatePanelContainer">
<asp:UpdatePanel
ID="WebPartAdderUpdatePanel"
UpdateMode="Conditional"
ChildrenAsTriggers="false"
runat="server">
  <ContentTemplate>
<WebPartPages:WebPartAdder ID="WebPartAdder" runat="server" />
  </ContentTemplate>
  <Triggers>
<asp:PostBackTrigger ControlID="WebPartAdder" />
  </Triggers>
</asp:UpdatePanel>
  </div>
</SharePoint:AjaxDelta>
</div>
</div>
<div id="s4-workspace" class="ms-core-overlay">
<div id="s4-bodyContainer">
<div id="s4-titlerow"
class="ms-dialogHidden s4-titlerowhidetitle">
<div id="titleAreaBox"
class="ms-noList ms-table ms-core-tableNoSpace">
<div id="titleAreaRow"
class="ms-tableRow">
<div id="siteIcon" class="ms-tableCell ms-verticalAlignTop">
<SharePoint:AjaxDelta id="DeltaSiteLogo" BlockElement="true" runat="server">
<SharePoint:SPSimpleSiteLink CssClass="ms-siteicon-a" runat="server" id="onetidProjectPropertyTitleGraphic" >
<SharePoint:SiteLogoImage CssClass="ms-siteicon-img" name="onetidHeadbnnr0" id="onetidHeadbnnr2" LogoImageUrl="/_layouts/15/images/siteIcon.png?rev=47" runat="server"/>
</SharePoint:SPSimpleSiteLink>
</SharePoint:AjaxDelta>
</div>
<div class="ms-breadcrumb-box ms-tableCell ms-verticalAlignTop">
<div
class="ms-breadcrumb-top">
<div class="ms-breadcrumb-dropdownBox" style="display:none;">
<SharePoint:AjaxDelta id="DeltaBreadcrumbDropdown" runat="server">
<SharePoint:PopoutMenu
Visible="false"
runat="server"
ID="GlobalBreadCrumbNavPopout"
IconUrl="/_layouts/15/images/spcommon.png?rev=47"
IconAlt="<%$Resources:wss,master_breadcrumbIconAlt%>"
ThemeKey="v15breadcrumb"
IconOffsetX="215"
IconOffsetY="120"
IconWidth="16"
IconHeight="16"
AnchorCss="ms-breadcrumb-anchor"
AnchorOpenCss="ms-breadcrumb-anchor-open"
MenuCss="ms-breadcrumb-menu ms-noList">
<div class="ms-breadcrumb-top">
<asp:Label runat="server" CssClass="ms-breadcrumb-header" Text="<%$Resources:wss,master_breadcrumbHeader%>" />
</div>
<asp:ContentPlaceHolder id="PlaceHolderTitleBreadcrumb" runat="server">
<SharePoint:ListSiteMapPath
runat="server"
SiteMapProviders="SPSiteMapProvider,SPContentMapProvider"
RenderCurrentNodeAsLink="false"
PathSeparator=""
CssClass="ms-breadcrumb"
NodeStyle-CssClass="ms-breadcrumbNode"
CurrentNodeStyle-CssClass="ms-breadcrumbCurrentNode"
RootNodeStyle-CssClass="ms-breadcrumbRootNode"
NodeImageOffsetX="217"
NodeImageOffsetY="210"
NodeImageWidth="16"
NodeImageHeight="16"
NodeImageUrl="/_layouts/15/images/spcommon.png?rev=47"
RTLNodeImageOffsetX="199"
RTLNodeImageOffsetY="210"
RTLNodeImageWidth="16"
RTLNodeImageHeight="16"
RTLNodeImageUrl="/_layouts/15/images/spcommon.png?rev=47"
HideInteriorRootNodes="true"
SkipLinkText="" />
</asp:ContentPlaceHolder>
</SharePoint:PopoutMenu>
</SharePoint:AjaxDelta>
</div>
<SharePoint:AjaxDelta id="DeltaTopNavigation" BlockElement="true" CssClass="ms-displayInline ms-core-navigation" role="navigation" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="TopNavigationDataSource" Id="topNavigationDelegate">
<Template_Controls>
<asp:SiteMapDataSource
ShowStartingNode="False"
SiteMapProvider="SPNavigationProvider"
id="topSiteMap"
runat="server"
StartingNodeUrl="sid:1002"/>
</Template_Controls>
</SharePoint:DelegateControl>
<asp:ContentPlaceHolder id="PlaceHolderTopNavBar" runat="server">
<SharePoint:AspMenu
ID="TopNavigationMenu"
Runat="server"
EnableViewState="false"
DataSourceID="topSiteMap"
AccessKey="<%$Resources:wss,navigation_accesskey%>"
UseSimpleRendering="true"
UseSeparateCss="false"
Orientation="Horizontal"
StaticDisplayLevels="2"
AdjustForShowStartingNode="true"
MaximumDynamicDisplayLevels="2"
SkipLinkText="" />
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
</div>
<h1 id="pageTitle" class="ms-core-pageTitle">
  <SharePoint:AjaxDelta id="DeltaPlaceHolderPageTitleInTitleArea" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderPageTitleInTitleArea" runat="server">
  <SharePoint:SPTitleBreadcrumb
  runat="server"
  RenderCurrentNodeAsLink="true"
  SiteMapProvider="SPContentMapProvider"
  CentralAdminSiteMapProvider="SPXmlAdminContentMapProvider"
  SkipLinkText="">
<PATHSEPARATORTEMPLATE>
  <SharePoint:ClusteredDirectionalSeparatorArrow runat="server" />
</PATHSEPARATORTEMPLATE>
  </SharePoint:SPTitleBreadcrumb>
</asp:ContentPlaceHolder>
  </SharePoint:AjaxDelta>
  <SharePoint:AjaxDelta BlockElement="true" id="DeltaPlaceHolderPageDescription" CssClass="ms-displayInlineBlock ms-normalWrap" runat="server">
<a href="javascript:;" id="ms-pageDescriptionDiv" style="display:none;" data-accessibility-nocheck="true">
  <span id="ms-pageDescriptionImage">&#160;</span>
</a>
<span class="ms-accessible" id="ms-pageDescription">
  <asp:ContentPlaceHolder id="PlaceHolderPageDescription" runat="server" />
</span>
<SharePoint:ScriptBlock runat="server">
  _spBodyOnLoadFunctionNames.push("setupPageDescriptionCallout");
</SharePoint:ScriptBlock>
  </SharePoint:AjaxDelta>
</h1>
</div>
<div class="ms-tableCell ms-verticalAlignTop">
<SharePoint:AjaxDelta id="DeltaPlaceHolderGroupActionsArea" BlockElement="true" CssClass="ms-floatRight ms-noWrap" runat="server">
  <SharePoint:DelegateControl runat="server" ControlId="GroupActionsTop" AllowMultipleControls="true" />
</SharePoint:AjaxDelta>
</div>
<div class="ms-tableCell ms-verticalAlignTop">
<SharePoint:AjaxDelta id="DeltaPlaceHolderSearchArea" BlockElement="true" CssClass="ms-mpSearchBox ms-floatRight" runat="server">
  <asp:ContentPlaceHolder id="PlaceHolderSearchArea" runat="server">
<SharePoint:FlightedContent runat="server" ExpFeature="Reserved_Server_ExpFeature30731" RenderIfInFlight="true">
  <SharePoint:WebTemplateBasedContent runat="server" WebTemplates="STS|BLANKINTERNET|CMSPUBLISHING|GROUP" RenderIfInWebTemplates="false">
<div id="searchInputBox">
  <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" />
</div>
  </SharePoint:WebTemplateBasedContent>
</SharePoint:FlightedContent>
<SharePoint:FlightedContent runat="server" ExpFeature="Reserved_Server_ExpFeature30731" RenderIfInFlight="false">
<div id="searchInputBox">
  <SharePoint:DelegateControl runat="server" ControlId="SmallSearchInputBox" />
</div>
</SharePoint:FlightedContent>
  </asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
</div>
</div>
</div>
</div>
<div id="contentRow">
<div id="sideNavBox"
role="Navigation"
class="ms-dialogHidden ms-forceWrap ms-noList">
  <SharePoint:AjaxDelta id="DeltaPlaceHolderLeftNavBar" BlockElement="true" CssClass="ms-core-navigation" role="navigation" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBar" runat="server">
<SharePoint:DelegateControl runat="server" ControlId="QuickLaunchTop"/>
<a id="startNavigation" name="startNavigation" tabIndex="-1"></a>
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarTop" runat="server" />
<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchTop" runat="server" />
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarDataSource" runat="server" />
<asp:ContentPlaceHolder id="PlaceHolderCalendarNavigator" runat="server" />
<asp:ContentPlaceHolder id="PlaceHolderLeftActions" runat="server" />
<div class="ms-core-sideNavBox-removeLeftMargin">
<SharePoint:SPNavigationManager
id="QuickLaunchNavigationManager"
runat="server"
QuickLaunchControlId="V4QuickLaunchMenu"
ContainedControl="QuickLaunch"
EnableViewState="false"
>
<SharePoint:DelegateControl runat="server"
ControlId="QuickLaunchDataSource">
<Template_Controls>
<asp:SiteMapDataSource
SiteMapProvider="SPNavigationProvider"
ShowStartingNode="False"
id="QuickLaunchSiteMap"
StartingNodeUrl="sid:1025"
runat="server"
/>
</Template_Controls>
</SharePoint:DelegateControl>
<SharePoint:AspMenu
id="V4QuickLaunchMenu"
runat="server"
EnableViewState="false"
DataSourceId="QuickLaunchSiteMap"
UseSimpleRendering="true"
Orientation="Vertical"
StaticDisplayLevels="3"
AdjustForShowStartingNode="true"
MaximumDynamicDisplayLevels="0"
SkipLinkText=""
/>
</SharePoint:SPNavigationManager>
<SharePoint:SPNavigationManager
id="TreeViewNavigationManagerV4"
runat="server"
ContainedControl="TreeView"
CssClass="ms-tv-box"
>
<SharePoint:SPLinkButton runat="server" NavigateUrl="~site/_layouts/15/viewlsts.aspx" id="idNavLinkSiteHierarchyV4" Text="<%$Resources:wss,treeview_header%>" accesskey="<%$Resources:wss,quiklnch_allcontent_AK%>"
CssClass="ms-tv-header" />
<SharePoint:DelegateControl runat="server" ControlId="TreeViewAndDataSource">
<Template_Controls>
<SharePoint:SPHierarchyDataSourceControl
runat="server"
id="TreeViewDataSourceV4"
RootContextObject="Web"
IncludeDiscussionFolders="true"
/>
<SharePoint:SPRememberScroll runat="server" id="TreeViewRememberScrollV4" onscroll="javascript:_spRecordScrollPositions(this);"
style="overflow: auto;">
<SharePoint:SPTreeView
id="WebTreeViewV4"
runat="server"
ShowLines="false"
DataSourceId="TreeViewDataSourceV4"
ExpandDepth="0"
SelectedNodeStyle-CssClass="ms-tv-selected"
NodeStyle-CssClass="ms-tv-item"
SkipLinkText=""
NodeIndent="12"
ExpandImageUrl="/_layouts/15/images/tvclosed.png?rev=47"
ExpandImageUrlRtl="/_layouts/15/images/tvclosedrtl.png?rev=47"
CollapseImageUrl="/_layouts/15/images/tvopen.png?rev=47"
CollapseImageUrlRtl="/_layouts/15/images/tvopenrtl.png?rev=47"
NoExpandImageUrl="/_layouts/15/images/tvblank.gif?rev=47"
>
</SharePoint:SPTreeView>
</SharePoint:SPRememberScroll>
</Template_Controls>
</SharePoint:DelegateControl>
</SharePoint:SPNavigationManager>
<asp:ContentPlaceHolder id="PlaceHolderQuickLaunchBottom" runat="server">
<div class="ms-core-listMenu-verticalBox">
<SharePoint:ClusteredSPLinkButton
runat="server"
id="idNavLinkViewAll"
PermissionsString="ViewFormPages"
NavigateUrl="~site/_layouts/15/viewlsts.aspx"
Text="<%$Resources:wss,AllSiteContentMore%>"
ToolTip="<%$Resources:wss,AllSiteContentMore%>"
accesskey="<%$Resources:wss,quiklnch_allcontent_AK%>"
CssClass="ms-core-listMenu-item ms-core-listMenu-heading" />
</div>
<SharePoint:FlightedContent runat="server" id="GroupsAndSitesLinking" ExpFeature="GroupsAndSitesLinking" RenderIfInFlight="true">
  <SharePoint:DelegateControl id="connectedGroupsNav" runat="server" ControlId="ConnectedGroupsNav" AllowMultipleControls="true" />
</SharePoint:FlightedContent>
</asp:ContentPlaceHolder>
</div>
<SharePoint:DelegateControl runat="server" ControlId="QuickLaunchBottom"/>
</asp:ContentPlaceHolder>
  </SharePoint:AjaxDelta>
</div>
<div id="contentBox"
 aria-live="polite" aria-relevant="all"  role="main">
  <a id="mainContent" name="mainContent" tabindex="-1"></a>
  <div id="notificationArea" class="ms-notif-box"></div>
<SharePoint:AjaxDelta id="DeltaPageStatusBar" BlockElement="true" runat="server">
<div id="pageStatusBar"></div>
</SharePoint:AjaxDelta>
<SharePoint:AjaxDelta id="DeltaPlaceHolderMain" BlockElement="true" IsMainContent="true" runat="server" >
<asp:ContentPlaceHolder id="PlaceHolderMain" runat="server" />
</SharePoint:AjaxDelta>
</div>
<SharePoint:AjaxDelta id="DeltaFormDigest" BlockElement="true" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderFormDigest" runat="server">
<SharePoint:FormDigest runat="server"/>
</asp:ContentPlaceHolder>
</SharePoint:AjaxDelta>
<asp:ContentPlaceHolder id="PlaceHolderSiteName" runat="server" Visible="false" />
<asp:ContentPlaceHolder id="PlaceHolderHorizontalNav" runat="server" Visible="false" />
<asp:ContentPlaceHolder id="PlaceHolderPageImage" runat="server" Visible="false" />
<asp:ContentPlaceHolder id="PlaceHolderTitleLeftBorder" runat="server" Visible="false" />
<asp:ContentPlaceHolder id="PlaceHolderMiniConsole" runat="server" Visible="false" />
<asp:ContentPlaceHolder id="PlaceHolderTitleRightMargin" runat="server" Visible="false" />
<asp:ContentPlaceHolder id="PlaceHolderTitleAreaSeparator" runat="server" Visible="false" />
<asp:ContentPlaceHolder id="PlaceHolderNavSpacer" runat="server" Visible="false" />
<asp:ContentPlaceHolder id="PlaceHolderLeftNavBarBorder" runat="server" Visible="false" />
<asp:ContentPlaceHolder id="PlaceHolderBodyLeftBorder" runat="server" Visible="false" />
<asp:ContentPlaceHolder id="PlaceHolderBodyRightMargin" runat="server" Visible="false" />
<asp:ContentPlaceHolder id="PlaceHolderTitleAreaClass" runat="server" Visible="false" />
<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigation" runat="server" Visible="false" />
<asp:ContentPlaceHolder id="PlaceHolderGlobalNavigationSiteMap" runat="server" Visible="false" />
<asp:ContentPlaceHolder id="WSSDesignConsole" runat="server" Visible="false" />
</div>
</div>
<%@ Register TagPrefix="wssuc" TagName="HelpPanel" src="~/_controltemplates/15/HelpPanel.ascx" %>
<SharePoint:AjaxDelta id="DeltaHelpPanel" runat="server">
  <div id = "helppanelCntdiv" class="ms-Help-PanelContainer">
<wssuc:HelpPanel runat="server" />
  </div>
</SharePoint:AjaxDelta>
<SharePoint:AjaxDelta id="DeltaPageInstrumentation" runat="server">
<SharePoint:FlightedContent runat="server" ExpFeature="UserActivityLogging" RenderIfInFlight="true">
<SharePoint:PageInstrumentationControl runat="server" Id="PageInstrumentationControl" />
</SharePoint:FlightedContent>
</SharePoint:AjaxDelta>
</div>
</SharePoint:SharePointForm>
<SharePoint:AjaxDelta id="DeltaPlaceHolderUtilityContent" runat="server">
<asp:ContentPlaceHolder id="PlaceHolderUtilityContent" runat="server"/>
</SharePoint:AjaxDelta>
<SharePoint:ScriptBlock runat="server">
var g_Workspace = "s4-workspace";
</SharePoint:ScriptBlock>
</body>
</SharePoint:SPHtmlTag>


SharePoint online - Get List-item attachments and Display to div

Step 1 : Create a List ex: TestList and attach few images Step 2 : Copy and Pastet the below coding in App.js var  Items =  null ; ...