usage of colorUtils and colorPicker

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

 

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

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