SOLVED

List Style in Modern experience not working

%3CLINGO-SUB%20id%3D%22lingo-sub-1060128%22%20slang%3D%22en-US%22%3EList%20Style%20in%20Modern%20experience%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1060128%22%20slang%3D%22en-US%22%3E%3CP%3EHello!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20created%20a%20list%20with%20a%20%22Shaded%22%20Style.%20If%20the%20list%20is%20on%20Classic%20mode%2C%20the%20links%20are%20nice%20and%20blue%20and%20the%20shading%20works%20perfectly%2C%20but%20if%20I%20view%20the%20list%20in%20modern%20experience%2C%20all%20of%20the%20formatting%20disappears%2C%20why%20is%20that%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you!%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20313px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F161088iB87A518B3D1529C9%2Fimage-dimensions%2F313x270%3Fv%3D1.0%22%20width%3D%22313%22%20height%3D%22270%22%20alt%3D%22link-modern-exp.PNG%22%20title%3D%22link-modern-exp.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20285px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F161087i0AD16E88541679CD%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22link-classic-exp.PNG%22%20title%3D%22link-classic-exp.PNG%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%E2%80%83%E2%80%83%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1060128%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1060234%22%20slang%3D%22en-US%22%3ERe%3A%20List%20Style%20in%20Modern%20experience%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1060234%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F485303%22%20target%3D%22_blank%22%3E%40yuyitax%3C%2FA%3E%26nbsp%3B%20lists%20in%20the%20modern%20experience%20are%20formatted%20in%20a%20different%20way%20to%20classic%20lists.%20For%20some%20column%20types%20you%20can%20select%20the%20formatting.%20Click%20on%20the%20dropdown%20arrow%20next%20to%20the%20column%2C%20select%20Column%20settings%20and%20then%20click%20Format%20this%20column%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20882px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F161096iA8433F35A2D7CE25%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22custom-format-text2.png%22%20title%3D%22custom-format-text2.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ETo%20do%20something%20like%20setting%20the%20text%20color%20for%20a%20particular%20column%26nbsp%3B%20you'd%20do%20the%20same%3A%3C%2FP%3E%3CP%3E%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20409px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F161091iD20F82AEAF0CFFE9%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22custom-format-text1.png%22%20title%3D%22custom-format-text1.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CBR%20%2F%3Ebut%20then%20in%20the%20in%20the%20format%20box%20that%20appears%20on%20the%20right%20you'd%20enter%20(or%20copy%2Fpaste)%20JSON%20code%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20805px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F161094iBBD116E1B1A229E6%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22custom-format-text0.png%22%20title%3D%22custom-format-text0.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20set%20the%20color%20of%20the%20%22County%22%20column%20to%20a%20shade%20of%20blue%20and%20the%20JSON%20syntax%20for%20that%20was%3A%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%7B%0A%20%20%20%22%24schema%22%3A%20%0A%20%20%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%3C%2FA%3E%22%2C%0A%20%20%20%22elmType%22%3A%20%22div%22%2C%0A%20%20%20%22debugMode%22%3A%20true%2C%0A%20%20%20%22txtContent%22%3A%20%22%40currentField%22%2C%0A%20%20%20%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%22color%22%3A%20%22%230000FF%22%0A%20%20%20%7D%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20formatting%20of%20modern%20lists%20is%20more%20powerful%20than%20on%20classic%20lists%20and%20allows%20you%20to%20add%2C%20for%20example%2C%20buttons%20to%20trigger%20a%20flow%20and%20do%20other%20actions%3A%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F161098i5C89B9B5645BA18C%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%220-basic-button.png%22%20title%3D%220-basic-button.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20713px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F161099iCF91BE748F290708%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%222-flowJSON.png%22%20title%3D%222-flowJSON.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3CBR%20%2F%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1060297%22%20slang%3D%22en-US%22%3ERe%3A%20List%20Style%20in%20Modern%20experience%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1060297%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F174092%22%20target%3D%22_blank%22%3E%40Rob%20Elliott%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHi%20Rob%2C%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you%20for%20your%20fast%20help.%20I%20tried%20using%20the%20blue%20shade%20code%20that%20you%20share%20but%20i%20get%20an%20error%20that%20says%20to%20use%20a%20valid%20column-formatting%20JSON.%20Any%20idea%20why%3F%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20203px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F161103iF494110B8B5C0C7E%2Fimage-dimensions%2F203x474%3Fv%3D1.0%22%20width%3D%22203%22%20height%3D%22474%22%20alt%3D%22clipboard_image_0.png%22%20title%3D%22clipboard_image_0.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1060303%22%20slang%3D%22en-US%22%3ERe%3A%20List%20Style%20in%20Modern%20experience%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1060303%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F485303%22%20target%3D%22_blank%22%3E%40yuyitax%3C%2FA%3E%26nbsp%3Bsorry%20the%20JSON%20code%20got%20changed%20during%20the%20copy%20and%20paste%2C%20hopefully%20now%20corrected.%20The%20code%20is%3A%3CBR%20%2F%3E%3CBR%20%2F%3E%7B%3CBR%20%2F%3E%22%24schema%22%3A%3CBR%20%2F%3E%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fcolumn-formatting.schema.json%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22elmType%22%3A%20%22div%22%2C%3CBR%20%2F%3E%22debugMode%22%3A%20true%2C%3CBR%20%2F%3E%22txtContent%22%3A%20%22%40currentField%22%2C%3CBR%20%2F%3E%22style%22%3A%20%7B%3CBR%20%2F%3E%22color%22%3A%20%22%230000ff%22%3CBR%20%2F%3E%7D%3CBR%20%2F%3E%7D%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3CBR%20%2F%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1060370%22%20slang%3D%22en-US%22%3ERe%3A%20List%20Style%20in%20Modern%20experience%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1060370%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F485303%22%20target%3D%22_blank%22%3E%40yuyitax%3C%2FA%3E%26nbsp%3B%20although%20Microsoft%20say%20that%20the%20Title%20column%20does%20support%20column%20formatting%2C%20there%20does%20seem%20to%20be%20a%20problem%20with%20that.%20I've%20only%20ever%20used%20it%20on%20other%20columns.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3CBR%20%2F%3EMicrosoft%20Power%20Automate%20Community%20Super%20User%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1060436%22%20slang%3D%22en-US%22%3ERe%3A%20List%20Style%20in%20Modern%20experience%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1060436%22%20slang%3D%22en-US%22%3E%3CP%3EThank%20you%20for%20your%20help%20with%20this!%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F174092%22%20target%3D%22_blank%22%3E%40Rob%20Elliott%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1060307%22%20slang%3D%22en-US%22%3ERe%3A%20List%20Style%20in%20Modern%20experience%20not%20working%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1060307%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F174092%22%20target%3D%22_blank%22%3E%40Rob%20Elliott%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you%20Rob%20that%20did%20fix%20the%20link%20coloring%2C%20but%20now%20they%20are%20not%20clickable%2C%20meaning%20they%20do%20not%20link%20to%20their%20corresponding%20list%20item.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Occasional Contributor

