Forum Discussion
Power bi Conditional formatting in visual pane issue
Hi All,
I recently migrated from enumerateObjectInstances to getFormattingModel() for defining custom formatting options in my Power BI custom visual. Everything is working fine, but I am facing an issue with conditional formatting:
- The conditional formatting options are not working as expected.
- The "fx" option (used for dynamic/conditional formatting) is not visible in the formatting panel where it should be.
Thanks in advance
Below is the relevant part of my code:
public getFormattingModel(): powerbi.visuals.FormattingModel {
// Ensure settings are initialized or use default settings
this.visualSettings = this.visualSettings || <VisualSettings>VisualSettings.getDefault();
// Create formatting cards based on the visualSettingsConfig
const cards: powerbi.visuals.FormattingCard[] = Object.keys(visualSettingsConfig).map((objectName) => {
const config = visualSettingsConfig[objectName];
const slices: any[] = Object.keys(config.properties).map((prop) => {
const controlType = this.getControlType(prop);
const isColorPicker = controlType === powerbi.visuals.FormattingComponent.ColorPicker;
// Fetch propertyInstanceKind for conditional formatting
const propertyInstanceKind = config.properties[prop].propertyInstanceKind;
const descriptor = {
objectName,
propertyName: prop,
...(propertyInstanceKind && { propertyInstanceKind }), // Include propertyInstanceKind if applicable
};
const control: any = {
type: controlType,
properties: {
descriptor,
value: isColorPicker
? { value: this.visualSettings[objectName][prop] }
: this.visualSettings[objectName][prop],
},
};
return {
uid: `${objectName}_${prop}_slice`,
displayName: config.properties[prop].displayName,
control,
};
});
return {
displayName: config.displayName || objectName.charAt(0).toUpperCase() + objectName.slice(1),
uid: `${objectName}_card`,
groups: [
{
displayName: "",
uid: `${objectName}_single_group`,
slices,
},
],
};
}).filter((card) => card !== null);
return { cards };
}
// Helper method to get the control type based on property type
private getControlType(propertyName: string): powerbi.visuals.FormattingComponent {
if (/\b(color|fill|solid|plan|gridfill)\b/i.test(propertyName)) {
return powerbi.visuals.FormattingComponent.ColorPicker;
} else if (/show|toggle/i.test(propertyName)) {
return powerbi.visuals.FormattingComponent.ToggleSwitch;
} else if (/size|width|height|fontsize|padding/i.test(propertyName)) {
return powerbi.visuals.FormattingComponent.NumUpDown;
} else if (/direction|secdirection/i.test(propertyName)) {
return powerbi.visuals.FormattingComponent.ConditionalFormattingControl; // Trying to enable conditional formatting
} else {
return powerbi.visuals.FormattingComponent.TextInput;
}
}
2 Replies
- AnonymousNot applicable
Hi vamsi1997 ,
What type of custom visual did you create?
Conditional formatting is not supported if the visual is table and matrix based.Conditional formatting of Power BI custom visuals - Power BI | Microsoft Learn
Best Regards,
Dengliang Li
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly. - rohit1991Super User
Hi vamsi1997 ,
Here are a few key points that often get missed:
-
Property Definition: Make sure your property uses propertyInstanceKind: ConditionalFormatting in the formatting model, not just in the legacy enumerateObjectInstances. If you’re only exposing the property in the old enumeration, it won’t show up with fx in the visual pane.
-
Control Type Support: The allowConditionalFormatting: true flag must be set on your control (like ColorPicker), but also, conditional formatting is only available for supported types (like color, text, numeric, etc). Some types just aren’t eligible.
-
Supported Visual Types: Conditional formatting isn’t available for every custom visual. If your visual is table or matrix based, you’re good, but for some highly custom visuals, Power BI just won’t offer the fx button at all.
-
Power BI Desktop Version: Some features only show up in recent versions of Power BI Desktop. Double-check you’re using the latest version, sometimes that’s all it takes.
-
Cache & Rebuild: If you’re sure all the code is correct and it’s still not showing up, try clearing the custom visuals cache, or close and reopen Power BI Desktop. In rare cases, you might need to rebuild or redeploy your visual for new properties to be recognized.
If your property and control are correct, but the fx button still doesn’t appear, try to add your property using the new getFormattingModel API and double-check the type.
-