Quick question: Can I add custom colors to the View Formatting?

%3CLINGO-SUB%20id%3D%22lingo-sub-793248%22%20slang%3D%22en-US%22%3EQuick%20question%3A%20Can%20I%20add%20custom%20colors%20to%20the%20View%20Formatting%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-793248%22%20slang%3D%22en-US%22%3E%3CP%3EEdit%3A%20This%20is%20on%20Sharepoint%20Online%20using%20modern%20experience.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20custom%20JSON%20in%20a%20list%20to%20color%20code%20the%20row%20based%20on%20one%20column.%20The%20only%20colors%20I%20have%20been%20able%20to%20make%20work%20are%20the%20colors%20from%20the%20%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fstyles%2Fweb%2Fcolors%2Ftheme-slots%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3EOffice%20UI%20Fabric%3C%2FA%3E.%20I%20want%20to%20make%20the%20colors%20a%20little%20more%20transparent.%20Here%20is%20my%20current%20code%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3E%7B%0A%20%20%22%24schema%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fjson-schemas%2Fsp%2Fview-formatting.schema.json%3C%2FA%3E%22%2C%0A%20%20%20%22additionalRowClass%22%3A%20%22%3Dif(%5B%24Status%5D%20%3D%3D%20'Status1'%2C%20'ms-bgColor-greenLight'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(%5B%24Status%5D%20%3D%3D%20'Status2'%2C%20'ms-bgColor-neutralQuaternaryAlt'%2C%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if(%5B%24Status%5D%20%3D%3D%20'Status3'%2C%20'ms-bgColor-red%20ms-fontColor-black%2C%20false)))%22%0A%7D%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3BI%20tried%20adding%20the%20following%20before%20%22additionalRowClass%22%20...%20and%20changing%20the%20Status1%20if%20statement%20to%20'greenLight'%2C%20but%20that%20didn't%20work.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3E%22greenLight%22%3A%20%5B16%2C%20124%2C%2016%2C%200.2%5D%2C%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20no%20pro%20in%20JSON%2C%20but%20I%20have%20read%20through%20all%20these%20Schemas%20and%20I%20can't%20find%20and%20reference%20or%20definition%20to%20colors%20what%20so%20ever.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThank%20you%20for%20any%20help%20you%20can%20provide.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-794876%22%20slang%3D%22en-US%22%3ERe%3A%20Quick%20question%3A%20Can%20I%20add%20custom%20colors%20to%20the%20View%20Formatting%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-794876%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F388635%22%20target%3D%22_blank%22%3E%40Dave0673%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ETake%20a%20look%20at%20this%20section%20of%20the%20column%20formatting%20documentation.%20It%20looks%20like%20you%20can%20add%20a%20%22style%22%20property%20where%20you%20can%20add%20properties%20like%20%22color%22%20or%20(presumably)%20%22background-color%22%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-gb%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fcolumn-formatting%23apply-formatting-based-on-date-ranges%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-gb%2Fsharepoint%2Fdev%2Fdeclarative-customization%2Fcolumn-formatting%23apply-formatting-based-on-date-ranges%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Visitor

Edit: This is on Sharepoint Online using modern experience.

 

I have custom JSON in a list to color code the row based on one column. The only colors I have been able to make work are the colors from the Office UI Fabric. I want to make the colors a little more transparent. Here is my current code:

 

{
  "$schema": "<a href="https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json" target="_blank">https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json</a>",
   "additionalRowClass": "=if([$Status] == 'Status1', 'ms-bgColor-greenLight',
                           if([$Status] == 'Status2', 'ms-bgColor-neutralQuaternaryAlt', 
                           if([$Status] == 'Status3', 'ms-bgColor-red ms-fontColor-black, false)))"
}

 

 I tried adding the following before "additionalRowClass" ... and changing the Status1 if statement to 'greenLight', but that didn't work.

 

"greenLight": [16, 124, 16, 0.2],

 

I'm no pro in JSON, but I have read through all these Schemas and I can't find and reference or definition to colors what so ever.

 

Thank you for any help you can provide.

1 Reply
Highlighted

@Dave0673 

 

Take a look at this section of the column formatting documentation. It looks like you can add a "style" property where you can add properties like "color" or (presumably) "background-color"

 

https://docs.microsoft.com/en-gb/sharepoint/dev/declarative-customization/column-formatting#apply-fo...