Need help changing cell background color based on the content of the cell using CSR

Question

Here is a link to what I'm trying to do: Sharepoint CSR JSLink – View Cell Customization.

It's my understanding that it should work basically as is with only minor updates to the switch to fit my needs since its changing the cell format based on the contents of the cell and not referencing any field names directly. I'm also really surprised that with the amount of searching I've done, this is the only link I've found that truly captures what I'm trying to do. I've created a number of calculated columns to show whether the data is accurate or needs updating from the end user. "PASS" means everything is good, "FAIL" means there's a specific area that needs work.

The only thing I've been able to get to work is changing the background of the text itself, but this hasn't worked on all fields. Here is the code I can get to work:

function colorStatusCells() { 

// Create object that have the context information about the field that we want to change it's output render  
var VerifyTypeofActionContent = {}; 

VerifyTypeofActionContent.Templates = {}; 
VerifyTypeofActionContent.Templates.Fields = {"VerifyTypeofAction" : { "View": PassFailView } }; 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(VerifyTypeofActionContent); 

// Repeat the process for other fields
var VerifyChangesContent = {};

VerifyChangesContent.Templates = {}; 
VerifyChangesContent.Templates.Fields = {"VerifyChanges" : { "View": PassFailView } }; 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(VerifyChangesContent); 

var ValidCertifyContent = {};

ValidCertifyContent.Templates = {}; 
ValidCertifyContent.Templates.Fields = {"ValidCertify" : { "View": PassFailView } }; 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ValidCertifyContent);

var VerifyQuestionsContent = {};

VerifyQuestionsContent.Templates = {}; 
VerifyQuestionsContent.Templates.Fields = {"Verify3QuestionsNoBlanks" : { "View": PassFailView } }; 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(VerifyQuestionsContent);

var VerifyPermissionsContent = {};

VerifyPermissionsContent.Templates = {}; 
VerifyPermissionsContent.Templates.Fields = {"VerifyPermissions" : { "View": PassFailView } }; 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(VerifyPermissionsContent);

var VerifyEDITRequiredContent = {};

VerifyEDITRequiredContent.Templates = {}; 
VerifyEDITRequiredContent.Templates.Fields = {"VerifyEDITRequired" : { "View": PassFailView } }; 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(VerifyEDITRequiredContent);

var ValidEDITInfoContent = {};

ValidEDITInfoContent.Templates = {}; 
ValidEDITInfoContent.Templates.Fields = {"ValidEDITInfo" : { "View": PassFailView } }; 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ValidEDITInfoContent);

var VerifyCommentsReqContent = {};

VerifyCommentsReqContent.Templates = {}; 
VerifyCommentsReqContent.Templates.Fields = {"VerifyCommentsReq" : { "View": PassFailView } }; 
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(VerifyCommentsReqContent);

var PhaseCompleted = {};

PhaseCompleted.Templates = {};
PhaseCompleted.Templates.Fields = {"Phase 2 Done" : { "View": PassFailView } };
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(PhaseCompleted);

}; 

// This function provides the rendering logic for list view 

function PassFailView(ctx) { 

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

// Return html element with appropriate color based on priority value 
switch (priority) { 
case "FAIL": 
    return "<div style='background-color: #b84e4f; color: black; text-align: center'>" + priority + "</div>"; 
    break; 
case "PASS": 
    return "<div style='background-color: #4fb84e; color: black; text-align: center'>" + priority + "</div>"; 
    break;
case "No": 
    return "<div style='background-color: #b84e4f; color: black; text-align: center'>" + priority + "</div>"; 
    break; 
case "Yes": 
    return "<div style='background-color: #4fb84e; color: black; text-align: center'>" + priority + "</div>"; 
    break; 
default: break;
}  
} 
RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens('~site/TestDocuments/colorStatusCells.js'), colorStatusCells);colorStatusCells();

Here is a screenshot of the results:

• Any pointers on how to get the first link to work for me?
• Any ideas on why columns "Verify3QuestionsNoBlanks" and "Phase 2 Done" aren't working? Changing the names of the columns is not an option.
• If I can't use option 1, then how do I get rid of all the white space in option 2? Highlighting the entire row isn't an option since people need to see exactly what areas they need to correct.

I do not have access to the SharePoint server, SharePoint Designer, or any add-ons like Cisar, so the solution will need to be based entirely on the JS file.

Answer 1

Check for the internal names for Verify3QuestionsNoBlanks and Phase 2 Done and add the same in

 PhaseCompleted.Templates.Fields = {"Phase_x0020_2_x0020_Done" : { "View": PassFailView } };