Hi, I've configured my settings.ts file as well. I'm able to get properties panel but the color change change is not reflected in UI.
UI Looks like this:
here is my code for settings.ts file
"use strict";
import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";
class LabelsCardSetting extends formattingSettings.SimpleCard {
name: string = "labels"; // same as capabilities object name
displayName: string = "Labels";
// selector is not needed and has been removed
public fontFamily: formattingSettings.FontPicker = new formattingSettings.FontPicker({
name: "fontFamily", // same as capabilities property name
value: "Arial, sans-serif"
});
public fontSize: formattingSettings.NumUpDown = new formattingSettings.NumUpDown({
name: "fontSize", // same as capabilities property name
value: 11
});
public bold: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
name: "bold", // same as capabilities property name
value: false
});
public italic: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
name: "italic", // same as capabilities property name
value: false
});
public underline: formattingSettings.ToggleSwitch = new formattingSettings.ToggleSwitch({
name: "underline", // same as capabilities property name
value: false
});
public font: formattingSettings.FontControl = new formattingSettings.FontControl({
name: "font", // must be unique within the same object
displayName: "Font",
fontFamily: this.fontFamily,
fontSize: this.fontSize,
bold: this.bold, //optional
italic: this.italic, //optional
underline: this.underline //optional
});
public slices: formattingSettings.Slice[] = [this.font];
}
// Slice color settings
class SlicesColorCardSetting extends formattingSettings.SimpleCard {
name: string = "sliceColors";
displayName: string = "Slice Colors";
public dynamicSliceColors: formattingSettings.ColorPicker[] = [];
private defaultColors: string[] = ['#AEDFF7', '#73C6F3', '#3498DB', '#2E86C1', '#1B4F72', '#154360'];
// Dynamically generate ColorPicker settings based on the number of slices
public updateSliceColors(sliceNames: string[], currentColors: Record<string, string> = {}) {
// Create a lookup for existing colors
const existingColors: Record<string, formattingSettings.ColorPicker> = {};
for (const colorPicker of this.dynamicSliceColors) {
existingColors[colorPicker.name] = {
name: colorPicker.name,
value: colorPicker.value,
};
}
// Map slice names to dynamic slice colors
const updatedSliceColors: formattingSettings.ColorPicker[] = [];
for (let i = 0; i < sliceNames.length; i++) {
const sliceName = sliceNames[i];
const colorName = `sliceColor${i + 1}`;
const defaultColor = this.defaultColors[i % this.defaultColors.length];
updatedSliceColors.push(
new formattingSettings.ColorPicker({
name: colorName,
displayName: `${sliceName} Color`,
value: typeof currentColors[colorName] === 'string' ? { value: currentColors[colorName] } : currentColors[colorName] || existingColors[colorName]?.value || defaultColor,
})
);
}
this.dynamicSliceColors = updatedSliceColors;
this.slices = this.dynamicSliceColors;
console.log("Updated Slice Colors:", this.dynamicSliceColors);
console.log("Retained Colors:", existingColors);
console.log("Dynamic Slice Colors After Update:", this.dynamicSliceColors);
}
public slices: formattingSettings.Slice[] = [];
}
export class VisualFormattingSettingsModel extends formattingSettings.Model {
updateSliceColors(sliceNames: string[]) {
throw new Error("Method not implemented.");
}
public labels: LabelsCardSetting = new LabelsCardSetting();
public sliceColors: SlicesColorCardSetting = new SlicesColorCardSetting();
public cards: formattingSettings.SimpleCard[] = [this.labels, this.sliceColors];
static parse: any;
// Bind font properties to DataLabels objects
public bindToDataLabels(dataLabels: any) {
dataLabels.fontFamily = this.labels.fontFamily.value;
dataLabels.fontSize = this.labels.fontSize.value;
dataLabels.bold = this.labels.bold.value;
dataLabels.italic = this.labels.italic.value;
dataLabels.underline = this.labels.underline.value;
console.log(dataLabels);
}
// }
public bindToSliceColors(sliceNames: string[], sliceColors: any[]) {
const currentColors = sliceNames.reduce((acc, sliceName, index) => {
acc[`sliceColor${index + 1}`] = sliceColors[index];
return acc;
}, {} as Record<string, string>);
this.sliceColors.updateSliceColors(sliceNames, currentColors);
this.sliceColors.dynamicSliceColors.forEach((colorPicker, index) => {
sliceColors[index] = colorPicker.value.value; // Assuming colorPicker.value is an object with a 'value' property
});
// public getSelectedSliceColors(): any[] {
// return this.sliceColors.dynamicSliceColors.map(colorPicker => colorPicker.value);
// }
}
}
Helpful resources
Join our Fabric User Panel
This is your chance to engage directly with the engineering team behind Fabric and Power BI. Share your experiences and shape the future.
Power BI Monthly Update - June 2025
Check out the June 2025 Power BI update to learn about new features.
Fabric Community Update - June 2025
Find out what's new and trending in the Fabric community.
