powerbipowerbi-custom-visuals

Is it possible to use fractional steps in the NumUpDown or Slider formatting component?


I'm developing a Power Bi Custom Visual, and I have a numeric setting that I'm editing with a Slider, like this:

labelBgOpacity = new formattingSettings.Slider({
        name: 'labelBgOpacity',
        displayName: "Label background opacity",
        value: 1,        
        options: {
            
            minValue: { value: 0, type: powerbi.visuals.ValidatorType.Min },
            maxValue: { value: 1, type: powerbi.visuals.ValidatorType.Max }
        }
    });

How can I set the "step" of the slider (how much each tick increments or decrements the value)?

By default it only goes in increments of 1, so for example the code above only lets you select 0 or 1. What if I wanted to go in increments of 0.1 instead? I can't find any relevant documentation on this.


Solution

  • Alternative

    Unfortunately, I don't Power BI allows for this kind of functionality by default, what I would suggest however is taking the value returned from this.formattingSettings.[your card].labelBgOpacity.value and multiplying it by the desired step anytime you use it, while indicating the step in the card:

    labelBgOpacity = new formattingSettings.Slider({
            name: 'labelBgOpacity',
            displayName: "Label background opacity (% of 100)",
            value: 1,        
            options: {
                
                minValue: { value: 0, type: powerbi.visuals.ValidatorType.Min },
                maxValue: { value: 100, type: powerbi.visuals.ValidatorType.Max }
            }
        });
    

    then in your case whenever you use the setting replace it with the multiplication:

    element.backgroundOpacity = (this.formattingSettings.[your card].labelBgOpacity.value * 0.01);
    

    Why "Step" doesn't work

    I did some digging into the and the implementation of the Power BI Visuals Formatting Model. From the looks of it, the Slicer Slider is an extension of NumUpDown which is in turn an instance of the SimpleSlice abstract class which has the following attributes:

    export abstract class SimpleSlice<T = any> extends NamedEntity implements IFormattingSettingsSlice {
        /** name should be the exact same property name from capabilities object properties list that this formatting slice is representing */
        name: string;
        value: T;
        selector?: data.Selector;
        altConstantSelector?: data.Selector;
        instanceKind?: powerbi.VisualEnumerationInstanceKinds;
        /** if true, this slice will be populated into the formatting pane */
        visible?: boolean;
    
        /** type declared in each slice sub class, No need to declare it in initializing object */
        type?: visuals.FormattingComponent;
    

    My assumption is that the selector attribute is what implements the the incrementing/decrementing functionality, but unfortunately, I can't confirm this since looking at the definition of Selector in the src/formatting-model-api.d.ts file of the Power BI Visual API code gives this:

    declare module powerbi.data {
        //intentionally blank interfaces since this is not part of the public API
        export interface Selector { }
    
        ...
    }
    

    I hope this answer has been helpful or has at least given you a starting point for finding the correct way to implement this functionality.