cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
New Member

Custom Visual : Properties (Color picker)

Hi all, 

 

I have created a small and simple custom visual using pbiviz.

It all works great, but I'm having a minor issue with the custom formatting options I added.

So, one possibility I added is to change the two colors that are used in the visual, "Color OK", "Color NOK".

Almost everything works:

1) they are shown in the formatting pane and I can change them

2) the default colors that I set in the settings.ts file are used

 

However, one weird thing I see is the following.

In the formatting pane, as default they are always shown as grey (see picture I attached).

Although the default colors are green and red and these are the ones that are actually shown in the visual.

 

PBI property pane

 

Part of the capabilities.json code:

    "objects":
    {
        "colors":{
            "displayName": "Data Colors",
            "properties": {
                "colorOK": {
                    "displayName": "Color OK",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                },
                "colorNOK": {
                    "displayName": "Color NOK",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                }
            }
        },

Part of the settings.ts code where defaults were set:

    export class VisualSettings extends DataViewObjectsParser {
      public colors: ColorSettings = new ColorSettings();
    }

     export class ColorSettings {
       // Default colors
       public colorOK : string = "green";
       public colorNOK : string = "red";
     }

Part of the visual.ts code:

 
        public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
            const settings: VisualSettings = this.visualSettings || VisualSettings.getDefault() as VisualSettings;
            return VisualSettings.enumerateObjectInstances(settings, options);
        }
 

 

8 REPLIES 8
Frequent Visitor

Hi. I am facing the same issue. Did you manage to solve it?

Hi @Jorhern ,

 

I have spent some hours trying to find a solution.

But I'm sad to say I wasn't able to solve it.

 

If you find something :), you can always let me know.

Hi @MichielVA , @Jorhern ,

 

If you add the following line of code to the update method, it will set the visual this.ettings variable to either the default colors or the values from the formatting pane.

this.visualSettings = VisualSettings.parse(dataView) as VisualSettings

And in the rest of the code you can refer to this.settings to get the configured colors.

 

-JP

Frequent Visitor

Hi @jppp-.

 

I have that method in my code:

 

    private static parseSettings(dataView: DataView): VisualSettings {
        return VisualSettings.parse(dataView) as VisualSettings;
    }

Also the enumerate object instances method:

    public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] {
        let objectName: string = options.objectName;
        let objectEnumeration: VisualObjectInstance[] = [];
        switch( objectName ) {
            case 'colorPicker':
                objectEnumeration.push({
                    objectName: objectName,
                    properties: {
                        "firstColor":{
                            "type": {
                                "fill": {
                                    "solid": {
                                        "color": this.viewModel.minColor
                                    }
                                }
                            }
                        },
                        "secondColor":{
                            "type": {
                                "fill": {
                                    "solid": {
                                        "color": this.viewModel.midColor
                                    }
                                }
                            }
                        },
                        "thirdColor":{
                            "type": {
                                "fill": {
                                    "solid": {
                                        "color": this.viewModel.maxColor
                                    }
                                }
                            }
                        }
                    },
                    selector: null
                });
                break;
        };
    
        return objectEnumeration;
    }

And at the beginnning of my visualTransform method (takes VisualUpdateOptions and updates the viewmodel):

 

    public visualTransform(options: VisualUpdateOptions){

        this.viewModel = {
            dataPoints: [],
            dataIndex: {},
            dataMin: 0,
            dataMax: 1,
            highlighted: true,
            categoryName: '',
            minColor: this.settings.colorPicker.firstColor,
            midColor: this.settings.colorPicker.secondColor,
            maxColor: this.settings.colorPicker.thirdColor
        };

more code

And my objects element in capabilites json:

 

 "objects": {
        "colorPicker": {
            "displayName": "Gradient",
            "properties": {
                "firstColor":{
                    "displayName" : "Min value",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                },
                "secondColor":{
                    "displayName" : "Mid value",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                },
                "thirdColor":{
                    "displayName" : "Max value",
                    "type": {
                        "fill": {
                            "solid": {
                                "color": true
                            }
                        }
                    }
                }
            }
        }
    }

Basically, I can use the three color pickers and the visual gets updated with the selected color... but the app updates the color to gray in the selector (it does display the selected color for a bit amount of time, and the switches back to gray).

 

My version of API is 2.6.0.

 

Thanks for your help

Hi @Jorhern,

 

Do you call the parseSettings also in the update method?

 

The enumerateObjectInstances is only called when the formatting pane is used and not by the main code of the visual.

And the configured state of the formatting pane is being stored in the options.dataView object that is a parameter of the update method. That is why you have to parse the settings from the dataView in the update method as each change in the formatting pane will trigger that method.

 

-JP

Frequent Visitor

Hi @jppp , 

 

firstly thanks for your prompt response 🙂

 

Here goes my update method. Second line is the call to visual.parseSettings.

 

    public update(options: VisualUpdateOptions) {
        let self = this;
        self.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);        
        self.visualTransform(options);
        self.svg.selectAll('path').each(self.updateHandler());
        self.fitSVGtoViewPort(options.viewport.width, options.viewport.height);
    }

Could it be related with the fact that selector is null when declaring the objectEnumeration?

 

Regards

Jorge

Hi @Jorhern ,

 

Looks like the colors are 'static' and not related to any data, so you can keep you enumerateObjectInstances method pretty simple like this:

public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
    const settings: VisualSettings = this.visualSettings || VisualSettings.getDefault() as VisualSettings;
    return VisualSettings.enumerateObjectInstances(settings, options);
}

And define in your VisualSettings the default colors of your three colors. Probably you have to set them in the format #RRGGBB to let enerything work.

 

-JP

Frequent Visitor

Hi @jppp

 

It worked 🙂 I can confirm after replacing the code now the selector is working as expected.

 

Thanks very much for your support

 

Jorge

Helpful resources

Announcements
secondImage

Congratulations!

We are excited to announce the Power BI Super Users!

Wave Release 2

Check out the updates in Power BI.

Overview of Power BI 2020 release wave 2!

Microsoft Ignite

Microsoft Ignite

Join digitally, March 2–4, 2021 to explore new tech that's ready to implement. Experience the keynote in mixed reality through AltspaceVR!

secondImage

The largest Power BI virtual conference

100+ sessions, 100+ speakers, Product managers, MVPs, and experts. All about Power BI. Attend online or watch the recordings.

Top Solution Authors
Top Kudoed Authors