May 06 2019 02:28 PM
Hi. I can't figure out how to assign different colors in JSON. I can do all the .ms stuff...but their colors are horrible!!
How do I use RGBA or HEX or whatever? I don't really understand json. Please, help, the colors are really killing me and causing me problems in the office.
May 06 2019 05:42 PM
@BigBeuferd Have you checked out the MS Fabric library for the MS Class references?
They changed this page up a bit but, you can use the available classes there to find a style that works. If none of the colors work you may consider changing your site theme, which determines the colors associated with the majority of classes.
i.e. - ms-bgColor-themePrimary
The "additionalRowClass" object is limited to just applying classes. If you want to go beyond that, you can use JSON "style" objects to add inline style to your different elements. At that point it's a lot like HTML/CSS but, you have to rewire your brain for how things work in JSON and write way more code.
There's some helpful samples out on the GitHub repository to help you get started if you decide to go that route:
https://github.com/SharePoint/sp-dev-list-formatting/tree/master/view-samples
May 07 2019 09:02 AM
May 07 2019 10:08 AM
it also seems they've made some changes to the Sharepoint UI....Have no clue what it says, but will figure it out. Thanks for leading me down the right path.
{"elmType":"div","style":{"padding":"0 4px"},"attributes":{"class":{"operator":":","operands":[{"operator":"==","operands":[{"operator":"toLowerCase","operands":["@currentField"]},{"operator":"toLowerCase","operands":["Proposal/Quote"]}]},"sp-css-backgroundColor-blueBackground07",{"operator":":","operands":[{"operator":"==","operands":[{"operator":"toLowerCase","operands":["@currentField"]},{"operator":"toLowerCase","operands":["Rejected"]}]},"sp-css-backgroundColor-errorBackground",{"operator":":","operands":[{"operator":"==","operands":[{"operator":"toLowerCase","operands":["@currentField"]},{"operator":"toLowerCase","operands":["In Progress"]}]},"sp-css-backgroundColor-blueBackground37",{"operator":":","operands":[{"operator":"==","operands":[{"operator":"toLowerCase","operands":["@currentField"]},{"operator":"toLowerCase","operands":["Hold"]}]},"sp-css-backgroundColor-warningBackground50",{"operator":":","operands":[{"operator":"==","operands":[{"operator":"toLowerCase","operands":["@currentField"]},{"operator":"toLowerCase","operands":["Work Complete"]}]},"sp-css-backgroundColor-successBackground",{"operator":":","operands":[{"operator":"==","operands":[{"operator":"toLowerCase","operands":["@currentField"]},{"operator":"toLowerCase","operands":["All Billing Completed"]}]},"sp-css-backgroundColor-successBackground40",""]}]}]}]}]}]}},"txtContent":"@currentField","templateId":"BgColorChoice"}
May 08 2019 05:37 AM
Solution@BigBeuferd Depending on how/where you're trying to apply the color, you would need to add a "style" object after you declare an element in JSON.
Depending on what element you're applying the "style" object to, you can add in a "background-color" and/or "color" attribute to change the font/background colors. You can use RGB or HEX values for either of those attributes.
One thing to watch out for is your commas; if you miss a comma, your JSON will be invalid. If you use Visual Studio code, it validates as you go.
This article does a nice job of breaking down JSON structure for view formatting.
https://collab365.community/sharepoint-modern-view-formatting-json-part-1-2/
Jul 08 2020 03:37 AM
This might help you. I found this excellent list of SharePoint online classes for Modern UI created by Denis Molodtsov @Denis Molodtsov
List of Reusable SharePoint Online Classes for Modern UI
https://zerg00s.github.io/sp-modern-classes/
I found this very helpful.
May 08 2019 05:37 AM
Solution@BigBeuferd Depending on how/where you're trying to apply the color, you would need to add a "style" object after you declare an element in JSON.
Depending on what element you're applying the "style" object to, you can add in a "background-color" and/or "color" attribute to change the font/background colors. You can use RGB or HEX values for either of those attributes.
One thing to watch out for is your commas; if you miss a comma, your JSON will be invalid. If you use Visual Studio code, it validates as you go.
This article does a nice job of breaking down JSON structure for view formatting.
https://collab365.community/sharepoint-modern-view-formatting-json-part-1-2/