1

SP2013 On-Premise farm solution.

I'm trying to use Client Side Rendering to change how a specific text field is displayed. I want to implement a color picker, but I didn't want to have to create a new field definition.

I've created two new text fields and modified their JSLink property to point to my script file.

spField.JSLink = "~site/_layouts/15/Timeline/js/csr/TimelineForegroundColor.js"
spField.Update(true);

This works when displaying items as a list, but the script file isn't loaded at all for any type of form even though the field is displayed. There is no script error, the script file just isn't loaded.

Anyone run into this problem before?

Edit: For reference this is the script file that I'm currently using:

console.log("JSLink TimelineForegroundColor.base");
(function () {
    'use strict';

    console.log("JSLink TimelineForegroundColor.init");

    var renderView = function (mode, ctx) {
        console.log("TimelineForegroundColor", mode, ctx);
        return "<div style='background-color:rgba(0,255,0, 0.2);text-align:center;padding:5px;' data-color='view:" + ctx.CurrentItem[ctx.CurrentFieldSchema.Name] + "'>" + ctx.CurrentItem[ctx.CurrentFieldSchema.Name] + "</div>";
    };
    var renderEdit = function (mode, ctx) {
        console.log("TimelineForegroundColor", mode, ctx);
        return "<div style='background-color:rgba(255,0,0, 0.2);text-align:center;padding:5px;' data-color='edit:" + ctx.CurrentItem[ctx.CurrentFieldSchema.Name] + "'>" + ctx.CurrentItem[ctx.CurrentFieldSchema.Name] + "</div>";
    };

    var csr = {};
    csr.Templates = {
        Fields: {
            "TimelineForegroundColor": {
                View: renderView.bind(undefined, "View"),
                DisplayForm: renderView.bind(undefined, "DisplayForm"),
                EditForm: renderEdit.bind(undefined, "EditForm"),
                NewForm: renderEdit.bind(undefined, "NewForm")
            }
        }
    };

    var registerTemplateOverride = function () {
        console.log('Registering template overrides for TimelineForegroundColor');
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(csr);
    };

    ExecuteOrDelayUntilScriptLoaded(registerTemplateOverride, 'clienttemplates.js');
})();
  • 1
    Start by showing us your scriptfile – Danny '365CSI' Engelman Mar 21 '17 at 11:58
  • Why? The script file doesn't matter. As I wrote it works fine in View mode, and is never even loaded in forms. – Thomas Mar 21 '17 at 11:59
  • So you say the first console.log is not executed? Then yes the script doesn't matter. Install the Chrome Extension Cisar and paste your script in the CSR template Cisar creates to verify CSR can be applied with a WebPart JSLink. – Danny '365CSI' Engelman Mar 21 '17 at 12:37
  • I'm looking at the Network traffic in Chrome and the script file is never loaded on form pages (New, Display, Edit). It does however work fine on views. Doesn't that mean the script CAN in fact be used as a JSLink? Also Webparts are not (I think) involved. As I wrote above I've added the JSLink to the SPField directly because I want it to follow the field itself, not a web part or view. – Thomas Mar 22 '17 at 6:50
  • 1
    CSR is buggy as [xxx], So yes, it could well be your Field definitions don't always do what you think they do. Like I said, if you set the View JSLink definition (like Microsoft does in the Task list to create a Checkbox) they are totally ignored when a JSLink definition is set on the WebPart. Since I only do Client Side I never work with Field JSLinks (as they require Powershell to set) And I hardly use JSLink as I define the CSR code in a UserCustomAction ScriptLink – Danny '365CSI' Engelman Mar 22 '17 at 12:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.