SOLVED

StopLights in the Modern Page Experience

%3CLINGO-SUB%20id%3D%22lingo-sub-242923%22%20slang%3D%22en-US%22%3EStopLights%20in%20the%20Modern%20Page%20Experience%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-242923%22%20slang%3D%22en-US%22%3E%3CP%3EWe've%20made%20extensive%20use%20of%20stoplights%20on%20our%20lists%20to%20indicate%20progress%20points%20in%20various%20approval%20workflows.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20my%20case%20the%20%22stoplights%22%20are%20actually%20images%20determined%20by%20a%20calculated%20field%2C%20and%20a%20Content%20Editor%20web%20part%20that%20allows%20it%20all%20to%20happen%20on%20a%20page.%20Most%20folks%20just%20show%20a%20red%20or%20green%20dot%20that's%20actually%20a%2072pt%20period%20%22.%22%20...%20Either%20way%20it's%20a%20very%20widely%20used%20solution%20and%20my%20question%20is%20the%20same%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIf%20we%20cannot%20use%26nbsp%3Bthe%20Content%20Editor%20Web%20Part%26nbsp%3Bwith%20the%26nbsp%3BModern%20Page%20Experience%20...%20then%20how%20can%20we%20recreate%20this%20effect%3F%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThis%20is%20a%20big%20%22sell%20point%22%20at%20my%20company%2C%20it's%20how%20people%20are%20used%20to%20working%26nbsp%3Band%20really%20saves%20people%20a%20lot%20of%20time%20-%20I'm%20sure%20a%20lot%20of%20people%20could%20use%20an%20answer%20on%20this%20%3A)%3C%2Fimg%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-242923%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-244975%22%20slang%3D%22en-US%22%3ERe%3A%20StopLights%20in%20the%20Modern%20Page%20Experience%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-244975%22%20slang%3D%22en-US%22%3E%3CP%3EHey%20Christopher%20-%26nbsp%3B%20this%20is%20great%2C%20thanks%20for%20pointing%20it%20out!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-242929%22%20slang%3D%22en-US%22%3ERe%3A%20StopLights%20in%20the%20Modern%20Page%20Experience%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-242929%22%20slang%3D%22en-US%22%3EHave%20you%20looked%20into%20Column%20formatting%3F%20This%20would%20be%20how%20you%20could%20do%20formatting%20based%20on%20values%20in%20a%20list%20in%20ModernUI.%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fcolumn-formatting%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fcolumn-formatting%3C%2FA%3E%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E
New Contributor

We've made extensive use of stoplights on our lists to indicate progress points in various approval workflows.

 

In my case the "stoplights" are actually images determined by a calculated field, and a Content Editor web part that allows it all to happen on a page. Most folks just show a red or green dot that's actually a 72pt period "." ... Either way it's a very widely used solution and my question is the same:

 

If we cannot use the Content Editor Web Part with the Modern Page Experience ... then how can we recreate this effect? 

 

This is a big "sell point" at my company, it's how people are used to working and really saves people a lot of time - I'm sure a lot of people could use an answer on this :)

 

 

2 Replies
best response confirmed by pops popsv2 (New Contributor)
Solution
Have you looked into Column formatting? This would be how you could do formatting based on values in a list in ModernUI.

https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting

Hey Christopher -  this is great, thanks for pointing it out!