Converting a Customized Calulated Column into JS Link with SharePoint Online

Question

I have been reading up on jslink for sharepoint online, and there are still some things that I am having trouble with.

My goal is to replace all of my calculated columns containing HTML with a jslink file. However, I'm uncertain how to do this a few calc columns, which are fairly complex. The column name is 'DocFolder' and for the sake of clarity, I'll lay out my column as it appears in its calculated column form, explain what they do, and itemize the components used in them. If anyone could either help me or point me in the right direction, it'd be huge.

As an aside, I've read the Microsoft board "intro to js link" as well as the jslink starter pack.

COLUMN NAME DocFolder

• internal/external column names are the same)
• 'Title': OOB SPO column, which holds the name of the item
• openPopUpPeople is a var in the custom script I have embedded on the Site Page

PURPOSE When the icon is clicked, it invokes a modal popup containing all Documents related to an item. This calculated column works in tandem with a custom script I have loaded on a Site Page

QUESTION I. If I'm going to create a JSLink file to replace the calculated column, what changes (if any) are required to be made to the calculated column formula? Do I leave it as is?

QUESTION II. The function works when I use the calculated column in a LVWP with the helper script in a Script Editor on a Site Page. However, when I add this JS Link to the page, the function no longer works. Can someone please help me get this working?

UPDATE FOR BOUNTY, 7/27/17)

I. Here is the calculated column ="<a href="&""""&"javascript:openPopupPeople('"&Title&"')"&""""&">"&"<img src='/SiteAssets/elements/images/folder-open.png' style='height:20px;width:20px;' title='Show all Documents Related to "&Title&"'>"&"</a>"

II. Here is the current JS LINK script for the calculated column, loaded as ~sitecollection/SiteAssets/jslink/jslink_docfolder.js

(function () {
var requestCtx = {};
requestCtx.Templates = {};
requestCtx.Templates.Fields = {
    'DocFolder': {'View': linkFieldTemplate}     
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(requestCtx);
})();
function linkFieldTemplate(ctx) {
var title = ctx.CurrentItem["Title"];
return "<a href='" + javascript:openPopupPeople("Title") + "'><img src='/SiteAssets/elements/images/folder-open.png' style='height:20px;width:20px;'></a>");
}

III. Here is the helper script, which resides on the site page.

<script type="text/javascript">
function openPopupPeople(filterValue) {
var pageUrl = 
"https://thejscott.sharepoint.com/SourcesLibrary/Forms/People.aspx?
FilterField1=PeopleId&FilterValue1=" + filterValue;  
var options = { url: pageUrl, width: 700, height: 600, title: "JScott People 
Docs" };
SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', 
options);
}
</script>

Answer 1

Question 2:

If your code example is intended to be for the field name you mention in your question ("DocFolder"), you need to be using the real column internal name:

// not this
requestCtx.Templates.Fields = {
    'JScott Link': {'View': linkFieldTemplate}     
};

// this
requestCtx.Templates.Fields = {
    'DocFolder': {'View': linkFieldTemplate}     
};

If you were running some tests for a column called "JScott Link", you would put the internal name of the "JScott Link" column there (which can't be "JScott Link", because that has a space in it, and internal names don't have spaces).

Secondly, the way you have written this line:

return "<a href='" + javascript:openPopupPeople("Title") + "'><img src='/SiteAssets/elements/images/folder-open.png' style='height:20px;width:20px;'></a>");

the javascript:openPopupPeople("Title") is not really within the return string, so the browser will try to execute that as real code, and insert anything that is returned from that into the string. Except that it won't really get executed, because prefixing a function call with javascript: is not really executable Javacript. I think what you are really looking to do is:

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

What that does is add the javascript:openPopupPeople() line as the href value in the link, and adds the value of the Title field, which you have captured in the variable title (note the lowercase "t"), as an argument to the openPopupPeople() function.

Question 1:

I'm not really sure. You could probably get rid of the formula completely, or leave it as is, either way I don't think it really matters, since by using a Client Side Rendering override, you will be overriding how SharePoint renders the contents of that field and SharePoint will look to use your JSLink/CSR code instead.

---

In response to your edits -

For the first part, sorry if I was unclear, I was pointing our a correction on one line of code, but you still need the two lines above it, so the first part of your script in full should look like this:

(function () {
var requestCtx = {};  // you still need this line of code!
requestCtx.Templates = {};  // you still need this line of code!
requestCtx.Templates.Fields = {
    'DocFolder': {'View': linkFieldTemplate}     
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(requestCtx);
})();

Also, for the second part, it does not look like you have incorporated the change I suggested into your code, for that last line where you build and return the link HTML. If you don't incorporate the change I suggested, it may render the image fine but the link will not work. Or it might not render anything, an error on that line might mean that nothing is returned from that function.

I would also recommend opening the developer tools window on the browser you are using, find the section where you can see all the scripts loaded, find your CSR script and set a breakpoint so you can step through your code and make sure it is running correctly, and also check the console for errors. That will help you find problem spots.

---

I had overlooked a closing parentheses that you had in your original script that should be removed.

The last line of your function, where you build and return the link HTML, should be this:

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

Look carefully at the last few characters in that line... you had a ) in there that was unnecessary, and needs to be removed.

---

If the link isn't working the original way, you could try:

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

And if that doesn't work, well, that's what debugging is all about! Open up that dev tools window and figure it out! (You might want to start with setting a breakpoint in your openPopupPeople function to make sure that it's getting called, and then go from there...)