Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
paul-maessen
Resolver I
Resolver I

How to use the font-family setting of the Theme as the default value for a Font Family option

I am working on the development of a custom visual for Power Bi.

In this custom visual I want to give a user the possibility to change the font using the Format Settings.

 

However I want to use the font specified in the used Theme as the default setting for this option.

 

Can anyone explain to me if this is possible and how this can be done?

 

Thanks in advance.

 

Paul

1 ACCEPTED SOLUTION

Hi @paul-maessen,

With custom visuals and theming, provided you're matching your visual/object/property names using the patterns in the theme spec then it should work (or has done for me at least).

I'll walk you through how I've approached this in the past.

Setup

Let's say I have created a blank visual project and modfied my objects to have a single property as follows in my capabilities.json:

 

 

{
    ...
    "objects": {
        "dataPoint": {
            "displayName": "Data Points",
            "properties": {
                "fontFamily": {
                    "displayName": "Default Font Family",
                    "type": {
                        "formatting": {
                            "fontFamily": true
                        }
                    }
                }
            }
        }
    },
    ...
}

 

 

And we have the corresponding default set up in our settings.ts:

 

 

export class dataPointSettings {
    // Default font family
    public fontFamily: string = '"Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif';
}

 

 

As we expect, this should render in the properties pane with our specified default, e.g.:

dm-p_0-1594842106710.png

And I've modified my visual to display a simple measure value, so I can check the binding of my default font family, e.g.:

default_font_family.gif

This works as normal in that reverting to default falls back to the one defined in our settings.

Applying Theming

Now, to make this work for theming, you can try this generically, or specifically to your visual.

For our example, I want to set this default in my theme to Symbol (for some reason)

I'll demo with a bare-minimum theme file definition so your mileage may vary depending on what else you're attempting to style. In some cases you may need to be more specific.

As long as the selector matches your property name, you can start with the simple approach and then refine as follows:

1 - Generic Property Name Matching

You can use wildcard selectors all the way down and then specify your property name, e.g.:

 

 

{
    "name": "My Theme",
    "visualStyles": {
        "*": {
            "*": {
                "*": [
                    {
                        "fontFamily": "Symbol"
                    }
                ]
            }
        }
    }
}

 

 

2 - Matching on object

If the above is too greedy, you can try to be more specific with the object name one-level up from the property, e.g.:

 

 

{
    "name": "My Theme",
    "visualStyles": {
        "*": {
            "*": {
                "dataPoint": [
                    {
                        "fontFamily": "Symbol"
                    }
                ]
            }
        }
    }
}

 

 

3 - Matching on Visual guid

You can sub-in your visual's guid (from pbiviz.json) into the visualName level of the theme's visualStyles property to only enforce this for your visual. In my case, my guid is blankVisual6415C46C410C42F7A868D4E811ACE5C9.

 

 

{
    "name": "My Theme",
    "visualStyles": {
        "blankVisual6415C46C410C42F7A868D4E811ACE5C9": {
            "*": {
                "dataPoint": [
                    {
                        "fontFamily": "Symbol"
                    }
                ]
            }
        }
    }
}

 

 

Or, if you want to apply to all properties named fontFamily within your visual specifically, you can replace the cardName selector with a wildcard, e.g.:

 

 

{
    "name": "My Theme",
    "visualStyles": {
        "blankVisual6415C46C410C42F7A868D4E811ACE5C9": {
            "*": {
                "*": [
                    {
                        "fontFamily": "Symbol"
                    }
                ]
            }
        }
    }
}

 

 

For this option, you will need to package your visual for the theming to apply correctly, as it doesn't apply to the developer visual when debugging.


Whatever your approach, for the above example, the specified font is now applied by default and will be selected when reverted to default, e.g.:

default_font_family_theme.gif

 


I don't think this has ever been documented, and I figured it out here from some time back using this section of the theming guide. I also took a stab at documenting this for one of my visuals if you want to see more examples of property values, although this is partially complete.

Hopefully this should help you along. Good luck!

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




View solution in original post

3 REPLIES 3
paul-maessen
Resolver I
Resolver I

