Add Version History details in dispform or editform.aspx

Question

I've read these post1 and post2 but I still can't figure out if its possible to display the version history below the dispform or editform.aspx. I thought there was an app (pre-defined list) that automatically adds the version where I wanted it but can't find it in SharePoint Online. It would be nice to display it similar to datatables.

Answer 1

In SharePoint Online, we can use Lists.GetVersionCollection method to return version information for an item in a SharePoint list. But it only returns version information for the specified field in a SharePoint list. What’s more, there is no such function in the Lists.asmx can help us to get all the versions of all fields in a batch, so we might need to iterate through all the wanted fields one by one.

If it is a classic list EditForm.aspx page, you can refer to the following example (JSOM using Lists.GetVersionCollection method of SPServices). Edit the page and add a Script Editor web part or a Content Editor web part. Add the scripts below into the web part.

Note: "cl_version" is my list name. "Title" and "test01" are my field names. Change the data to yours in the script.

<div id="displayDiv"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>
<script type="text/javascript">
function GetParameterValues(param) {  
                var url = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');  
                for (var i = 0; i < url.length; i++) {  
                                var urlparam = url[i].split('=');  
                                if (urlparam[0] == param) {  
                                                return urlparam[1];  
                                }  
                }  
}
var currentItemId = GetParameterValues("ID");
var table="<table><tr><th>Version</th><th>Title</th><th>test01</th><th>Editor</th><th>Modified</th></tr>";
var html ="";
var fieldname ="";
$(function(){
    var oTitle = getFieldVersion("Title");
    var oTest01 = getFieldVersion("test01");
    var oModified = getFieldVersion("Modified");
    var oEditor = getFieldVersion("Editor");
    for (var i = 0; i < oTitle.length; i++) {
        var count = oTitle.length-i;
        html += "<tr>";
        html += "<td>"+ count +"</td>";
        html += "<td>" + oTitle[i] +"</td>";
        html += "<td>" + oTest01[i] +"</td>";
        html += "<td>" + oEditor[i].split("#")[1] +"</td>";
        html += "<td>" + oModified[i] +"</td>";
        html += "</tr>";
    }
    document.getElementById("displayDiv").innerHTML=table+html+"</table>";            
});

function getFieldVersion(fieldname){
    var versionContent = [];
    $().SPServices({
            operation: "GetVersionCollection",
            async: false,
            strlistID: "cl_versions",
            strlistItemID: currentItemId,
            strFieldName: fieldname,
            completefunc: function (xData, Status) {
            console.log(xData);
            console.log($(xData.responseText).find("Version"));
            $(xData.responseText).find("Version").each(function(i) {
              console.log($(this).attr(fieldname) );
              versionContent.push($(this).attr(fieldname));
            });  

            }
        }); 
    return versionContent;              
}
</script>

Result:

Another method, we can use CSOM to access version information for list items and files.

CSOM demos:

https://developer.microsoft.com/en-us/office/blogs/new-sharepoint-csom-version-released-for-Office-365-september-2017/

http://techfindings-prem.blogspot.com/2014/06/how-to-get-all-versions-of-list-using.html

For modern view, you may need to develop custom SPFx.

Answer 2

There is an SPFx extension for this - https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/samples/react-item-History

I've not tried it, so I am not completely sure if it helps your situation, but probably you would get some insights on how it could be achieved.