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?
