actionButton Power BI JSON Theme

[jkerski]

I am trying to put together a theme for the action button, but have not figured out the right syntax to set the Default State, On Hover, and On Press outline theme.  Below is what I have so far.  Anybody have an example?  Thanks.

        "actionButton": {

            "*": {

                "visualHeader": [{

                    "show": true

                }],

                "border": [{

                    "show": false

                }],

                "fill": [{

                    "show": true

                }],

                "outline": [

                    {

                        "show":true

                    }

                ]

            }

        }

[HaveeshPerla_1]

Hi @jcarville @jkerski ,

I've got a doubt related JSON themes into Power BI, please help to guide me on that.

I have two JSON themes where in power Bi we could apply it to the dashbaords one after one. But I've got a requirement where The JSON's to be imported and used simulteneously using toggle switch. Please let me know how do I achive this?

Regards,

Haveesh

[Anonymous]

Anybody got any help on this yet?

[Anonymous]

Not yet and I still haven't worked out a solution.

[Anonymous]

Thanks for getting back to me, If I find anything I will post it back in here.

[Anonymous]

@jkerski 

Did you ever work out an answer to this?

I am trying to work this out atm.

Cheers

[jkerski]

I haven't figured it out yet either. I have been looking through the custom visual docs to see if I can find the schema. I will share if I find something.

[Anonymous]

I haven't had a chance to try this yet, but the theming support for filter pane may give some clues.
$id: "on hover"
Or something similar might work.

[Anonymous · Accepted solution]

Success !!!!

"fill":
		[
			{
				"show":true
			},
			{
				"$id": "default",
				"transparency": 20,
				"fillColor": {"solid":{"color":"#111111"}}
			},
			{
				"$id": "hover",
				"transparency": 70,
				"fillColor": {"solid":{"color":"#555556"}}
			},
			{
				"$id": "selected",
				"transparency": 30,
				"fillColor": {"solid":{"color":"#ddd556"}}
			}
		]

[jcarville]

@Anonymous  could you elaborate on this please and submit a .json file that can be imported to a desktop file so I can see the structure of the file. My JSON skills aren't the best and I've been struggling to get this working even with your example. Thanks

[Anonymous]

{"name":"Theme Example of Action Buttons",
"background":"#333333",
"foreground":"#FFFFFF",
"tableAccent":"#4A8DDC",
"dataColors":["#4A8DDC", "#F3C911", "#DC5B57","#33AE81","#8D6FD1","#FE6DB6","#4C5D8A","#95C8F0"],
"visualStyles":{
	"*": {
             "*": {
                 
                 
             }
         },

"actionButton":{"*":
	{
	"border":
		[{
			"show":false
		}],
	"visualHeader":
		[{
			"show":false
		}],
	"background":
		[{
			"show":false
		}],
	"title":
		[{
			"show":false
		}],
	"outline":
		[
			{
				"show":true
			},
			{
				"$id": "default",
				"weight":0
			},
			{
				"$id": "hover",
				"weight":0
			},
			{
				"$id": "selected",
				"weight":0
			}
		],
	"fill":
		[
			{
				"show":true
			},
			{
				"$id": "default",
				"transparency": 0,
				"fillColor": {"solid":{"color":"#25476E"}}
			},
			{
				"$id": "hover",
				"transparency": 0,
				"fillColor": {"solid":{"color":"#386AA5"}}
			},
			{
				"$id": "selected",
				"transparency": 0,
				"fillColor": {"solid":{"color":"#4A8DDC"}}
			}
		],
	"icon":
		[
			{
			"show":true
			},
			{
				"$id": "default",
				"lineColor":{"solid":{"color":"#FFFFFF"}}
			},
			{
				"$id": "hover",
				"lineColor":{"solid":{"color":"#FFFFFF"}}
			},
			{
				"$id": "selected",
				"lineColor":{"solid":{"color":"#FFFFFF"}}
			}
		
		]
	}},

"*":{"*":
	{
	"outspacePane": [{
                     "backgroundColor": {"solid": {"color": "#4A8DDC"}},
                     "foregroundColor": {"solid": {"color": "#FFFFFF"}},
                     "transparency": 15,
                     "titleSize": 24,
                     "headerSize": 12,
                     "fontFamily": "Arial",
                     "border": true,
					 "width":240,
                     "borderColor": {"solid": {"color": "#374649"}}
                 }],
	"filterCard": [
                     {
                     "$id": "Applied",
                     "transparency": 0,
                     "backgroundColor": {"solid": {"color": "#25476E"}},
                     "foregroundColor": {"solid": {"color": "#FFFFFF"}},
                     "textSize": 12,
                     "border": true,
                     "borderColor": {"solid": {"color": "#ffffff"}},
                     "inputBoxColor": {"solid": {"color": "#333333"}}
                     },
                     {
                     "$id": "Available",
                     "transparency": 40,
                     "backgroundColor": {"solid": {"color": "#4A8DDC"}},
                     "foregroundColor": {"solid": {"color": "#333333"}},
                     "textSize": 12,
                     "border": true,
                     "borderColor": {"solid": {"color": "#123456"}},
                     "inputBoxColor": {"solid": {"color": "#E6E6E6"}}
                 }] 

	}}
	}}

[rks]

I wonder wheter one can set the default size as well?

[Anonymous]

@jcarville 

The above post will show you how to apply this to both Action Buttons and the Filter Pane & Cards.

Any questions then give me a shout.

[jcarville]

@Anonymousthats brilliant, thanks very much and for the quick reply

[jkerski]

Awesome. Thank you! Can finally complete the theme file on my project.

[Anonymous]

No worries @jkerski 

Put a solved flag on this thread in case someone else stumbles across this problem.