After doing some more research I found the getMeasurementProperties method in the formatting-utils. (https://docs.microsoft.com/en-us/power-bi/developer/visuals/utils-formatting)

 

My idea was now to get the TextProperties from the options.element in the VisualUpdateOptions.

I assume that this element has the properties from the Theme.

 

So I only need to set the fontFamily-property from the result of this method to my default in my settings.... Is there a way to do this?

 

Thanks in advance

Hi @paul-maessen,

With custom visuals and theming, provided you're matching your visual/object/property names using the patterns in the theme spec then it should work (or has done for me at least).

I'll walk you through how I've approached this in the past.

Setup

Let's say I have created a blank visual project and modfied my objects to have a single property as follows in my capabilities.json:

 

 

{
    ...
    "objects": {
        "dataPoint": {
            "displayName": "Data Points",
            "properties": {
                "fontFamily": {
                    "displayName": "Default Font Family",
                    "type": {
                        "formatting": {
                            "fontFamily": true
                        }
                    }
                }
            }
        }
    },
    ...
}

 

 

And we have the corresponding default set up in our settings.ts:

 

 

export class dataPointSettings {
    // Default font family
    public fontFamily: string = '"Segoe UI", wf_segoe-ui_normal, helvetica, arial, sans-serif';
}

 

 

As we expect, this should render in the properties pane with our specified default, e.g.:

dm-p_0-1594842106710.png

And I've modified my visual to display a simple measure value, so I can check the binding of my default font family, e.g.:

default_font_family.gif

This works as normal in that reverting to default falls back to the one defined in our settings.

Applying Theming

Now, to make this work for theming, you can try this generically, or specifically to your visual.

For our example, I want to set this default in my theme to Symbol (for some reason)

I'll demo with a bare-minimum theme file definition so your mileage may vary depending on what else you're attempting to style. In some cases you may need to be more specific.

As long as the selector matches your property name, you can start with the simple approach and then refine as follows:

1 - Generic Property Name Matching

You can use wildcard selectors all the way down and then specify your property name, e.g.:

 

 

{
    "name": "My Theme",
    "visualStyles": {
        "*": {
            "*": {
                "*": [
                    {
                        "fontFamily": "Symbol"
                    }
                ]
            }
        }
    }
}

 

 

2 - Matching on object

If the above is too greedy, you can try to be more specific with the object name one-level up from the property, e.g.:

 

 

{
    "name": "My Theme",
    "visualStyles": {
        "*": {
            "*": {
                "dataPoint": [
                    {
                        "fontFamily": "Symbol"
                    }
                ]
            }
        }
    }
}

 

 

3 - Matching on Visual guid

You can sub-in your visual's guid (from pbiviz.json) into the visualName level of the theme's visualStyles property to only enforce this for your visual. In my case, my guid is blankVisual6415C46C410C42F7A868D4E811ACE5C9.

 

 

{
    "name": "My Theme",
    "visualStyles": {
        "blankVisual6415C46C410C42F7A868D4E811ACE5C9": {
            "*": {
                "dataPoint": [
                    {
                        "fontFamily": "Symbol"
                    }
                ]
            }
        }
    }
}

 

 

Or, if you want to apply to all properties named fontFamily within your visual specifically, you can replace the cardName selector with a wildcard, e.g.:

 

 

{
    "name": "My Theme",
    "visualStyles": {
        "blankVisual6415C46C410C42F7A868D4E811ACE5C9": {
            "*": {
                "*": [
                    {
                        "fontFamily": "Symbol"
                    }
                ]
            }
        }
    }
}

 

 

For this option, you will need to package your visual for the theming to apply correctly, as it doesn't apply to the developer visual when debugging.


Whatever your approach, for the above example, the specified font is now applied by default and will be selected when reverted to default, e.g.:

default_font_family_theme.gif

 


I don't think this has ever been documented, and I figured it out here from some time back using this section of the theming guide. I also took a stab at documenting this for one of my visuals if you want to see more examples of property values, although this is partially complete.

Hopefully this should help you along. Good luck!

Daniel





Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Hi @dm-p 

 

Thank you for your clear answer. 

However this only works when the right settings are in the Theme that is used.

Your answer at least points me to some things I can test again.  I have done some testing already but it kept failing with the default Power Bi themes. I know know that this is probably because the level-name one level-up might be pretty excotic in my tests.

 

I will do some testing and see if your solution can be used in my visual so i can mark your answer as the solution.

 

Thanks again.

 

Paul

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.

Top Solution Authors