Show Modified By on Wiki Page

Question

We want to add a Modified By and Modified 'footer' on our wiki pages. We can do this by adding the following code in SharePoint Designer:

    Modified By: 
<SharePoint:UserField FieldName="Modified By" runat="server" ControlMode="Display"/>
on: 
<SharePoint:DateTimeField FieldName="Modified" runat="server" ControlMode="Display"/>

This works fine, but we get the message below on our page.

We can fix this with a script editor webpart and add the following code:

<style>
#DeltaPageStatusBar { display: none; }

The problem now is that we can't edit the page anymore.

We found this article: https://www.linkedin.com/pulse/unable-edit-pages-sharepoint-2013-how-wiki-balaji-godase/ . We can use this in our URL '?WikiPageMode=Edit&WikiMergeTarget=true', it does work. But our users can't edit the wiki pages anymore without adding this line to the URL.

Does anyone know how this can be solved in another way?

Answer 1

You may inject these information by Rest api and jQuery, sample script:

<div id="modifiedDate"></div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        function getModifiedDate() {
            var listId = _spPageContextInfo.pageListId.replace('{', '').replace('}', '');
            var itemId = _spPageContextInfo.pageItemId;
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists(guid'" + listId + "')/items?$select=Modified&$filter=ID eq " + itemId,
                method: "GET",
                headers: {                    
                    "Accept": "application/json;odata=verbose",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val(),                    
                },
                success: function (data) {                    
                    $("#modifiedDate").html("Page Modified on: " + data.d.results[0].Modified);
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }

        $(document).ready(function () {
            getModifiedDate();
        });
    </script>

Update:

<div id="modifiedDate"></div>
    <div id="ModifiedBy"></div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        function getModifiedDate() {
            var listId = _spPageContextInfo.pageListId.replace('{', '').replace('}', '');
            var itemId = _spPageContextInfo.pageItemId;
            $.ajax({
                url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists(guid'" + listId + "')/items?$select=Modified,Editor/FirstName&$expand=Editor&$filter=ID eq " + itemId,
                method: "GET",
                headers: {                    
                    "Accept": "application/json;odata=verbose",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val(),                    
                },
                success: function (data) {                    
                    $("#modifiedDate").html("Page Modified on: " + data.d.results[0].Modified);
                    $("#ModifiedBy").html("Page Modified by: " + data.d.results[0].Editor.FirstName);
                },
                error: function (data) {
                    console.log(data);
                }
            });
        }

        $(document).ready(function () {
            getModifiedDate();
        });
    </script>

Answer 2

To hide that status bar message there are multiple ways available on below question,

"The current page has been customized from its template. Revert to template."

Best one i like is that use javascript to hide that, as it will give you some flexibility to show other messsages on status bar.

If status Bar hiding give some issue then try below method,

• Open site in designer
• Select target page and from the ribbon click on export and save somewhere.
• In the designer make backup copy of that page and delete the page
• Import the exported page
• Done.

After opening the page in browser if you see below error

Type 'Microsoft.SharePoint.WebControls.EmbeddedFormField' doesn't have public property called 'div'

then just surround the whole content of PlaceHolderMain inside div, save the page and done.