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

July 7 - July 17 | Round 2 of the Power BI Dataviz World Championships. Don't miss your chance! Learn more

Reply
Anonymous
Not applicable

[Custom Visual] How to get toggle on formatting settings card?

I am trying to get a toggle switch on one of the cards in my pbiviz custom visual like this:

joop_h_1-1701166436528.png

According to the few articles I can find on the matter, I should be able to do this by using the reserved name "show"in the capabilities.json file. An example of this aproach can be found here:
PBIVIZ Single Line Toggle Format Option Tip - CloudFronts

I have not been able to accomplish the same. I have followed the exact steps layed out in the article, but to no avail. Here you can see the capabilities.json, and settings.ts files:

joop_h_2-1701166611366.png 

joop_h_3-1701166637219.png

I suspect that the correct way of doing this has been changed in one of the pbiviz API updates (I am using the latest version), but I cant find anything about this in the documentation. I have also tried looking at the opensource custom visuals provided by Microsoft, but cant find a solution to my problem there, either.

 

Can somebody help me solve this? In short, I want to know how to build a toggle switch next to the settings card, not next to the settings slice

 

2 REPLIES 2

try as below

in the settings.ts

 

/**
 * Legend Formatting Card
 */
class LegendCardSettings extends FormattingSettingsCard {
    show = new formattingSettings.ToggleSwitch({
        name: "show",
        displayName: undefined,
        value: false,
    });

    fill = new formattingSettings.ColorPicker({
        name: "fill",
        displayName: "Color",
        value: { value: "#000000" }
    });
    
    topLevelSlice = this.show;
    name: string = "legenda";
    displayName: string = "Legenda";
    slices = [this.fill];
}

 

in the capabilities.json

 

"legenda": {
			"properties": {
			  "show": {
				"type": {
				  "bool": true
				}
			  },
			  "fill": {
				"type": {
				  "fill": {
					"solid": {
					  "color": true
					}
				  }
				}
			  }
			}
		  }

 

 

RandomUsername9
New Member

Were you able to figure this out? I also can't find this anywhere. There's plenty of pictures of it in documentation, but no examples of actual code implementations anywhere...

Helpful resources

Announcements
FabCon and SQLCon Barcelona 2026

FabCon & SQLCon – Barcelona 2026

Join us in Barcelona for FabCon and SQLCon, the Fabric, Power BI, SQL, and AI community event. Save €200 with code FABCMTY200.

60 days of Data Days Carousel

Data Days 2026

Join Fabric Data Days 2026: 60 days of free live/on-demand sessions, challenges, study groups, and certification opportunities.

Power BI DataViz World Championships carousel

Power BI DataViz World Championships - June 2026

A new Power BI DataViz World Championship is coming this June! Don't miss out on submitting your entry.

Top Solution Authors