Forum Discussion
Custom Report Theme JSON Property settings in Tables/Matrix
Hey Everyone,
Microsoft has gotten back with me and said
"Our product team have fixed this issue and code check-in has been done.
Product team confirmed that this fix will be available in the service in about 3 weeks and this fix will be available in December version of Power BI Desktop."
Looks like most or all of the properties that don't work now will work in the December release! ....To Be Continued...
10/25 update:
I got another response back-
" My product team confirmed that the JSON file that you have developed is correct. They have fixed bugs in Power BI Desktop which rendered properly based on the JSON file."
looks like we can take my original example as correct as far as the properties of the "grid" card are concerned. Here's to changing more properties by JSON theme files in December!
11/1 Update:
OK so the Microsoft team told me specifically that the only issues that will be fixed are the ones that are brought to their team via support tickets. So if you see something that doesn't work SEND IT IN! They said in order to keep track of what needs fixing they will only fix issues brought to their attention. I already sent in all the ones that don't work for my use case but that will not cover all the other JSON properties not working. Someone needs to do a giant test of all the properties and then send in a huge ticket :smileylol:
12/12 Update:
The December release is out and as far as I can tell, there has been no changes as far as the JSON features working. I reached out to the MS team to troubleshoot. hopefully its user error and I just need to change my JSON. :smileymad:
Jan 2018 Update:
Apparently the JSON features I requested to be fixed WERE fixed but they weren't working the way they originally told me they would! This works for me and fulfills my requirements for my original post:
{ "name":"Jan 2018 Theme", "dataColors":[ "#0069aa", "#4f8dc2", "#9ab7da", "#cedaec", "#00c762", "#fbe7a6", "#ff544a", "#f89a1c", "#545451" ], "background":"#FFFFFF", "foreground":"#545451", "tableAccent":"#4f8dc2", "visualStyles":{ "*":{ "*":{ "*":[ { "fontFamily":"Segoe UI" } ] } }, "*":{ "*":{ "grid":[ { "outlineColor":{"solid":{"color":"#4f8dc2"}}, "gridVertical":true, "gridVerticalColor":{"solid":{"color":"#4f8dc2"}}, "gridHorizontal":true, "gridHorizontalColor":{"solid":{"color":"#4f8dc2"}} } ], "columnHeaders":[ { "fontColor":{"solid":{"color":"#ffffff"}}, "backColor":{"solid":{"color":"#0069aa"}}, "fontFamily":"Segoe UI" } ], "values":[ { "backColorSecondary":{"solid":{"color":"#cedaec"}} } ] } } } }
I will admit the issues you are stuggling through are difficult. The documenation is not very clear on how to customize each visual. I will state this, which might help you get down to a lower editing level within the Power BI Report Themes.
1. The general settings for all visuals starts with the following:
visualStyles, then three nested "*", then the properties you want to change. This is noted in the top section of the JSON below. When these properties are set, they are set for all visuals globally. FontSize means you set all visuals where the fontSize property is located to 12.
{
"name": "My Theme",
"visualStyles": {
"*": {
"*": {
"*": [
{
"fontSize": 12,
"fontFamily": "Arial Black"
}
]
}
},
"barChart": {
"*": {
"categoryAxis": [
{
"show": true,
"titleText": "MIke"
}
]
}
}
}
}In each visuals there are many different font sizes, See below the sample of the Font Sizes for the bar Chart.
- See in here we have fontSize for the Legend, and Labels, but also have titleFontSize for CategoryAxis (x-axis) and valueAxis (y-axis).
{
"name": "My Theme",
"visualStyles": {
"barChart": {
"*": {
"legend": [
{
"showTitle": true,
"fontSize": 12
}
],
"categoryAxis": [
{
"show": true,
"fontSize": 13,
"showAxisTitle": true,
"titleFontSize": 14
}
],
"valueAxis": [
{
"show": true,
"fontSize": 15,
"showAxisTitle": true,
"titleFontSize": 16
}
],
"labels": [
{
"show": true,
"fontSize": 17
}
]
}
}
}
}If you wanted to to change all fonts for all visuals you will need to produce something like the following:
{
"name": "My Theme",
"visualStyles": {
"*": {
"*": {
"*": [
{
"fontSize": 12,
"titleFontSize": 14
}
]
}
}
}
}This will change all properties in the Legend or x and y Axis - at the global level... Note there are three *'s in the front.
Another side note:
When you modify the Global properties, and then set the same property at the local visual level, the Local visual level property setting with override any global settings.
{
"name": "My Theme",
"visualStyles": {
"*": {
"*": {
"*": [
{
"fontSize": 12
}
]
}
},
"barChart": {
"*": {
"legend": [
{
"showTitle": true,
"fontSize": 14
}
]
}
},
"columnChart": {
"*": {
"labels": [
{
"fontSize": 16
}
]
}
}
}
}In this case the global setting would be any visual that had a fontSize property in any sub grouping, would be set to 12. In only the Bar Chart Visual would the fontSize property be 14 for the legend, and the Column Chart would have labels with the fontSize of 16.
The defined properties for each visual will override the global properties defined in the top section of JSON.
I hope that helps. I am working as fast as I can to update the Report Theme tool to increase it's flexibility and allow for more changes per visual and at a global level.
Thanks,
Mike Carlo
Thank you for your response. It is very helpful to know the underlying structure and rules that go into the JSON files. Any insight into the solution to my original question?
UPDATE: I have been going through and testing what property settings work and what doesn't work in the pivotTable (matrix) and have found out the following:
cardName propertyName Does it work?
| columnHeaders | fontFamily | YES |
| columnHeaders | fontSize | YES |
| columnHeaders | autoSizeColumnWidth | YES |
| columnHeaders | urlIcon | YES |
| columnHeaders | fontColor | NO |
| columnHeaders | backColor | NO |
| columnHeaders | wordWrap | NO |
| grid | textSize | YES |
| grid | outlineColor | NO |
| grid | outlineWeight | NO |
| grid | gridVertical | NO |
| grid | gridVerticalColor | NO |
| grid | gridVerticalWeight | NO |
| grid | gridHorizontal | NO |
| grid | gridHorizontalColor | NO |
| grid | gridHorizontalWeight | NO |
| grid | rowPadding | NO |
| grid | imageHeight | NO |
| grid | textSize | NO |
| rowHeaders | fontColor | NO |
| rowHeaders | fontFamily | YES |
| rowHeaders | wordWrap | YES |
| rowHeaders | backColor | NO |
| rowHeaders | gridVerticalWeight | YES |
| rowHeaders | stepped | YES |
| rowHeaders | steppedLayoutIndentation | YES |
| rowHeaders | fontSize | YES |
| rowHeaders | urlIcon | YES |
What i'm doing is listing out every propertyName listed on the PBI announcement page and testing if it changes anything in PBI Desktop. It looks like this:
{
"name":"TestTheme",
"dataColors":["#0069aa","#4f8dc2","#9ab7da","#cedaec","#00c762","#fbe7a6",
"#ff544a","#f89a1c","#545451"],
"visualStyles":{
"pivotTable":{
"*":{
"rowHeaders":
[{
"fontColor":"#4f8dc2",
"fontFamily":"Segoe UI",
"wordWrap":true ,
"backColor": "#4f8dc2",
"gridVerticalWeight":3,
"stepped":true,
"steppedLayoutIndentation":25,
"fontSize":15 ,
"urlIcon":true
}]
}
}
}
}I'll keep testing to try and troubleshoot the issues I'm having. I've also opened a ticket with MS and should hear back soon.