Custom Report Theme JSON Property settings in Tables/Matrix

[MWinter225]

Hi,

Has anyone had any luck controling the huge list of properties in report theme announcement? 

https://powerbi.microsoft.com/en-us/documentation/powerbi-desktop-report-themes/#report-theme-json-f...

I am testing this and just trying to turn on Vertical and Horizontal Gridlines and change their default color. If I could do this, I'm thinking that I'll be in a good place to continue on customizing other properties. 

I am fairly new to working with JSON so hopefully there is something obviously wrong with this and a simple fix.  This is my simplified JSON just trying to set custom colors and then turn on horizontal and vertical grid lines and choose the default colors for them:

{  
   "name":"TestTheme",
   "dataColors":[  
      "#0069aa",
      "#4f8dc2",
      "#9ab7da",
      "#cedaec",
      "#00c762",
      "#fbe7a6",
      "#ff544a",
      "#f89a1c",
      "#545451"
   ],
   "visualStyles":{  
      "pivotTable":{  
         "*":{  
            
            "grid":[  
               {  
                  "gridVertical":true,
                  "gridVerticalColor":"#4f8dc2",
                  "gridHorizontal":true,
                  "gridHorizontalColor":"#4f8dc2"
               }
            ]
         }
      }
   }
}

What am I doing wrong?  Any Ideas @Ashish_Mathur, @Greg_Deckler, @TomMartens, @v-yulgu-msft, @Seth_C_Bauer? Calling on the big guns! 

Thanks in advance, 

Matt

[ctappan]

To my knowledge the update to fix table and matrix properties still hasn't happened. test on other visuals if you want.

[Seth_C_Bauer]

@ctappan@MWinter225@KellyDittmar Hey all, looping in the owner of the color theme generator (Mike Carlo) to see if he can provide any insight, and maybe encorporate any new ideas you may have into the tool. @Mike_Carlo

[Mike_Carlo]

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

www.PowerBI.Tips

Report Theme Generator

[KellyDittmar]

So glad I commented here! The note that you need the * area was key for me... I started with the json from the sept release notes and then tried to modify it - the first thing it did was remove my filtering ability (instead of filters I had images of the filter-icon)... so I took out the whole * area. 

Now that I came back and learned that was required - I figured out how the responsiveness was set and turned that off - now I have my filtering back. And the fonts appear to be changing as well - I'm thrilled!! 

@Mike_Carlo - Mike - thanks for joining into this conversation. I had found this website (https://powerbi.microsoft.com/en-us/documentation/powerbi-desktop-report-themes/#report-theme-json-f...) earlier today & got confused. Perhaps you can help? I want to make sure I'm reading it correctly... Are these assumptions correct? 

1) JSON file element definitions - this area is what lists out the different "types" of visualizations that would appear on the Power BI 'canvas'.

2) "CardNames" - this is the name that you'll see in the formatting area of Power BI for each visualization

3) The "Properties within each card" - these are the options that you can set within each "card" (where card = formatting area as opposed to the object type card.)

The thing that I think would help the most is if you were to have a screenshot of the json next to a screenshot of the power bi screen with arrows that show how each area of the json corresponds to an area of the application. 

Thank you!

Kelly

[Mike_Carlo]

In answer to your three bullet points question:

1) JSON file element definitions - this area is what lists out the different "types" of visualizations that would appear on the Power BI 'canvas'.

Yes - this is currently how I understand this seciton of data.

2) "CardNames" - this is the name that you'll see in the formatting area of Power BI for each visualization

Yes - This is the section where you see the JSON name:PBI Desktop names called out.

cardTitle:Card Title means, the JSON property is cardTitle, and Card Title is what is shown in the desktop. 

Side note: also what is seen in this list is the different sections for each visual.  For example the visual will be areaChart, but the properties for the x-Axis are found in the categoryAxis: X-Axis.  Thus, there is a mix of propertie names & section names found in this list.

See sample JSON:

{
    "name": "My Theme",
    "visualStyles": {
        "barChart": {
            "*": {
                "categoryAxis": [
                    {
                        "position": "Left",
                        "fontFamily": "Georgia"
                    }
                ],
                "labels": [
                    {
                        "labelPrecision": 5
                    }
                ]
            }
        }
    }
}

3) The "Properties within each card" - these are the options that you can set within each "card" (where card = formatting area as opposed to the object type card.)

