The ultimate Fabric, Power BI, SQL, and AI community-led learning event. Save €200 with code FABCOMM.
Get registeredEnhance your career with this limited time 50% discount on Fabric and Power BI exams. Ends September 15. Request your voucher.
I am trying to create custom Table visual. While adding the conditional formating option I am getting error. How do I rectify it. Is there sample code available for custom Table visual. I checked the documentation but not getting much info.
TS2322: Type '{ slices: undefined[]; }' is not assignable to type 'FormattingGroup | FormattingGroupPlaceholder'.
Type '{ slices: undefined[]; }' is missing the following properties from type 'FormattingGroup': uid, displayName
public getFormattingModel(): powerbi.visuals.FormattingModel {
const formattingModel: powerbi.visuals.FormattingModel = {
cards: []
};
const formattingCard: powerbi.visuals.FormattingCard = {
displayName: "Cell Elements",
uid: "cellElementsCard",
description: "Customize the cell elements",
groups: [
{
slices: []
}
]
};
const tableData = this.dataView.table.rows;
const columns = this.dataView.table.columns;
tableData.forEach((row, rowIndex) => {
row.forEach((cell, cellIndex) => {
const columnName = columns[cellIndex].displayName;
const colorSetting = this.tableSettings.cellElements.backgroundColor;
const backgroundColorSlice: powerbi.visuals.FormattingSlice = {
displayName: `${columnName} Background Color`,
uid: `backgroundColor_${rowIndex}_${cellIndex}`,
control: {
type: powerbi.visuals.FormattingComponent.ColorPicker,
properties: {
descriptor: {
objectName: "cellElements",
propertyName: "backgroundColor",
selector: dataViewWildcard.createDataViewWildcardSelector(dataViewWildcard.DataViewWildcardMatchingOption.InstancesAndTotals), // Corrected option
altConstantValueSelector: null,
instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule
},
value: { value: colorSetting }
}
}
};
const fontColorSlice: powerbi.visuals.FormattingSlice = {
displayName: `${columnName} Font Color`,
uid: `fontColor_${rowIndex}_${cellIndex}`,
control: {
type: powerbi.visuals.FormattingComponent.ColorPicker,
properties: {
descriptor: {
objectName: "cellElements",
propertyName: "fontColor",
selector: dataViewWildcard.createDataViewWildcardSelector(dataViewWildcard.DataViewWildcardMatchingOption.InstancesAndTotals), // Corrected option
altConstantValueSelector: null,
instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule
},
value: { value: this.tableSettings.cellElements.fontColor }
}
}
};
formattingCard.groups[0].slices.push(backgroundColorSlice, fontColorSlice);
});
});
formattingModel.cards.push(formattingCard);
return formattingModel;
}