Search code examples
conditional-formattingpowerbi-custom-visuals

Access formatting value of conditional formatting in Power BI custom visual

I'm new to Power BI custom visual development, following the Microsoft documentation, 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
    enter image description here
  • Data mapping
    enter image description here
  • Formatting settings
    enter image description here

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.
enter image description here

Any help would be very much appreciated.

Solution

  • I wanted to provide the answer to this question in case it can be helpful for others. As it turns out, all the details were indeed in the documentation, I just needed some trial and error to figure things out.

    I've created a commit with the bare minimum changes I had to apply to my sample project for conditional formatting to work, it's accessible here:

    https://github.com/DanielSzentimrey-Harrach/sampleVisual/commit/cbda28f18f4959931afda64161615d3745dbf64e

    In a nutshell, in settings.ts I had to add both the instanceKind and the selector properties for the formatting object.

    After this, once a rule is defined, the specific color values were available in dataView.categorical.categories[0].objects[].