JSLink for Modal Pop-up calculated column not working (SPO)

Question

I have an html-enabled calculated column that I wanted to transfer to JS Link. The calculated column contains an icon, that when clicked, opens an edit form in a modal box. How do I structure this in JS link?

Here are the details:

Internal Field Name: "AA01_OpenEditForm"
Column Display Name: "Update"

Below is the Calculated/Number Column:

"<a href='#' onclick="&"SP.UI.ModalDialog.OpenPopUpPage('mysite/Companies‌/… src='/SiteAssets/elements/images/edit-file.png' style='height:20px; width:20px;' title='Click this icon to edit or update this Company'>"&"</a>"

score 1 · Answer 1 · answered Jun 14 '17 at 16:15

1

You can replace your customization with CSR (JS Link). You can go through the samples here.enter link description here

Coming to your problem. You can refer the following syntax.

(function () {

    var requestCtx = {};
    requestCtx.Templates = {};

    requestCtx.Templates.Fields = {
        'MyLink': {'View': linkFieldTemplate}     
    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(requestCtx);

})();

function linkFieldTemplate(ctx) {
    var title = ctx.CurrentItem["urlText"];

    return "<a href='" + title + "'><img src='/SiteAssets/elements/images/book-open.png' style='height:20px;width:20px;'></a>");
}

In the above code

MyLink is field internal name that you want to customize
You can keep JavaScript into your one JS file and upload to a library or _catalogs
Edit your list view web part and under "Misc.." section you will see "JS Link" where you add your path of the JS file.

answered Jun 14 '17 at 16:15

Venkat Konjeti

4,959
1
10
19

Thanks for the help -- 3 follow-up questions. (1) Do I have to make one of these for each of my calculated columns or do I put them all on a single script doc? (2) What do I do with the script document? (3) How can I get html rendering of calculated columns to work in modal pop up boxes? – TheJDScott Jun 14 '17 at 16:34
In the same JS file add one function for each field. Example if you want to customize MyLink2 field then add a function like link2FieldTemplate. This means you are defining a function as a template for each field. 2) You put that link in a library and refer that path in list view web part properties. 3) You are telling your list view web part to use your JS file to apply customization. It works if you open web part page in a poup also.

Venkat Konjeti

Jun 14 '17 at 16:41

I really appreciate the clear, detailed explanation. I'm going to try this out and get back to you. This is probably the most comprehensive and clear information I've ever received on Stack Overflow. – TheJDScott Jun 14 '17 at 18:00

I couldn't get this to work. I have the following column (field internal name: 'Update'). when the icon (edit-file.jpg) is clicked, a modal box edit form is invoked based on the list item. The calculated column looks like this - -how do I format this in JS Link? Thanks!
="<a href='#' onclick="&"SP.UI.ModalDialog.OpenPopUpPage('https://mysite/Companies/Update.aspx?ID="&txtId&"');"&">"&" Click this icon to edit or update this Company "&"" – TheJDScott Jun 20 '17 at 17:47

You need to update the post with the script you added or create a new post. – Venkat Konjeti Jun 20 '17 at 17:58

score 0 · Answer 2 · answered Jun 14 '17 at 15:39

Some absolute genius named Glorfindel posted this and it works perfectly.

$(document).ready(function () {
if ($('div[fieldtype="Calculated"]').length != 0) {
    $('div[fieldtype="Calculated"]').each(function () {
        var thElement = $(this).parent();
        var indexOfThElement = thElement.parent().find('th').index(thElement);
        indexOfThElement++;
        thElement.closest('table').find('tr td:nth-child(' + indexOfThElement + ')').each(function () {
            var thisText = $(this).text();
            $(this).text('');
            $(this).append(thisText);
        });
    });
}
});

JSLink for Modal Pop-up calculated column not working (SPO)

2 Answers2