Power BI Property pane - Slider control

[Anonymous]

Hi Team,

I am a Power BI custom visual developer.

I am trying to create a slider control for one of my property with a range 0% to 50% like the X-Axis > Maximum Size property of Clustered bar chart.

slider_control

I understand that only certain pre-defined technical name of the properties give us slider control eg. transparency.

Reference

I want to know

1. What other technical names would get us the same slider control
2. Is there any option to specify the control type (slider, rolodex, textbox, etc)
3. Is there any documentation where this information could be found
4. How to specify the range of a slider (15% to 50%)
5. How to specify the unit of a slider (%, pt, k, etc)

I am stuck in a scenario where I cant create slider for my desired field because transparency is not meaningfull for the property 's technical name and also I am using that name for a different property in the same section.

Thanks in Advance.

[v-viig]

As far as I know, there's no good way to specify min and max values and use the good property name.

Our suggestion is to use numberic type of property and check what user's input is.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Anonymous]

Hi @v-viig ,

Are you trying to say that I should give up trying to use a slider as there are no good defined way as of now? And use numeric box?

Also if posible could you answer my questions in the numbered bullet list and help me in getting a clarity?

Appreciate your reply.

[v-viig · Accepted solution]

Right. Please use numeric type instead. @Ranin is tracking a feature request to support Slider.

1. Not sure because it is not documented
2. You can specify the data type instead
3. I don't think so
4. Ted gave a very good example with numberRange
5. I don't think because native visual do not provide such a feature 

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Anonymous]

@v-viig  and @TedPattison thanks for the replies and help.

[TedPattison]

I have tried replying to this post with an answer. But my reply does not show up. Can the moderator assist me please.

[v-viig]

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

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[TedPattison]

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.

[v-viig]

Your replies are visible in the original topic.

They will be merged.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[TedPattison]

Yes, this technique 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.

[TedPattison]

Yes, this technique 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.

[TedPattison]

Yes, this technique 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.

[Anonymous]

Hi @TedPattison ,

Thanks for the reply. I tried with your approach and I was able to only get a increment/decrement box and not a slider.

I have attached a screenshot of what I am getting below

A screenshot of what you are getting will be helpful.

Appologies to the for the late reply.