SharePoint 2013 - overriding fields with JavaScript

419 Views Asked by At

Recently I've been assigned to set up a few simple changes to SharePoint site.

Few initial conditions:
- it's sharepoint 2013
- it should be implemented with JS
- I have basic knowledge of JS and no experience with SharePoint whatsoever

I have a JS file linked with the view on my page. When I test with with sth simple like alert('a'), it works just fine.

However, when I try to manipulate sth that is within the view - for example highlight values in Priority column, I have no luck.

This is the code I use:

(function () { 

    // Create object that have the context information about the field that we want to change it's output render  
    var priorityFiledContext = {}; 
    priorityFiledContext.Templates = {}; 
    priorityFiledContext.Templates.Fields = { 
        // Apply the new rendering for Priority field on List View 
        "Priority": { "View": priorityFiledTemplate } 
    }; 

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext); 

})(); 

// This function provides the rendering logic for list view 
function priorityFiledTemplate(ctx) {

    var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name]; 

    // Return html element with appropriate color based on priority value 
    switch (priority) { 
        case "(1) High": 
            return "<span style='color :#f00'>" + priority + "</span>"; 
            break; 
        case "(2) Normal": 
            return "<span style='color :#ff6a00'>" + priority + "</span>"; 
            break; 
        case "(3) Low": 
            return "<span style='color :#cab023'>" + priority + "</span>"; 
    }
}

And this is my view:

enter image description here

I've tried it both with MDS enabled and disabled. I've tried to anchor the code in script editor and as a part of html web part. I took this sample code actually from MS website where it works just fine: https://code.msdn.microsoft.com/office/Client-side-rendering-code-0a786cdd

Would appreciate some help, I've tried different properties settings when I uploaded the code to masterpages, I've tried putting it in other directories but nothing really works.

1

There are 1 best solutions below

0
On

After digging for some time, it turns out that although Column name seem to be Priority, it was only a display name.
After checking the HTML source, it turned out that for some reason it's actual name is _x007a_it4.