Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
jkerski
Advocate I
Advocate I

actionButton Power BI JSON Theme

 
 
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
                    }
                ]
            }
        }
1 ACCEPTED SOLUTION
Anonymous
Not applicable

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"}}
			}
		]

View solution in original post

15 REPLIES 15
HaveeshPerla_1
Helper II
Helper II

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
Not applicable

Anybody got any help on this yet?

Anonymous
Not applicable

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

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

Anonymous
Not applicable

@jkerski 

 

Did you ever work out an answer to this?

I am trying to work this out atm.

 

Cheers

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
Not applicable

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
Not applicable

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"}}
			}
		]

@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
Not applicable

{"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"}}
                 }] 

	}}
	}}

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

Anonymous
Not applicable

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

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

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

No worries @jkerski 

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

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors