Forum Discussion

vamsi1997's avatar
vamsi1997
New Member
1 year ago

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:

  1. The conditional formatting options are not working as expected.
  2. 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

  • Hi vamsi1997 ,

     

    Here are a few key points that often get missed:

     

    1. 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.

    2. 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.

    3. 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.

    4. 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.

    5. 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.