I am developing custom Visual in typescript and want to make dropdown having respected data in it.
Ok with Visual Creation, But having problem to implement Selection ID with the data append to my visual.Whenever i use selection ID with data, then my visual fails to load data in it. Please help me with this , regarding selection in custom visual.
My code in Visual.ts file is given below:-
module powerbi.extensibility.visual {
//Array to store URL
interface imageViewModel {
URL: imageDataPoint[];
};
//Declare URL as string
interface imageDataPoint {
imageUrl: string;
selectionId: ISelectionId;
};
//Data from Power BI to imageViewModel
function visualTransform(options: VisualUpdateOptions, host: IVisualHost): imageViewModel {
let dataViews = options.dataViews;
let viewModel: imageViewModel = {
URL: []
};
if (!dataViews
|| !dataViews[0]
|| !dataViews[0].categorical
|| !dataViews[0].categorical.categories
|| !dataViews[0].categorical.categories[0].values)
return viewModel;
let imageData = dataViews[0].categorical;
if (imageData) {
var imageElement = imageData.categories;
if (imageElement && imageElement.length > 0) {
for (var i = 0, catLength = imageElement.length; i < catLength; i++) {
var k = 0;
viewModel.URL.push({
imageUrl: <string>imageElement[0].values[i],
selectionId: host.createSelectionIdBuilder()
.withMeasure(imageElement[0].values[i])
.createSelectionId()
})
}
}
}
return viewModel;
}
export class Visual implements IVisual {
private image: d3.Selection<SVGElement>;
private host: IVisualHost;
private selectionManager: ISelectionManager;
static Config = {
xScalePadding: 0.1,
solidOpacity: 1,
transparentOpacity: 0.5
};
//Element initialization
constructor(options: VisualConstructorOptions) {
this.image = d3.select(options.element).append("select");
}
//Any change tu visualization executes this upadate function
public update(options: VisualUpdateOptions) {
let selectionManager = this.selectionManager;
let viewModel: imageViewModel = visualTransform(options, this.host);
var zoomFlag = 0;
let divPop = this.image.selectAll('option').data(viewModel.URL);
divPop.enter().append('option').text(function (d) { return d.imageUrl; });
divPop.exit().remove();
}
public destroy(): void {
//TODO: Perform any cleanup tasks here
}
}
}
