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); } }
