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

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

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
July 2024 Power BI Update

Power BI Monthly Update - July 2024

Check out the July 2024 Power BI update to learn about new features.

PBI_Carousel_NL_June

Fabric Community Update - June 2024

Get the latest Fabric updates from Build 2024, key Skills Challenge voucher deadlines, top blogs, forum posts, and product ideas.

Top Solution Authors