Configure conditional formatting for SharePoint list gallery view

[xeno85]

Hey there,

I am trying to configure conditional formatting on the tiles based on specific values. I am trying to create a traffic light system for the cards based on priority so that the background of the cards clearly identify the priority. So if it's:

• P1 = Red
• P2 =Amber
• P3 = Green

I can see the background colour code for the cards, and I can change this manually, however I am hoping there is a way to put a conditional rule based on value to change the colour of the card based on priority value?

If this has been answered already, I do apologise, I searched actively to see if this had been addressed in anyway.

Happy to provide further information where required and thank you in advance.

[#2 · Accepted solution]

Hey everyone,

I've resolved this thanks to Tetsuya Kawahara on Twitter!

Just writing out the solution on here as well so it's easy to follow for anyone else.

From the class section, delete the ms-bgcolour value but keep the rest of the values as that gives the card its look and feel!

Add the following style value in between elmType and attribute section. I've included the code below to make it easier to copy and paste in. Decide on the colours you would like! Add additional if values if more than two are required. The last hex colour code is an else colour if your values don't match any of your if statements.

"style": {
          "background-color": "=if ([$ColumnName] == 'Nintex' , '#F5F9FD' , if ([$ColumnName] == 'Oracle' , '#EBF9EC' , '#FFF1EF'))"
        },

[#3]

@xeno85 

This is great. Any ideas on how to change the text color to go along with the background?

[#4]

@Jason1900 Add color property inside style as given below: 

"style": {
    "background-color": "=if ([$ColumnName] == 'Nintex' , '#F5F9FD' , if ([$ColumnName] == 'Oracle' , '#EBF9EC' , '#FFF1EF'))",
    "color": "=if ([$ColumnName] == 'Nintex' , '#FFFFFF' , if ([$ColumnName] == 'Oracle' , '#FF00FF' , '#FFF1EF'))"
},

You can change the hex color values as per your requirements. 

---

Please consider giving a Like if my post helped you in any way.

[#5]

@ganeshsanap that worked to change the text of one column but I'm looking to change the text of the entire card from black to white. Thank you for the suggestion.

[#6]

@Jason1900 Use "color" property inside "style" of outer most "elmType" in your JSON.

If above approach does not work, you can use "style" and "color" property for all "elmType" in your JSON as well.

---

Please consider giving a Like if my post helped you in any way.

[#7]

That worked, just had to apply to each "elmType" in the JSON. Thank you so much!

[#8]

@xeno85The If conditional is not work for me. All backgrounds are defaulting to #FFF1EF as per your example. I have tried a straight If statement as the choice is YES or NO but it continues to default to the null. any suggestions. The yes / no is a calculated field in the list. Ant suggestions?

[#9]

Basic error - have to use internal Field name!

[#10]

@Chuckisanim Yes, JSON formatting works with internal name of columns. So, you have to use the internal name for all the columns you are referring in your JSON.

Check this to get internal name of your column: How to find the Internal name of columns in SharePoint Online? 

---

Please consider giving a Like if my post helped you in any way.

[#11]

Hi, I am getting the same issue as above with the formatting only showing the final colour value. My column/internal name is 'Status', is there something wrong with using this term?

[#12]

@RybanSho Nothing wrong with the term/keyword "Status", you have to use it like [$Status] in JSON formatting code.

Can you share the JSON you are using so that I can have a look and reply back if there is any issue with the JSON?

---

Please consider giving a Like if my post helped you in any way.