Forum Discussion

lieselot_ve's avatar
lieselot_ve
Frequent Visitor
4 months ago

formatting pane - dynamic dropdown - selected value

I try to create a custom visual which behaves likes a matrix and where we can add 1 or more measures in the Values part of the visual.  
In the format visual, I was able to add a Specific Column card with a dropdown which contains the measures placed in the Values part of my visual.

 

settings.ts

class SpecificColumnSettings extends FormattingSettingsCard {
   
    series = new formattingSettings.ItemDropdown({
        name: "series",
        displayName: "Series",
        items: [], // will be populated dynamically in visual.ts
        value: { value: "", displayName: "" }
        //value: undefined
       
    });
 
but how can we get the selected value of this dropdown in visual.ts (update())?  No matter what I try, it does not seem to remember the value selected.  Does anyone have a working example for this?
 
Kind regards,
 
Lieselot

2 Replies

  • lieselot_ve Hi!

    To read the selected value from a dynamic ItemDropdown in the format pane, make sure you first populate the formatting model in update() and then access the property from the settings model.

    Example:

     

    this.formattingSettings =
    this.formattingSettingsService.populateFormattingSettingsModel(
    VisualSettingsModel,
    options.dataViews?.[0]
    );

    const selectedSeries =
    this.formattingSettings.specificColumn.series.value?.value;
     

    If the dropdown keeps “forgetting” the selection, the usual causes are:

    • object/property names don’t exactly match capabilities.json
    • dropdown items are rebuilt without preserving the previous value
    • the selected value isn’t a stable key (use something like queryName, not display text)

    Using a stable internal value and restoring it when repopulating the items typically fixes the issue.

    BBF


    💡 Did I answer your question? Mark my post as a solution!

    👍 Kudos are appreciated

    🔥 Proud to be a Super User!

  • lieselot_ve's avatar
    lieselot_ve
    Frequent Visitor

    a working (small) example would be a great help because this const selectedSeries =
    this.formattingSettings.specificColumn.series.value?.value; always return undefined in our case