Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
7 years ago
Solved

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.

 

 

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.

Need Help
  • v-viig's avatar
    v-viig
    7 years ago

    Right. Please use numeric type instead. Anonymous 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

    [email protected]

12 Replies

  • v-viig's avatar
    v-viig
    Community Champion
    7 years ago

    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

    [email protected]

    • TedPattison's avatar
      TedPattison
      Microsoft Employee
      7 years ago

      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's avatar
        Anonymous
        Not applicable
        7 years ago

        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.

    • TedPattison's avatar
      TedPattison
      Microsoft Employee
      7 years ago

      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's avatar
      TedPattison
      Microsoft Employee
      7 years ago

      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.