[Extension editor] Custom color picker properties

[#1]

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;

}

[johann_bauer]

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]

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!