Custom Object Drowdown

[Anonymous]

I'm creating a custom visual. I want to include a dropdown object on the format pane that I can fill with options. I know it's possible because it's in the standard KPI visual, but I can't find any documentation besides primitive types and fills. Any help on how to construct the capabilities.json and enumeration?

Thanks!

[satishr]

I want to show the list of fonts available. Is there an easy way to do it instead of typing all the fonts available for the dropdown.

[v-viig]

@PBIcustomizer There's no way to use dynamic drop-downs.

@satishr No, there isn't. You should specify all of font for the dropdown.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[satishr]

Thanks for the reply v-viig. Can you let me know how the default Font family dropdown for Title works? It lists few fonts in its drop-down and each font value is displayed in its own font. 

[v-viig]

Font Family dropdown is actually a common dropdown that can be implemented by using enumeration property (example).

After that, you should apply a proper Font Family to DOM element that you need.

Please let me know if you have any further questions.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[satishr]

@v-viig Got it. Thank you. Can you provide me the actual font family enumeration with the values? I don't want to type each font name and later test each of them for any errors. Thanks!

[v-viig]

Power BI doesn't provide any fonts for custom visuals.

You should include fonts that you want using CSS and list font in the enumeration that your visual supports.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[FR5702]

Hi @v-viig,

I read your examples and for a "classic" enumeration with string value, I understand how it's done and I successfully create one for my custom chart. But now, I'm stuck with another problem.

I try to create an enumeration with shapes like this one (from the vanilla line chart): 

 

My Datapoint's shape is defined by a SVG string and a path. So I tried to make something like this :

"shapes": {
            "displayName": "Shapes",
            "properties": {
                "MarkerShape": {
                    "displayName": "Marker shape",
                    "type": {
                        "enumeration": [
                            {
                                "displayName": "M490,474.459H0L245.009,15.541L490,474.459z",
                                "value": "M490,474.459H0L245.009,15.541L490,474.459z"
                            }
                        ]
                    }
                }
            }
        }

As my value is a string content, it works but the display name is also a string, how can I have the same result as the vanilla chart ? 

I searched for any web examples but can't find any. 

Some tips/advices/examples to share ? I'll greatly appreciate your help !

Thanks 🙂 

[v-viig]

It seems property must be called as "markerShape" and its type must be "enumeration".

This enumeration must specify the following values:

        export const circle: string = 'circle';
        export const square: string = 'square';
        export const diamond: string = 'diamond';
        export const triangle: string = 'triangle';
        export const x: string = 'x';
        export const shortDash: string = 'shortDash';
        export const longDash: string = 'longDash';
        export const plus: string = 'plus';
        export const none: string = 'none';

Not sure if it will work well.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[FR5702]

Hi @v-viig,

Thank you for your answer but I'm not sure to understand this method.

Because once you've done writing all the export variable, all you have is a string const variable exported. I don't understand how it can be transformed in an image for my dropdown parameter...

Do I have to redefine my variables ? If so, how ?

Sorry to bother you again with this, but could you be more explicit please ? 🙂

Thank again !

[v-viig]

This is what you need to define in capabilities.json:

"markerShape": {
    "displayName": "enum",
    "type": {
        "enumeration": [
            {
                "value": "circle",
                "displayName": "Circle"
            },
            {
                "value": "square",
                "displayName": "square"
            },
            {
                "value": "diamond",
                "displayName": "diamond"
            },
            {
                "value": "triangle",
                "displayName": "triangle"
            },
            {
                "value": "x",
                "displayName": "x"
            },
            {
                "value": "shortDash",
                "displayName": "shortDash"
            },
            {
                "value": "longDash",
                "displayName": "longDash"
            },
            {
                "value": "plus",
                "displayName": "plus"
            },
            {
                "value": "none",
                "displayName": "none"
            }
        ]
    }
}

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[v-chuncz-msft · Accepted solution]

@Anonymous,

You may refer to capabilities.json of Dual KPI and view its source code at https://github.com/Microsoft/powerbi-visuals-dualkpi. As for the spec, see https://github.com/Microsoft/PowerBI-visuals-tools/blob/164f80e7e269f56dbbfd8009e4d860c7c03b4f07/templates/visuals/.api/v1.6.0/schema.capabilities.json.

[Anonymous]

Awesome thanks! That's a great resource.

I'll put the code here for others to see an example.

Capabilities.json:

"displayUnits": {
                    "displayName": "Display Units",
                    "type": {
                        "enumeration": [{
                            "value": "none",
                            "displayName": "None"
                        }, {
                            "value": "thousands",
                            "displayName": "Thousands"
                        }, {
                            "value": "millions",
                            "displayName": "Millions"
                        }, {
                            "value": "billions",
                            "displayName": "Billions"
                        }]
                    }
                }

And the enumeration is the same as you would get a string.

[v-chuncz-msft]

@Anonymous,

If your problem has been resolved, please help mark answer. Your contribution is highly appreciated.

[Anonymous]

Can you put up enumeration code as well, I tried and it is not working properly

[Anonymous]

It's just like any string:

public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
    let objectName = options.objectName;
    let objectEnumeration: VisualObjectInstance[] = [];

    switch(objectName) {
        case 'kpi': 
            objectEnumeration.push({
                objectName: objectName,
                properties: {
                    displayUnits: this.kpiSettings.kpi.displayUnits
                },
                selector: null
            });
            break;
    };

    return objectEnumeration;
}

[PBIcustomizer]

Hi,

Here, the possible options are hard-coded in capabilities.json.

Is there a way to dynamically specify the list of possible values?