Adding Library Metadata to Wiki Page vis CSOM / JavaScript

Question

SharePoint Online (via O365) using the Classic Interface

Scenario - Some of my colleagues are interested in using one of our SharePoint site via the wiki functionality to build some knowledge articles. I've been asked if it's possible to add the last modified date and version number from the document library to a page footer.

Is there any way that I can use the CSOM / REST to embed this info a wiki-page? It would be great for my users if we were able to automate this,

Thanks in advance

Answer 1

I would recommend to use Enterprise Wiki that already contains some of the information you need on all wiki pages. It also gives you some extra features.

Create site collection and choose Enterprise Wiki in Publishing section:

Here is the out-of-the-box result:

You can also create custom page layout (aspx page), edit in SharePoint Designer. To load info about the page is even easier - no Javascript is needed. See the code of custom page layout bellow.

You can read about creating custom page layout here. It is for SharePoint 2010 but is also valid in SharePoint Online.

Custom page layout with version for reference:

<%@ Page language="C#"   Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=16.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="Taxonomy" Namespace="Microsoft.SharePoint.Taxonomy" Assembly="Microsoft.SharePoint.Taxonomy, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register Tagprefix="SharePointPortalControls" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
  <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/page-layouts-21.css %>" runat="server" />
  <PublishingWebControls:EditModePanel runat="server" id="editmodestyles">
    <!-- Styles for edit mode only-->
    <SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/edit-mode-21.css %>" After="<% $SPUrl:~sitecollection/Style Library/~language/Core Styles/page-layouts-21.css %>" runat="server" />
  </PublishingWebControls:EditModePanel>
</asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitle" runat="server">
  <SharePoint:ListItemProperty runat="server" />
</asp:Content>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
  <SharePoint:ListItemProperty runat="server" />
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderTitleBreadcrumb" runat="server">
  <SharePoint:ListSiteMapPath runat="server" SiteMapProviders="CurrentNavigation" RenderCurrentNodeAsLink="false" PathSeparator="" CssClass="s4-breadcrumb" NodeStyle-CssClass="s4-breadcrumbNode" CurrentNodeStyle-CssClass="s4-breadcrumbCurrentNode" RootNodeStyle-CssClass="s4-breadcrumbRootNode" NodeImageOffsetX=0 NodeImageOffsetY=289 NodeImageWidth=16 NodeImageHeight=16 NodeImageUrl="/_layouts/15/images/fgimg.png?rev=45" HideInteriorRootNodes="true" SkipLinkText="" />
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">
  <div style="padding:11px 0px 0px 0px;">
    <div class="col-fluid-1">
      <div class="col-fluid-2">
        <div class="ms-descriptiontext ewiki-margin">
          <SharePoint:FormattedString FormatText="<%$Resources:wss,wikidiff_lastmodifiedby%>" runat="server">
            <SharePoint:FormField id="modifiedFieldCtrl" ControlMode="Display" FieldName="Modified" runat="server" />
            <SharePoint:UserField id="editorFieldCtrl" ControlMode="Display" FieldName="Editor" runat="server" />
          </SharePoint:FormattedString>
          <PublishingWebControls:EditPageHyperLink id="editPageLink" Text="<%$Resources:cms,enterwiki_editpage%>" runat="server" />
        </div>
        <PublishingWebControls:EditModePanel class="ewiki-margin" runat="server">
          <div class="ms-descriptiontext">
            <b class="ewiki-pagename-align">
              <SharePoint:FieldLabel FieldName="FileLeafRef" runat="server" /></b>
            <SharePoint:FileField id="PageNameInEditMode" CssClass="ewiki-pagename-align" FieldName="FileLeafRef" DisableInputFieldLabel="true" runat="server" />
          </div>
        </PublishingWebControls:EditModePanel>
        <div class="edit-mode-border">
          <PublishingWebControls:RichHtmlField id="PageContent" FieldName="PublishingPageContent" MinimumEditHeight="400px" DisableInputFieldLabel="true" runat="server" />
        </div>
      </div>
    </div>
    <div class="right-wp-zone-col">
      <div class="ewiki-slink">
        <div>
          <b>
            <SharePoint:EncodedLiteral runat="server" text="<%$Resources:cms,enterwiki_pagerating%>" EncodeMethod="HtmlEncode" /></b>
          <div>
            <SharePointPortalControls:AverageRatingFieldControl FieldName="5a14d1ab-1513-48c7-97b3-657a5ba6c742" runat="server" />
          </div>
        </div>
        <div class="welcome-content">
          <style type="text/css">
            .ms-long {
              width: 100%;
            }
          </style>
          <b>
            <SharePoint:EncodedLiteral runat="server" text="<%$Resources:cms,enterwiki_categories%>" EncodeMethod="HtmlEncode" /></b><br />
          <Taxonomy:TaxonomyFieldControl FieldName="Wiki_x0020_Page_x0020_Categories" EmptyValueDescriptionForTargetTemplate="<%$Resources:cms,enterwiki_nocategories_assigned%>" DisableInputFieldLabel="true" runat="server" />
        </div>
      </div>
    </div>
  </div>

  <!-- Only this part is customized -->
  <div class="ms-descriptiontext ewiki-margin">
    Version:
    <SharePoint:FormField id="versionFieldCtrl" ControlMode="Display" FieldName="_UIVersionString" runat="server" />
  </div>
</asp:Content>

Answer 2

The following code for your reference.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    var pageName = window.location.pathname.split("/").pop();
    $.ajax({
        url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('Site%20Pages')/items?$select=Modified,OData__UIVersionString&$filter=FileLeafRef eq '"+pageName+"'",
        type: "GET",
        headers: {
            "Accept": "application/json;odata=verbose",
        },
        success: function (data) {
            if(data.d.results.length>0){
                var page=data.d.results[0];
                $("#pageInfo").html("Last modified date: "+page.Modified+"  Version number:"+page.OData__UIVersionString);
            }
        },
        error: function (data) {
            //alert("Error");
        }
    });
})
</script>
<div id="pageInfo"></div>