Hello!

 

I have created a list with a "Shaded" Style. If the list is on Classic mode, the links are nice and blue and the shading works perfectly, but if I view the list in modern experience, all of the formatting disappears, why is that?

 

Thank you! 

link-modern-exp.PNG

link-classic-exp.PNG

  

6 Replies

Hi @yuyitax  lists in the modern experience are formatted in a different way to classic lists. For some column types you can select the formatting. Click on the dropdown arrow next to the column, select Column settings and then click Format this column
custom-format-text2.png

 

To do something like setting the text color for a particular column  you'd do the same:


custom-format-text1.png


but then in the in the format box that appears on the right you'd enter (or copy/paste) JSON code:

 

custom-format-text0.png

 

I set the color of the "County" column to a shade of blue and the JSON syntax for that was:

 

{
"$schema":
"https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"debugMode": true,
"txtContent": "@currentField",
"style": {
"color": "#0000ff"
}
}

 

The formatting of modern lists is more powerful than on classic lists and allows you to add, for example, buttons to trigger a flow and do other actions:
0-basic-button.png

 

2-flowJSON.png

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User

 

@Rob Elliott 

Hi Rob, 

 

Thank you for your fast help. I tried using the blue shade code that you share but i get an error that says to use a valid column-formatting JSON. Any idea why?

clipboard_image_0.png

Best Response confirmed by yuyitax (Occasional Contributor)
Solution

@yuyitax sorry the JSON code got changed during the copy and paste, hopefully now corrected. The code is:

{
"$schema":
"https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"debugMode": true,
"txtContent": "@currentField",
"style": {
"color": "#0000ff"
}
}

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User

@Rob Elliott 

 

Thank you Rob that did fix the link coloring, but now they are not clickable, meaning they do not link to their corresponding list item. 

@yuyitax  although Microsoft say that the Title column does support column formatting, there does seem to be a problem with that. I've only ever used it on other columns.

 

Rob
Los Gallardos
Microsoft Power Automate Community Super User

Thank you for your help with this! @Rob Elliott