Access formatting value of conditional formatting in Power BI custom visual

[DanielSH]

I'm new to Power BI custom visual development, following the Microsoft documentation (https://learn.microsoft.com/en-us/power-bi/developer/visuals/develop-power-bi-visuals), but I don't find it particularly helpful when it comes to conditional formatting.

I'm building up my visual using HTML elements, and I want to apply conditional formatting to the background color of the elements. I created a simplified example which is available here: https://github.com/DanielSzentimrey-Harrach/sampleVisual

In settings.ts I specified the instanceKind property on my color picker, so I can configure conditional formatting:

class DataPointCardSettings extends FormattingSettingsCard {
    defaultColor = new formattingSettings.ColorPicker({
        name: "defaultColor",
        displayName: "Default color",
        value: { value: "" },
        instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule
    });

    name: string = "dataPoint";
    displayName: string = "Data colors";
    slices: Array<FormattingSettingsSlice> = [this.defaultColor];
}

In my visual.ts I simply iterate through the input values, and display the category name within a span. I use the measure value to set the width of the span. (This simple logic is just for the sake of this example.):

public update(options: VisualUpdateOptions) {
    this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(VisualFormattingSettingsModel, options.dataViews[0]);
    
    const dataView: powerbi.DataView = options.dataViews[0];
    const categoricalMapping = dataView.categorical;

    this.target.innerHTML = "";

    for (let i=0; i < categoricalMapping.categories[0].values.length; i++) {
        const span: HTMLElement = document.createElement("span");
        span.appendChild(document.createTextNode(categoricalMapping.categories[0].values[i].toString()));
        span.style.width = 50 * +categoricalMapping.values[0].values[i].toString() + "px";
        span.style.backgroundColor = this.formattingSettings.dataPointCard.defaultColor.value.value;
        this.target.appendChild(span);
    }
}

I know that the second to last line (span.style.backgroundColor...) is not right, but I don't know how to access the specific result of the conditional formatting for each individual item.

In Power BI, I have the following:

• Input data

• Data mapping

• Formatting settings

Notice how I'm picking the first value from the Color column, which is "blue" for Cat3.

After this, in my visual all the spans are colored blue.

Any help would be very much appreciated.

[DanielSH]

Thanks for the reply, @v-shex-msft. I've read the referenced documentation multiple times, but unfortunately (and unlike usual Microsoft documentation), it's not particularly good.

Specifically, I find the below not to be helpful:

• The documentation only focuses on extending the SampleBarChart sample visual, instead of generally explaining how to set up conditional formatting.
• Selectors are not explained fully, even in the linked additional details. If I'm not following exactly the sample visual, then the documentation is not really helpful to figure out which selector to use and how to set it up.
• The sample code for getFormattingModel() again only works if someone follows the sample visual, but provides no additional information how to apply the generic idea to anything else.

Maybe if someone is already very familiar witht he Power BI API and the overall framework, then this is enough, but as someone new to custom visual development I didn't find the existing documentation adequate.

If you'd be able to provide some guidance how to generically apply the contents of the documentation to a different project (specifically the one linked above), that'd be super helpful. I've been doing tons of googling, looking for other sample code, but couldn't really find anything that'd help me to move forward.

[DanielSH · Accepted solution]

I just wanted to post my solution. Indeed after a few weeks of getting immersed in the API, I was able to apply the contents of the documentation to my case.

Hoping that it can be helpful to others, please see my solution here: https://stackoverflow.com/questions/78230844/access-formatting-value-of-conditional-formatting-in-po...

[v-shex-msft]

HI @DanielSH,

You can take a look the official document about add conditional formatting support on custom visual if this suitable for your requirement:

Conditional formatting of Power BI custom visuals - Power BI | Microsoft Learn

Regards,

Xiaoxin Sheng