Forum Discussion
Configure conditional formatting for SharePoint list gallery view
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.
Hey everyone,
I've resolved this thanks to https://twitter.com/techan_k/status/1457664410042785802 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'))" },
11 Replies
Hey everyone,
I've resolved this thanks to https://twitter.com/techan_k/status/1457664410042785802 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'))" },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?
- Basic error - have to use internal Field name!
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.