correct, but, these are not all inclusive, there are more properties that are not listed, I found a couple via trial and error, hence the Report Theme Tool.  Sorry, I was hoping to have all the properties programmed in for each visual, but there are so many, I have simply run out of time to fully develop the tool.. Still working on all properties for all visuals for the JSON creation.

[MWinter225]

@Mike_Carlo Any insight into my original question? I still can't mark this post as solved quite yet. Thank you for your posts so far. 

[ctappan]

Hi all, this chat has been helpful.

I worked on a theme generator tool last night that is a work in process but may have usefulness to some of you even before it's proven (download from https://hopeinternational.box.com/s/l31nrq14yewzpovpib23nz8igo323p5o).

It's Excel-based (not as cool as the online generator in the works from Mike), but I think is a good start. I can't confirm the visual, card, and property names and settings, but they were pulled from the documentation on the release notes sites referenced before. I also can't confirm whether or not setting properties in the file will actually change those properties in Power BI per yesterday's testing. But it takes input and turns it into JSON you can copy, paste, and import. I think it's reasonably intuitive and there are some cell comments for a bit more guidance.

Let me know if anyone tries it out and how it works/what could be improved.

Thanks,

Chris

[MWinter225]

@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. 

[ctappan]

@Mike_Carlo Thanks for the response, and even more for the generator. I imagine that it will be quite useful to a lot of people.

I feel like I understand it all conceptually but can't seem to connect the allowed card types and style properties in the documentation with the settings in the Desktoip environment. And the ones that seem clear, like pivotTable "Totals" I'm unable to change the font color with multiple approaches.

You obviously seem like you're getting the desired outcomes--do you have any working examples other than barChart and columnChart?

[MWinter225]

@KellyDittmar

In my testing, I've been able to change general properties like responsive visuals, font families, text sizes, and text colors only when it applies to all items in a report. I've also been able to do some more card-level property changes like legend position, data lables and such.  This tool helped me a lot to figure out the inner workings of a JSON theme file(https://powerbi.tips/tools/report-theme-generator-v3/), but it seems like no matter how many different ways I test it, I can't get any of the other properties to work. Right now I'm just focusing on the Matrix (pivotTable) because thats what my requirements are, so things like changing the column header background color/text color, alternating row background color, outline color, and vertical/horizontal grid switched on with a specific color would be great! I'll post if I figure it out, but it seems like it doesn't work yet.  

any thoughts @norahfox? I saw you had some insight on another json color setting related question.

[ctappan]

This might help get you going, though I'm newish to json too and haven't been able to run with it like I'd like to:

https://powerbi.tips/tools/report-theme-generator-v3/

As another start, I think maybe there should be one more layer of "*" in your json before "pivotTable":

{  
   "name":"TestTheme",
   "dataColors":[  
      "#0069aa",
      "#4f8dc2",
      "#9ab7da",
      "#cedaec",
      "#00c762",
      "#fbe7a6",
      "#ff544a",
      "#f89a1c",
      "#545451"
   ],
   "visualStyles":{  
      "*":{
		  "pivotTable":{  
			 "*":{  
				"grid":[  
				   {  
					  "gridVertical":true,
					  "gridVerticalColor":"#4f8dc2",
					  "gridHorizontal":true,
					  "gridHorizontalColor":"#4f8dc2"
				   }
				]
			 }
		  }
	   }
	}
}

[ctappan]

This might help get you going, though I'm newish to json too and haven't been able to run with it like I'd like to:

https://powerbi.tips/tools/report-theme-generator-v3/

As another start, I think maybe there should be one more layer of "*" in your json before "pivotTable":

{  
   "name":"TestTheme",
   "dataColors":[  
      "#0069aa",
      "#4f8dc2",
      "#9ab7da",
      "#cedaec",
      "#00c762",
      "#fbe7a6",
      "#ff544a",
      "#f89a1c",
      "#545451"
   ],
   "visualStyles":{  
      "*":{
		  "pivotTable":{  
			 "*":{  
				"grid":[  
				   {  
					  "gridVertical":true,
					  "gridVerticalColor":"#4f8dc2",
					  "gridHorizontal":true,
					  "gridHorizontalColor":"#4f8dc2"
				   }
				]
			 }
		  }
	   }
	}
}