Dynamically define dropdown list in custom Power BI visual

[DanielSH]

Does anyone know how to dynamically define the elements of a drop down formatting option for a custom Power BI visual?

I want my users to upload some photos in Advanced Edit mode, and then be able to select these photos on the formatting pane.

In the below simple, hardcoded example, I can build up the object dynamically, but then when I select from the drop-down, that value is not showing up as the selected value once the drop-down is unselected. Here is my code:

capabilities.json:

"objects": {

        "dataPoint": {

            "properties": {

                "enum1": {

                    "type": {

                        "enumeration": []

                    }

                }

            }

        }

    }

In settings.ts I've created the formatting card, but I populate it in a custom function:

defineEnum1() {

        const enum1 = new formattingSettings.ItemDropdown({

            name: "enum1",

            displayName: "Enum1",

            value: { "displayName": "Val 1", "value": 1 },

            items: [

                { "displayName": "Val 1", "value": 1 },

                { "displayName": "Val 2", "value": 2 },

                { "displayName": "Val 3", "value": 3 }

            ]

        });

        this.dataPointCard.slices.push(enum1);

    }

I then call this function in my update() function. Also tried calling it in getFormattingModel(), but the results are the same.

The result is that the value of the drop-down is always the one I define in the code. (If I leave value as empty, it'll always be null.)

I _think_ the problem is that since selecting a value from the drop-down is considered a change, the defineEnum1() function is called as a result, and overwrites the selection in the drop-down. But I couldn't figure out a way to work around this, and I also couldn't find any source code on GitHub that achieves the same.

Any advice would be much appreciated.

[DanielSH]

@dm-p I saw some entries from 2020 when you were trying to do the same thing (I believe). Did you manage to find a solution using the latest API?

[dm-p · Accepted solution]

These posts concerned replicating the features in core visuals, where properties can be assigned to selectors (e.g., the legend or measure values), known internally as 'containers.' This didn't fully work but has since been fixed. For the older formatting pane implementations, Power BI would generate them for you. It would work off the data view rather than the approach you're using (which I assume would use another persisted property).

I have an example of dynamic dropdown population in Deneb, which you can find here. It may help you confirm if you're on the right track. I guess you'd need to somehow pass in the list of values from your other property, and this could conceivably work.

Hopefully some of this is useful for you. Good luck!

Daniel

[Covid19]

I confirm, I checked in power bi, and power bi desktop, the contents of the dropdown change dynamically, the contents can be loaded from other methods of other classes, which made my life much easier.

barChartSettingsModel.ts

import powerbiVisualsApi from "powerbi-visuals-api";
import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";
class positionSelect {
   private po : powerbi.IEnumMember[];
   setPosition():powerbi.IEnumMember[]{
    this.po = [];
    let min = Math.ceil(1);
    let max = Math.floor(10);
    let nm =  Math.floor(Math.random() * (max - min + 1)) + min;
    for (let i = 1; i<= nm ; i++){
        let curPositionOptions: powerbi.IEnumMember = {value : i, displayName : i.toString()};
        this.po.push(curPositionOptions);    
    }
    return this.po
   }
}
let positionOptions : powerbi.IEnumMember[];
class LabelsCardSetting extends formattingSettings.SimpleCard {
    name: string = "labels"; // same as capabilities object name
    displayName: string = "Labels";
    public option: formattingSettings.ItemDropdown;
    public setOption():formattingSettings.ItemDropdown {
    positionOptions = new positionSelect().setPosition();
    this.option = new formattingSettings.ItemDropdown({
        name: "option", // same as capabilities property name
        displayName: "Option",
        items: positionOptions,
        value: positionOptions[0] 
    });
    return this.option
    }
    public slices: formattingSettings.Slice[] = [ this.setOption()];
}
/**
* BarChart formatting settings model class
*/
export class BarChartSettingsModel extends Model {
    labels = new LabelsCardSetting();
    cards: Card[] = [this.labels];
}

capabilities.json

"labels": {
      "properties": {
        "option": {
          "type": {
            "enumeration": []
          }
        }
      }
    },

[DanielSH]

Thank you, @dm-p, after checking your code I was able to implement the same!

Much appreciated for your help, you rock!