Power BI Custom Visual: Customize series mechanism example
As per this: https://powerbi.microsoft.com/en-us/blog/introducing-the-new-format-pane-preview/ Is there an example on how to get the customize series mechanism. In my formatting pane I am getting the options succeffully in the dropdown and in the formattingSettings object. But they are not updating. Return formattingSettings: { "columnWidth": { "container": { "displayName": "Apply settings to", "containerItems": [ { "width": { "name": "width", "displayName": "Column Width", "description": "Set the width of this column (pixels)", "value": 120, "options": { "maxValue": { "type": 1, "value": 1000 }, "minValue": { "type": 0, "value": 20 } }, "type": "NumUpDown" }, "name": "row_0", "displayName": "work_year", "slices": [ { "name": "width", "displayName": "Column Width", "description": "Set the width of this column (pixels)", "value": 120, "options": { "maxValue": { "type": 1, "value": 1000 }, "minValue": { "type": 0, "value": 20 } }, "type": "NumUpDown" } ] }, { "width": { "name": "width", "displayName": "Column Width", "description": "Set the width of this column (pixels)", "value": 120, "options": { "maxValue": { "type": 1, "value": 1000 }, "minValue": { "type": 0, "value": 20 } }, "type": "NumUpDown" }, "name": "row_1", "displayName": "job_title", "slices": [ { "name": "width", "displayName": "Column Width", "description": "Set the width of this column (pixels)", "value": 120, "options": { "maxValue": { "type": 1, "value": 1000 }, "minValue": { "type": 0, "value": 20 } }, "type": "NumUpDown" } ] }, { "width": { "name": "width", "displayName": "Column Width", "description": "Set the width of this column (pixels)", "value": 120, "options": { "maxValue": { "type": 1, "value": 1000 }, "minValue": { "type": 0, "value": 20 } }, "type": "NumUpDown" }, "name": "value_0", "displayName": "Sum of salary_in_usd", "slices": [ { "name": "width", "displayName": "Column Width", "description": "Set the width of this column (pixels)", "value": 120, "options": { "maxValue": { "type": 1, "value": 1000 }, "minValue": { "type": 0, "value": 20 } }, "type": "NumUpDown" } ] }, { "width": { "name": "width", "displayName": "Column Width", "description": "Set the width of this column (pixels)", "value": 120, "options": { "maxValue": { "type": 1, "value": 1000 }, "minValue": { "type": 0, "value": 20 } }, "type": "NumUpDown" }, "name": "value_1", "displayName": "RR", "slices": [ { "name": "width", "displayName": "Column Width", "description": "Set the width of this column (pixels)", "value": 120, "options": { "maxValue": { "type": 1, "value": 1000 }, "minValue": { "type": 0, "value": 20 } }, "type": "NumUpDown" } ] } ] }, "name": "columnWidth", "displayName": "Column Width" } } This is what I code have implemented: - capabilties.json: object: { "columnWidth": { "displayName": "Column Widths", "properties": { "width": { "displayName": "Column Width", "description": "Set Column Width.", "type": { "numeric": true } } } } } - Settings.ts: import powerbi from "powerbi-visuals-api"; import { formattingSettings } from "powerbi-visuals-utils-formattingmodel"; // Column Width Card for per-column dropdown export class ColumnWidthCardItem extends formattingSettings.SimpleCard { public width: formattingSettings.NumUpDown = new formattingSettings.NumUpDown({ name: "width", displayName: "Column Width", description: "Set the width of this column (pixels)", value: 120, options: { maxValue: { type: powerbi.visuals.ValidatorType.Max, value: 1000 }, minValue: { type: powerbi.visuals.ValidatorType.Min, value: 20 } } }); constructor(name?: string, displayName?: string, widthValue?: number) { super(); this.name = name || ""; this.displayName = displayName || name || ""; if (typeof widthValue === "number") { this.width.value = widthValue; } this.slices = [this.width]; } } class ColumnWidthCardSetting extends formattingSettings.SimpleCard { public container: formattingSettings.Container = { displayName: "Apply settings to", containerItems:[new ColumnWidthCardItem()] }; constructor() { super(); this.name = "columnWidth"; this.displayName = "Column Width"; } } // Main Settings Model /** * Main settings model for the Power BI visual formatting pane. Contains all formatting cards and option groups. */ export class VisualSettingsModel { columnWidth: ColumnWidthCardSetting; cards: Array<formattingSettings.SimpleCard | formattingSettings.CompositeCard>; constructor() { this.columnWidth = new ColumnWidthCardSetting(); this.cards = [ this.columnWidth ]; } } -visual.ts: this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualSettingsModel, dataView); // Dynamically create per-column width cards for the formatting pane using formatted columns if (dataView && dataView.matrix) { const formatted = formatMatrixForFGGrid(dataView.matrix); console.log("Formatted: ", formatted) const formattedColumns = formatted.columns || []; const fieldWidthCardItems = formattedColumns.map((col: any) => { // Use col.index for name and col.title for displayName let widthValue = 120; if (this.formattingSettings?.columnWidth?.container?.containerItems) { const match = this.formattingSettings.columnWidth.container.containerItems.find((item: any) => item.name === col.index); if (match && match.width) { widthValue = match.width.value; } } return new ColumnWidthCardItem(col.index, col.title, widthValue); }); console.log("fieldWidthCardItems: ", fieldWidthCardItems); // Set the containerItems array on the formattingSettings model if (this.formattingSettings?.columnWidth?.container) { console.log("Updating columnWidth with formatted columns."); this.formattingSettings.columnWidth.container.containerItems = []; this.formattingSettings.columnWidth.container.containerItems.push(...fieldWidthCardItems); console.log("formattingSettings: ", this.formattingSettings); } }
Dynamic Legend Color - Format Pane
Hi everyone, Today I want to reach your help to resolve a problem I face since several days. What I'm trying to do is to have a dynamic "Format Pane" allowing me to have a ColorPicker for each of my distinct categories. I've managed to do something but the problem is that every time the update function is called (so every time I change a color in the pane) it resets the colors and so it's impossible to recover the user's selection. Here are a few code snippets from my project to help you understand my logic: In the update method: export interface Legend { category: powerbi.PrimitiveValue; color: string } // let uniqueLegend = ["A", "B", "C"] uniqueLegend.forEach((legend, i) => { const color = colorPalette.getColor(legend).value DataLegend.push({ category: legend, color }) }) this.formattingSettings.populateColorSelector(DataLegend) In the formatting settings: class ColorSelectorCardSettings extends Card { name: string = "colorSelector"; displayName: string = "Data Colors"; slices = []; } export class VisualFormattingSettingsModel extends FormattingSettingsModel { // Create formatting settings model formatting cards generalSettings = new ColorSelectorCardSettings(); cards = [this.generalSettings]; populateColorSelector(dataPoints: Legend[]) { const slices: formattingSettings.ColorPicker[] = this.generalSettings.slices; dataPoints.forEach(d => { // console.log(d.category) slices.push(new formattingSettings.ColorPicker({ name:"fill", displayName: d.category.toString(), value: {value:d.color} })) }) } } What I'd like, and what I can't yet figure out how to do, is to be able to have this property pane display as many colorpickers as there are different values in my uniqueLegend array. What's more, the behavior I'd like to see is for me to be able to store these values for later use in my visual without them being reset every time the update function is called (I guess the logic isn't to make sure that the values don't reset every time the update method is called, but you get the idea, so that I can have a dynamic and functional pane format). Could someone help me out and clarify the use of dynamic pane formats depending on the data? Thanks in advance 🙂
