1

I have a SharePoint list where I have code to change color on a cell based on the field. It works but when I change to the second page of the list, the code does not work.

First page :

enter image description here

Second page :

enter image description here

My code, I think it's $(document).ready doesn't work... :

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$Text = $("td.ms-cellstyle.ms-vb2:contains('Réalisé')");
$Text.css("background-color", "#4DD17E");
$Text = $("td.ms-cellstyle.ms-vb2:contains('Maîtrisé')");
$Text.css("background-color", "#E59B2C");
$Text = $("td.ms-cellstyle.ms-vb2:contains('A risque')");
$Text.css("background-color", "#E52C2C");
$Text.css("color", "white");
});
</script>
1

You can use JS link option to render Client side. you copy the below script in java script file. upload to a document library. In list view Webpart Propeorties => JS link => you give this JS file reference so that it render the view. you can add multiple fields and switch cases as i shown one status field in the code

function registerRenderer() {

// 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
    "Status": { "View": priorityFiledTemplate }
};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);

}

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

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

    // Return html element with appropriate color based on priority value
    switch (status) {
        case "Réalisé":
            return "<span style='backgroundColor:#4DD17E;'>" + status + "</span>";
            break;
        case "Maîtrisé":
            return "<span style='backgroundColor:#E59B2C;'>" + status + "</span>";
            break;
        case "A risque":
            return "<span style='backgroundColor:#E52C2C;'>" + status + "</span>";
break;

    }
}

ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');
  • Thank you but Sorry, I did not succeed ... it doesn't work ... :( – Starmiikyy May 10 '17 at 11:47
  • Are you getting any javascript error by using above script ? – Monica Jagani May 10 '17 at 12:04
  • It works perfectly for me. May be check clienttemplates.js file reference missing. let me know what error coming in browser console. – Suresh Bolineni May 10 '17 at 12:34
  • SCRIPT1002: Erreur de syntaxe – Starmiikyy May 10 '17 at 12:37
  • I forgot something I think ... – Starmiikyy May 10 '17 at 12:38
0

Updated the code provided by Suresh

function registerRenderer() {

// 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
"Statut": { "View": priorityFiledTemplate }
};

SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);

}
// This function provides the rendering logic for list view

function priorityFiledTemplate(ctx) {

var status = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
// Return html element with appropriate color based on priority value
switch (status) {
    case "None":
        return '<span style="background-color:#4DD17E;">' + status + '</span>';
        break;
    case "Started":
        return '<span style="background-color:#2DD15A;">' + status + '</span>';
        break;
    case "Completed":
        return '<span style="background-color:#6DD12C;">' + status + '</span>';
        break;

}
}

ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js')
0

that's was my Solution:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script><script>

var tableHeader = null;

window.onload = function () {
    var table = $('.ms-listviewtable')[0];
    tableHeader = $(table).find("thead")[0];

    handleStatusColumn('Status');   
}

function handleStatusColumn(columnTitle){
    colorCellsInSpecificColumn(columnTitle, findCells('O'), '#f08080');     
    colorCellsInSpecificColumn(columnTitle, findCells('IP'), '#d8bfd8');    
    colorCellsInSpecificColumn(columnTitle, findCells('C'), '#c2d633');     
}



function findCells(type){
    return $("td.ms-cellstyle.ms-vb2").filter(function() {
        return $(this).text().trim() === type;
    })
}

function colorCellsInSpecificColumn(column, cellElement, colorHex){
    $.each(cellElement, function( index, value ) {
        var cellIndex = cellElement[index].cellIndex;
        //Return column label base on index of cell
        var columnLabel = returnLabelOfColumn(cellIndex);
        if(columnLabel === column){
            $(cellElement[index]).css("background-color", colorHex);
        }
    });     
}

function returnLabelOfColumn(cellIndex){
    var cellColumnHeader = $(tableHeader).find('th')[cellIndex];
    var headerLabel = $(cellColumnHeader).text().trim();
    return headerLabel 
}




 </script>

****enjoy** ;)!!**

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.