Return to Revisions

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');