Dynamic Dropdown Properties in Power BI Custom Visuals

Hi NileshBhayani 

In Power BI custom visuals, the capabilities.json file is static, which means dropdowns and enumerations must usually be predefined at design time. When you define your fillPatterns property with an empty enumeration, the dropdown will not work unless you explicitly add static entries into the JSON. This limitation makes it tricky when you want the property values to be dynamic, such as generating a list of patterns or options based on the number of slices in your data. The settings pane (PatternSettings class) lets you structure groups and cards, but it still relies on the schema defined in capabilities.json. Since capabilities.json cannot change at runtime, the usual workaround is to expose a generic property in the JSON (e.g., a text or enumeration placeholder) and then dynamically build the UI in your formatting model or programmatically update it via code when data changes. In short, the dropdown works only with static JSON entries, and true dynamic properties are not directly supported—so you have to use a hybrid approach of static JSON definitions combined with dynamically injected logic in the formatting settings code.

Hi NileshBhayani,
I see you JSON code has enumeration: [] wich means no value unless you manually add them (thats why dropdown is blank).

So How to fix it?
1-You cannot make dynamic dropdowns only using capabilities.json

So instead of

"enumeration": []

you should do something like that:

patternSlice.items = [
  { value: "dots", displayName: "Dots" },
  { value: "stripes", displayName: "Stripes" }
];

Cause capabilities.json is only supports static values 

So in Final You should:

1- Import the formatting helper

import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";

2- Defining your setting card

export class PatternSettings extends formattingSettings.Card {
  name = "fillPatterns";
  displayName = "Fill Patterns";

3-Making a dropdown

  patternSlice = new formattingSettings.SimpleSlice<string>({
    name: "patternTpe",
    displayName: "Pattern Type",
    type: formattingSettings.ValueType.enumeration,
    value: "none"
  });

4-Grouping the slice

  groups = [
    new formattingSettings.Group({
      name: "patterns",
      displayName: "Patterns",
      slices: [this.patternSlice],
    }),
  ];
}

So the full PatternSettings class should be like that:

import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";

export class PatternSettings extends formattingSettings.Card {
  name = "fillPatterns";
  displayName = "Fill Patterns";

  patternSlice = new formattingSettings.SimpleSlice<string>({
    name: "patternType",
    displayName: "Pattern Type",
    type: formattingSettings.ValueType.enumeration,
    value: "none"
  });

  groups = [
    new formattingSettings.Group({
      name: "patterns",
      displayName: "Patterns",
      slices: [this.patternSlice],
    }),
  ];
}

And finally the Visual.ts add wherever you build formatting Like :

public getFormattingModel(): powerbi.visuals.FormattingModel {
  // This is just an example
  const patternList = [
    { id: "dots", name: "Dots" },
    { id: "stripes", name: "Stripes" },
    { id: "grid", name: "Grid" }
  ];

  this.patternSettings.patternSlice.items = patternList.map(p => ({
    value: p.id,
    displayName: p.name
  }));

  return this.formattingSettingsService.buildFormattingModel(this.patternSettings);
}

In that way you are telling PowerBI here is my cards and groups and slices dropitdown.

that's all, If you need any assistance just reply to me and if you find this useful tell me 🙂 .

Hi NileshBhayani,

Thank you for reaching out to Microsoft Fabric Community.

Thank you Poojara_D12 and Ahmed-Elfeel for the prompt response. 

As we haven’t heard back from you, we wanted to kindly follow up to check if the solution provided by the user's for the issue worked? or let us know if you need any further assistance.

Thanks and regards,

Anjan Kumar Chippa