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

Join us for an expert-led overview of the tools and concepts you'll need to become a Certified Power BI Data Analyst and pass exam PL-300. Register now.

Reply
b244293
Frequent Visitor

Power BI Custom visual for dropdown creation

Hi,

I am trying to create the dropdown control in PowerBI Custom Visual. I can create the control but the interaction is not working. Assume, the page contains multiple controls with this dropdown. if I change the selection in the dropdown, the remaining the controls should be reflected. Below the code that I have created,

 


"use strict";

import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;
import ISQExpr = powerbi.data.ISQExpr;
import ISemanticFilter = powerbi.data.ISemanticFilter;
import { interactivityBaseServiceinteractivitySelectionService } from "powerbi-visuals-utils-interactivityutils";
import appendClearCatcher = interactivityBaseService.appendClearCatcher;
import createInteractivitySelectionService = interactivitySelectionService.createInteractivitySelectionService;

import $ from "jquery";
import powerbiInterface from "../node_modules/powerbi-visuals-utils-interactivityutils/lib/index";

import { VisualSettings } from "./settings";

export class Visual implements IVisual {
    private targetHTMLElement;
    private settingsVisualSettings;
    
    constructor(optionsVisualConstructorOptions) {
        console.log('Visual constructor'options);
        this.target = options.element;
     
    }

  
    public update(optionsVisualUpdateOptions) {
       let dataChanged = (options.type == powerbi.VisualUpdateType.Data || options.type == powerbi.VisualUpdateType.All || $('.chart').length == 0);
        console.log('data changed = ' + dataChanged);
        if (dataChanged) {
            $('div, svg, select'this.target).remove();
            console.log('Removed..');
        }

        let margin = { top: 0left: 0bottom: 5right: 0 };
        let containerSize = {
            width: options.viewport.width - margin.left - margin.right,
            height: options.viewport.height - margin.top - margin.bottom
        };
        console.log('container size : ' + containerSize);

        let $container$comboBox;

        if (dataChanged) {
            $comboBox = $('<select class="tokenCombo"></select>').appendTo(this.target);
        }
        else {
            $comboBox = $('.tokenCombo');
        }

        $comboBox.css({
            'width': containerSize.width + 'px',
            'height': '45px',
        });
        if (dataChanged) {
            let dataViews = options.dataViews;
            let dataCategorical = dataViews[0].categorical;
            let category = dataCategorical.categories[0];
            let categories = category.values;

            for (let i = 0i < categories.lengthi++) {
                let $option = $('<option value="' + categories[i].toString() + '">' + categories[i].toString() + '</option>')
                    .appendTo($comboBox);
            }
        }
    }

    private static parseSettings(dataViewDataView
 
 VisualSettings {
        return <VisualSettings>VisualSettings.parse(dataView);
    }

    /**
     * This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
     * objects and properties you want to expose to the users in the property pane.
     *
     */
    public enumerateObjectInstances(optionsEnumerateVisualObjectInstancesOptions
 
 VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
        return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
    }
}
 
Also, I am trying to add the "IInteractiveBehavior" to give the interaction, but I couldn't achieve it?.  Kindly help me to proceed?

 

1 REPLY 1
v-evelk
Microsoft Employee
Microsoft Employee

Hi,

 

Please, describe yout idea more clearly.

I understood that you want to create a dropdown but it's unclear what exactly it should do and what exact kind of interaction you mean. I didn't find any events registrations in your code.

 

A custom visual works in a sandbox and there can be some restrictions so, you cannot impact on other visuals freely, only through API, but you can do whatever you want inside sandbox where you exact visual runs.

 

Kind Regards,

 

Evgenii Elkin,
Software Engineer
Microsoft Power BI Custom Visuals
pbicvsupport@microsoft.com

Helpful resources

Announcements
Join our Fabric User Panel

Join our Fabric User Panel

This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.

June 2025 Power BI Update Carousel

Power BI Monthly Update - June 2025

Check out the June 2025 Power BI update to learn about new features.

June 2025 community update carousel

Fabric Community Update - June 2025

Find out what's new and trending in the Fabric community.

Top Solution Authors
Top Kudoed Authors