SOLVED

Configure conditional formatting for SharePoint list gallery view

%3CLINGO-SUB%20id%3D%22lingo-sub-2964798%22%20slang%3D%22en-US%22%3EConfigure%20conditional%20formatting%20for%20SharePoint%20list%20gallery%20view%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2964798%22%20slang%3D%22en-US%22%3E%3CP%3EHey%20there%2C%3C%2FP%3E%3CP%3EI%20am%20trying%20to%20configure%20conditional%20formatting%20on%20the%20tiles%20based%20on%20specific%20values.%20I%20am%20trying%20to%20create%20a%20traffic%20light%20system%20for%20the%20cards%20based%20on%20priority%20so%20that%20the%20background%20of%20the%20cards%20clearly%20identify%20the%20priority.%20So%20if%20it's%3A%3C%2FP%3E%3CUL%3E%3CLI%3EP1%20%3D%20Red%3C%2FLI%3E%3CLI%3EP2%20%3DAmber%3C%2FLI%3E%3CLI%3EP3%20%3D%20Green%3C%2FLI%3E%3C%2FUL%3E%3CP%3EI%20can%20see%20the%20background%20colour%20code%20for%20the%20cards%2C%20and%20I%20can%20change%20this%20manually%2C%20however%20I%20am%20hoping%20there%20is%20a%20way%20to%20put%20a%20conditional%20rule%20based%20on%20value%20to%20change%20the%20colour%20of%20the%20card%20based%20on%20priority%20value%3F%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22xeno85_0-1636966717510.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F327024iE24ACD3D91529BBA%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22xeno85_0-1636966717510.png%22%20alt%3D%22xeno85_0-1636966717510.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EIf%20this%20has%20been%20answered%20already%2C%20I%20do%20apologise%2C%20I%20searched%20actively%20to%20see%20if%20this%20had%20been%20addressed%20in%20anyway.%3C%2FP%3E%3CP%3EHappy%20to%20provide%20further%20information%20where%20required%20and%20thank%20you%20in%20advance.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-2964798%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-2968502%22%20slang%3D%22en-US%22%3ERe%3A%20Configure%20conditional%20formatting%20for%20SharePoint%20list%20gallery%20view%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2968502%22%20slang%3D%22en-US%22%3E%3CP%3EHey%20everyone%2C%3C%2FP%3E%3CP%3EI've%20resolved%20this%20thanks%20to%20%3CA%20href%3D%22https%3A%2F%2Ftwitter.com%2Ftechan_k%2Fstatus%2F1457664410042785802%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3ETetsuya%20Kawahara%3C%2FA%3E%26nbsp%3Bon%20Twitter!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EJust%20writing%20out%20the%20solution%20on%20here%20as%20well%20so%20it's%20easy%20to%20follow%20for%20anyone%20else.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFrom%20the%20class%20section%2C%20%3CSTRONG%3Edelete%3C%2FSTRONG%3E%20the%20%3CSTRONG%3Ems-bgcolour%3C%2FSTRONG%3E%20%3CSTRONG%3Evalue%3C%2FSTRONG%3E%20but%20keep%20the%20rest%20of%20the%20values%20as%20that%20gives%20the%20card%20its%20look%20and%20feel!%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22xeno85_0-1637042654888.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F327207iED7E4F005F5C96C1%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22xeno85_0-1637042654888.png%22%20alt%3D%22xeno85_0-1637042654888.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EAdd%20the%20%3CSTRONG%3Efollowing%20style%3C%2FSTRONG%3E%20value%20in%20between%20%3CSTRONG%3EelmType%3C%2FSTRONG%3E%20and%20%3CSTRONG%3Eattribute%3C%2FSTRONG%3E%20section.%20I've%20%3CSTRONG%3Eincluded%20the%20code%3C%2FSTRONG%3E%20below%20to%20make%20it%20easier%20to%20copy%20and%20paste%20in.%20Decide%20on%20the%20colours%20you%20would%20like!%20Add%20additional%20if%20values%20if%20more%20than%20two%20are%20required.%20The%20last%20hex%20colour%20code%20is%20an%20else%20colour%20if%20your%20values%20don't%20match%20any%20of%20your%20if%20statements.%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22xeno85_1-1637042812505.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F327208i914D0D170EE4F504%2Fimage-size%2Fmedium%3Fv%3Dv2%26amp%3Bpx%3D400%22%20role%3D%22button%22%20title%3D%22xeno85_1-1637042812505.png%22%20alt%3D%22xeno85_1-1637042812505.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-json%22%3E%3CCODE%3E%22style%22%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%22background-color%22%3A%20%22%3Dif%20(%5B%24ColumnName%5D%20%3D%3D%20'Nintex'%20%2C%20'%23F5F9FD'%20%2C%20if%20(%5B%24ColumnName%5D%20%3D%3D%20'Oracle'%20%2C%20'%23EBF9EC'%20%2C%20'%23FFF1EF'))%22%0A%20%20%20%20%20%20%20%20%7D%2C%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

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?

xeno85_0-1636966717510.png

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.

1 Reply
best response confirmed by xeno85 (New Contributor)
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!

xeno85_0-1637042654888.png

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.

xeno85_1-1637042812505.png

 

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