cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Moderator v-viig
Moderator

Re: Custom Object Drowdown

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 Member
Member

Re: Custom Object Drowdown

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

Moderator v-viig
Moderator

Re: Custom Object Drowdown

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 Regular Visitor
Regular Visitor

Re: Custom Object Drowdown

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): 

capture legend.PNG 

 

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 Smiley Happy 

Moderator v-viig
Moderator

Re: Custom Object Drowdown

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 Regular Visitor
Regular Visitor

Re: Custom Object Drowdown

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 ? Smiley Happy

 

Thank again !

Moderator v-viig
Moderator

Re: Custom Object Drowdown

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