cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
ramakrishnans3 Frequent Visitor
Frequent Visitor

Power BI Property pane - Slider control

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.

 

 

image.pngslider_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.

1 ACCEPTED SOLUTION

Accepted Solutions
Moderator v-viig
Moderator

Re: Power BI Property pane - Slider control

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

12 REPLIES 12
Moderator v-viig
Moderator

Re: Power BI Property pane - Slider control

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

TedPattison
Advisor

Re: Power BI Property pane - Slider control

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
Advisor

Re: Power BI Property pane - Slider control

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
Advisor

Re: Power BI Property pane - Slider control

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
Advisor

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.

 

TedPattison
Advisor

Re: Power BI Property pane - Slider control

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

Highlighted
Moderator v-viig
Moderator

Re: Power BI Property pane - Slider control

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

 

image.png

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Moderator v-viig
Moderator

Re: Power BI Property Pane - Slider Control

Your replies are visible in the original topic.

 

They will be merged.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

ramakrishnans3 Frequent Visitor
Frequent Visitor

Re: Power BI Property pane - Slider control

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

 

pbicommunity.png

 

A screenshot of what you are getting will be helpful.

 

Appologies to the for the late reply.