topic Re: Custom Object Drowdown in Developer

Custom Object Drowdown

Anonymous — Wed, 15 Mar 2017 21:07:18 GMT

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!

Re: Custom Object Drowdown

v-chuncz-msft — Fri, 17 Mar 2017 10:20:48 GMT

@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.

Re: Custom Object Drowdown

Anonymous — Fri, 17 Mar 2017 17:22:20 GMT

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.

Re: Custom Object Drowdown

Anonymous — Sun, 19 Mar 2017 14:07:51 GMT

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

Re: Custom Object Drowdown

v-chuncz-msft — Mon, 20 Mar 2017 10:46:43 GMT

@Anonymous,

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

Re: Custom Object Drowdown

Anonymous — Tue, 21 Mar 2017 19:36:09 GMT

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;
}

Re: Custom Object Drowdown

PBIcustomizer — Fri, 20 Oct 2017 06:44:47 GMT

Hi,

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

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

Re: Custom Object Drowdown

satishr — Fri, 22 Dec 2017 13:29:51 GMT

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.

Re: Custom Object Drowdown

v-viig — Mon, 25 Dec 2017 13:59:10 GMT

@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

Re: Custom Object Drowdown

satishr — Wed, 27 Dec 2017 06:51:58 GMT

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.

Re: Custom Object Drowdown

v-viig — Wed, 27 Dec 2017 07:08:46 GMT

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

Re: Custom Object Drowdown

satishr — Thu, 28 Dec 2017 06:09:05 GMT

@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!

Re: Custom Object Drowdown

v-viig — Thu, 28 Dec 2017 07:57:08 GMT

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

Re: Custom Object Drowdown

FR5702 — Tue, 10 Jul 2018 13:03:35 GMT

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 🙂

Re: Custom Object Drowdown

v-viig — Wed, 11 Jul 2018 07:25:15 GMT

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

Re: Custom Object Drowdown

FR5702 — Thu, 12 Jul 2018 07:53:30 GMT

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 !

Re: Custom Object Drowdown

v-viig — Fri, 13 Jul 2018 06:17:46 GMT

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