Do not input private or sensitive data. View Qlik Privacy & Cookie Policy.
Skip to main content

Announcements
Qlik Open Lakehouse is Now Generally Available! Discover the key highlights and partner resources here.
cancel
Showing results for 
Search instead for 
Did you mean: 
Not applicable

[Extension editor] Custom color picker properties

hi comm,

i was trying out the color picker in my extension, but i didn't get it to work!!

so i have a properties.js File with the properties and a css file where i want to use the selected color for background

of a bar!!

Hope someone can help!!!

define( [], function ( ) {

   var palette = [

        "#b0afae",

        "#7b7a78",

        "#545352",

        "#4477aa",

        "#7db8da",

        "#b6d7ea",

        "#46c646",

        "#f93f17",

        "#ffcf02",

        "#276e27",

        "#ffffff",

        "#000000"

    ];

return {

  

            type : "items",

            component : "accordion",

            items : {

                dimensions : {

                    uses : "dimensions",

                    min : 1,

                    max : 1

                },

                measures : {

                    uses : "measures",

                    min : 1,

                    max : 1

                },

                sorting : {

                    uses : "sorting"

                },

                settings : {

                    uses : "settings",

                    items: {

                          MyStringProp: {

                                ref: "eingabe",

                            type: "string",

                            label: "Bitte eingeben!(TEST)"

                          },

                        MyColorPicker: {

                            label:"Farbpalette",

                            component: "color-picker",

                            ref: "farbe",

                            type: "integer",

                            defaultValue: 5

                        }

                    }

                }

            }

        }

});

-----------------------------------------------------------------------------

.chart .bar {

    float:left;

    height:32px;

    clear:right;

    background-color: palette[layout.farbe];

    border: 1px solid black;

    border-radius: 0px 9px 9px 0px;

}

2 Replies
johann_bauer
Partner - Contributor III
Partner - Contributor III

Hello Eric,

Im not sure if you allready got your problem solved, but im facing the same issue with the color picker.

If im picking a color, i always get "undefined" as return.

But when im changing the hierarchy of the Code to this:

If I make an own tab for the Color Picker, it works!

..... 

            type : "items",

            component : "accordion",

            items : {

                dimensions : {

                    uses : "dimensions",

                    min : 1,

                    max : 1

                },

                measures : {

                    uses : "measures",

                    min : 1,

                    max : 1

                },

                        MyColorPicker: {

                            label:"Farbpalette",

                            component: "color-picker",

                            ref: "farbe",

                            type: "integer",

                            defaultValue: 5

                        },

                sorting : {

                    uses : "sorting"

                },

                settings : {

                    uses : "settings",

                    items: {

                          MyStringProp: {

                                ref: "eingabe",

                            type: "string",

                            label: "Bitte eingeben!(TEST)"

                          }

                    }

                }

            }

        }

});

eduardo_facchio
Partner - Contributor
Partner - Contributor

Hello, u can do it works?

I can do this way :

this work : $("tr:nth-child(even)").css("background-color", layout.myColor.color); (THIS WORKS!)

but i want to use in CSS like u do here :

  background-color: palette[layout.farbe];

i try this but dont work :


tbody table tr:nth-child(even) {

background-color: layout.myColor.color; (THIS DONT WORKS!)

}


Thank you!