Power BI Custom visual for dropdown creation

b244293 — Mon, 18 May 2020 13:58:08 GMT

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 { interactivityBaseService, interactivitySelectionService } 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 target: HTMLElement;

private settings: VisualSettings;

constructor(options: VisualConstructorOptions) {

console.log('Visual constructor', options);

this.target = options.element;

}

public update(options: VisualUpdateOptions) {

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: 0, left: 0, bottom: 5, right: 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 = 0; i < categories.length; i++) {

let $option = $('<option value="' + categories[i].toString() + '">' + categories[i].toString() + '</option>')

.appendTo($comboBox);

}

private static parseSettings(dataView: DataView

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(options: EnumerateVisualObjectInstancesOptions

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?

Re: Power BI Custom visual for dropdown creation

v-evelk — Tue, 19 May 2020 13:38:05 GMT

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

topic Power BI Custom visual for dropdown creation in Custom Visuals Development Discussion

Power BI Custom visual for dropdown creation

Re: Power BI Custom visual for dropdown creation