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?

1 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 }        


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>"; 
        case (currentVal>=6 && currentVal<=12): 
            return " <div style='font-weight:bold; font-size:24px; color:Yellow;'>.</div>"; 
        case (currentVal>12): 
            return " <div style='font-weight:bold; font-size:24px; color:Red;'>.</div>"; 

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.

  • This worked perfectly thank you this is exactly what i needed. I had to tweak the CSS a bit so it fit my column but this is great. Also thank you for the helpful links. They will definitely be useful in the future.
    – Mile T.
    Jun 21, 2018 at 17:50
  • would you happen to know anything about recursive navigation and fly out menus. I'm trying to change how site navigation works buy using a recursive fly-out menu that dynamically updates whenever a new site is created. I found some articles online that require you to keep up a list but with a very large site collections with several sub-sites and pages it becomes unrealistic and unreasonable to maintain.
    – Mile T.
    Jun 21, 2018 at 18:01
  • For the new question, it's recommended to create a new thread. One question, one thread. If my suggestion helps you, please "accept" this answer as the best answer. Thanks. Jun 22, 2018 at 1:37
  • Checked . and ill start a new thread
    – Mile T.
    Jun 22, 2018 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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