Create link to open Version History in popup with workflow

Question

I have a document library with versioning called Docs. I added a column of type Publishing hyperlink to it called "Version History". I want to populate this column with links that open the version history of the item in a popup.

This is my JavaScript code:

function openInDialog(dlgWidth, dlgHeight, dlgAllowMaximize, dlgShowClose, needCallbackFunction, pageUrl) {
    var options = {
        url: pageUrl,
        width: dlgWidth,
        height: dlgHeight,
        allowMaximize: dlgAllowMaximize,
        showClose: dlgShowClose
    };

    if (needCallbackFunction) {
        options.dialogReturnValueCallback = Function.createDelegate(null, CloseDialogCallback);
    }
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}

function CloseDialogCallback(dialogResult, returnValue) {
    if (dialogResult == SP.UI.DialogResult.OK) {
        SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.RefreshPage', SP.UI.DialogResult.OK);
    }
    else if (dialogResult == SP.UI.DialogResult.cancel) {
    } else {
    }
}

And this is my workflow: Set Version History to <a href="#" onclick="openInDialog(500,600,true,true,true,'/sites/alex/_layouts/15/Versions.aspx?list=ABD58D6C-0D9A-4FD3-9FBA-3109827738FC&ID=[%Current Item:ID%]&IsDlg=1');">Version</a>

But when I open the browser the link doesn't have the onclick event, only the href attribute Like: <a href="#">Version</a>

If I add in the browser the correct code <a href="#" onclick="openInDialog(500,600,true,true,true,'/sites/alex/_layouts/15/Versions.aspx?list=ABD58D6C-0D9A-4FD3-9FBA-3109827738FC&ID=301&IsDlg=1');">Version</a> it works perfectly.

How I can I make it work dynamically? Why SharePoint Designer doesn't add the onclick event to my link? Is there a better way to achieve this?

Answer 1

Ok, I made it :D

First, the column type was a problem so I changed it to Publishing HTML (well, I deleted and created it again, to be correct).

Second, I changed my workflow to this: Set Version History to <a class="version-history" data-id="[%Current Item:ID%]">Version</a>

Third, I added this in my JS code:

window.onload = function(){
 $(".version-history").click(function(){
     openInDialog(500,600,true,true,true,'/sites/alex/_layouts/15/Versions.aspx?list=ABD58D6C-0D9A-4FD3-9FBA-3109827738FC&ID='+$(this).attr('data-id')+'&IsDlg=1');
 });
};

And now it works! :)