topic Re: [Custom Visual] How to get toggle on formatting settings card? in Developer

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

Anonymous — Tue, 28 Nov 2023 10:21:44 GMT

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

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:

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

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

RandomUsername9 — Thu, 01 Feb 2024 17:47:53 GMT

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

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

gdelpuenteCinec — Fri, 12 Apr 2024 12:31:06 GMT

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