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