Power BI Property pane - Slider control

For some reason I cannot reply to the post titled Power BI Property Pane - Slider Control. However, I have an answer so I am trying to reply by creating a new topic. 

Yes, the technique for creating a custom visual property with a slider control isn't really documented. I discovered it by reverse engineering examples created by others.

Begin by creating an integer property objects section of capabities.json.

    "objects": {
        "barchartProperties": {
            "displayName": "Bar Chart Properties",
            "properties": {
                "xAxisFontSize": {
                    "displayName": "X Axis Font Size",
                    "type": { "integer": true }
                }
            }
        }
    }

In settings.ts, define the VisualSettings class with the property based on the number type.

module powerbi.extensibility.visual {

  import DataViewObjectsParser = powerbi.extensibility.utils.dataview.DataViewObjectsParser;

  export class VisualSettings extends DataViewObjectsParser {
    public barchartProperties: BarchartProperties = new BarchartProperties();
  }

  export class BarchartProperties {
    xAxisFontSize: number = 10;
  }

}

Finally, extend the enumerateObjectInstances method in the visual class to add a range of valid values using the validValues property of the visual as shown in the following code.

public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {

    var visualObjects: VisualObjectInstanceEnumerationObject = <VisualObjectInstanceEnumerationObject>VisualSettings.enumerateObjectInstances(this.settings, options);         

    visualObjects.instances[0].validValues = {
        xAxisFontSize: { numberRange: { min: 10, max: 36 } }
    };         

    return visualObjects;          
}

This allows you to create a slider and explicitly set the min and max values.

Your replies are shown in the UI. It looks like some kind of temporary issue.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]