SharePoint creating stoplight/traffic light status column without changing the view to basic table

%3CLINGO-SUB%20id%3D%22lingo-sub-89258%22%20slang%3D%22en-US%22%3ESharePoint%20creating%20stoplight%2Ftraffic%20light%20status%20column%20without%20changing%20the%20view%20to%20basic%20table%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-89258%22%20slang%3D%22en-US%22%3E%3CP%3EHow%20do%20I%20create%20a%20stoplight%2Ftraffic%20light%20status%20column%20without%20changing%20the%20view%20to%20the%20basic%20table%20style%3F%20I%20would%20like%20to%20create%20the%20status%20column%20in%20the%20default%20table%20style%20not%20basic%20table%20style.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-89258%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EStoplight%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Etraffic%20light%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2348998%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20creating%20stoplight%2Ftraffic%20light%20status%20column%20for%20a%20Due%20Date%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2348998%22%20slang%3D%22en-US%22%3E%3CDIV%20class%3D%22MessageEditor%22%3E%3CDIV%20class%3D%22lia-js-block-events%22%3E%3CDIV%20class%3D%22lia-form-row%20lia-form-body-entry%22%3E%3CDIV%20class%3D%22lia-quilt-row%20lia-quilt-row-standard%22%3E%3CDIV%20class%3D%22lia-quilt-column%20lia-quilt-column-24%20lia-quilt-column-single%22%3E%3CDIV%20class%3D%22lia-quilt-column-alley%20lia-quilt-column-alley-single%22%3E%3CDIV%20class%3D%22lia-form-input-wrapper%22%3E%3CDIV%20class%3D%22message-body-editor%22%3E%3CDIV%20class%3D%22lia-mentions-hints%22%3E%3CDIV%20class%3D%22lia-panel%20lia-panel-standard%22%3E%3CDIV%20class%3D%22lia-decoration-border%22%3E%3CDIV%20class%3D%22lia-decoration-border-content%22%3E%3CDIV%3E%3CDIV%20class%3D%22lia-panel-content-wrapper%22%3E%3CDIV%20class%3D%22lia-panel-content%22%3E%3CDIV%20class%3D%22lia-mentions-hints-description%22%3E%3CSPAN%20class%3D%22lia-mentions-symbol%22%3E%40%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3Elinks%20to%20members%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3CDIV%20class%3D%22lia-decoration-border-bottom%22%3E%3CDIV%3E%3CSPAN%3EI%20need%20to%20create%20a%20traffic%20light%20or%20colored%20dot%20for%20a%20Modern%20SharePoint%20list%20of%20documents%20that%20need%20to%20be%20updated%20each%20year.%26nbsp%3B%20The%20list%2C%20below%2C%20shows%20a%20Due%20Date%20for%20each%20item%20on%20the%20list.%26nbsp%3B%20The%20Due%20Date%20is%20a%20calculated%20field%20based%20on%20the%20Last%20Date%20updated%20plus%20one%20year.%26nbsp%3B%20The%20traffic%20light%20or%20color%20dot%20will%20be%20in%20the%20column%20called%20Status%20and%20will%20indicate%20the%20following.%26nbsp%3B%20Does%20anyone%20have%20the%20JSON%20code%20for%20this%3F%26nbsp%3B%20(Note%20that%20I%20used%20the%20color%20code%20format%20for%20the%20dates%20in%20the%20Due%20Date%20column%2C%20but%20the%20colors%20are%20not%20the%20red%2C%20green%20and%20yellow%20that%20I%20need.)%26nbsp%3B%20%26nbsp%3BThank%20you.%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FDIV%3E%3CP%3EIf%20the%20Due%20Date%20is%20fewer%20than%207%20days%20away%2C%20the%20dot%20will%20be%20Red.%3C%2FP%3E%3CP%3EIf%20the%20Due%20Date%20is%20fewer%20than%2014%20days%20away%2C%20the%20dot%20will%20be%20Yellow.%3C%2FP%3E%3CP%3EIf%20the%20Due%20Date%20is%20greater%20than%20or%20equal%20to%2014%20days%20away%2C%20the%20dot%20will%20be%20Green.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-89276%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20creating%20stoplight%2Ftraffic%20light%20status%20column%20without%20changing%20the%20view%20to%20basic%20tab%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-89276%22%20slang%3D%22en-US%22%3EThen%20use%20JSLINK%20to%20create%20that%20kind%20of%20customizations%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-89271%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20creating%20stoplight%2Ftraffic%20light%20status%20column%20without%20changing%20the%20view%20to%20basic%20tab%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-89271%22%20slang%3D%22en-US%22%3E%3CP%3EClassic%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-89268%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20creating%20stoplight%2Ftraffic%20light%20status%20column%20without%20changing%20the%20view%20to%20basic%20tab%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-89268%22%20slang%3D%22en-US%22%3EIs%20this%20for%20a%20modern%20list%20or%20a%20classic%20one%3F%3C%2FLINGO-BODY%3E
New Contributor

How do I create a stoplight/traffic light status column without changing the view to the basic table style? I would like to create the status column in the default table style not basic table style.

4 Replies
Is this for a modern list or a classic one?
Then use JSLINK to create that kind of customizations
@ links to members
I need to create a traffic light or colored dot for a Modern SharePoint list of documents that need to be updated each year.  The list, below, shows a Due Date for each item on the list.  The Due Date is a calculated field based on the Last Date updated plus one year.  The traffic light or color dot will be in the column called Status and will indicate the following.  Does anyone have the JSON code for this?  (Note that I used the color code format for the dates in the Due Date column, but the colors are not the red, green and yellow that I need.)   Thank you.

If the Due Date is fewer than 7 days away, the dot will be Red.

If the Due Date is fewer than 14 days away, the dot will be Yellow.

If the Due Date is greater than or equal to 14 days away, the dot will be Green.