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

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

Reply
Balogh1Bence
Helper II
Helper II

usage of colorUtils and colorPicker

There is a kind of colorPicker for the capabilities, but how should I properly use it? I mean in the capabilities it looks like an object, how can I use it to prevent running into errors?

84748785-6108d200-afb9-11ea-9724-4797e441d8e3.png

2 REPLIES 2
dm-p
Super User
Super User

Hi @Balogh1Bence,

It's not clear what you're specifically looking to do from your question, but I'll take a general approach and hopefully this will provide you with some clarity.

Although constructed as an object in capabilities, the returned value when it's enumerated by Power BI is a string representing the hex value of the selected colour, so your corresponding class property just needs to be a string.

Note that class properties for settings need a default value when they are instantiated, otherwise they won't appear in the properties pane.

If we look at the default code when we create a new visual, it already has one of these wired up:

"objects": {
    "dataPoint": {
        "displayName": "Data colors",
        "properties": {
            "defaultColor": {
                "displayName": "Default color",
                "type": {
                    "fill": {
                        "solid": {
                            "color": true
                        }
                    }
                }
            },
         ...

This is defined in the dataPointSettings class (in settings.ts) as follows:

public defaultColor: string = "";

This won't result in a valid colour selection, so you can either add a suitable default that the visual will fall-back to if the user reverts the settings to default, e.g.:

public defaultColor: string = "#000000";

 

image.png

If we look at the visual's update method, this line will enumerate the settings and update the settings property on your visual class with the latest values:

 

this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);

 

We can grab the hex value of this colour from this.settings.dataPoint.defaultColor, e.g.:

        ...
        this.target.innerHTML = `<p style="color: ${
                this.settings.dataPoint.defaultColor
            }">The selected color is '${
                this.settings.dataPoint.defaultColor
            }'`;
        ...

This will display the colour code and style the paragraph with its value, e.g.:

colour_binding.gif

Hopefully this answers what you need to know - if not, please provide some further clarification of what you're looking to do, as well as any sample code you cane and we can take a further look at it.

Regards,

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)




Quiet helpful, could you tell me why would you get the defaultColor if the returned value of the setting is a string? 

 

Also there are two powerbi classes, ColorUtils and ColorHelper, yet I dont know whats their point.

Helpful resources

Announcements
September Hackathon Carousel

Microsoft Fabric & AI Learning Hackathon

Learn from experts, get hands-on experience, and win awesome prizes.

Top Solution Authors