SharePoint ONLINE List Traffic Lights Showing Code instead of color

Question

I have a small list I'm testing in for traffic lights right now with 3 columns.

Title, column1 and traffic light

title is just a text column, column1 is a number column, and traffic light is a calculated column with a bit of HTML/CSS in it with the .

the code for traffic light looks like:

="<DIV style='font-weight:bold; font-size:24px; color:"&IF([column1]<6,"Green",IF([column1]>12,"Red","Yellow"))&";'>•</DIV>"

Right now its only working in part. I update column 1 with a number and it will return the line of code it should be not the color.

example: I enter 10 in column1 Traffic Lights return :<DIV style='font-weight:bold; font-size:24px; color:Yellow;'>.</DIV>

This should just return a yellow dot. It will change depending on the number I enter but It's not showing the color.

Is there a setting or feature I need to turn on?

Answer 1

Microsoft blocks the execution of custom markup in calculated fields in SharePoint Online from June 13, 2017 onwards. Learn more about handling HTML markup in SharePoint calculated fields.

For the classic list view in SharePoint Online, we can use Client Side Rendering to render list view.

Information about Client Side Rendering.

A demo: Add the following script to the page for rendering “Status” column based on column1 value:

<script src="https://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
(function () {
    var overrideNameField = {}; 
    overrideNameField.Templates = {};
    // This action will edit the “Status” field. You can change the “Status” to another column’s internal name.
    overrideNameField.Templates.Fields = {
        "Status": { "View": overrideNameFieldTemplate }        
    };    

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideNameField);

})();
function overrideNameFieldTemplate(ctx) { 
//get the column value.
var currentVal = ctx.CurrentItem["column1"];
   // Render the column
switch (true) { 
        case (currentVal<6): 
            return " <div style='font-weight:bold; font-size:24px; color:Green;'>.</div>"; 
            break; 
        case (currentVal>=6 && currentVal<=12): 
            return " <div style='font-weight:bold; font-size:24px; color:Yellow;'>.</div>"; 
            break; 
        case (currentVal>12): 
            return " <div style='font-weight:bold; font-size:24px; color:Red;'>.</div>"; 
} 
}
</script>

For the modern list view in SharePoint Online, we can use JSON to render the column.

Learn more about using column formatting to customize SharePoint.