Colors in the CustomSelector dropdown

Enonic version: 7.4.0

Hello Enonicers,

I am using a ‘feature’ in the service feeding a CustomSelector list. In the ‘displayName’ property i am using html and specifically css styling mainly for color to clarify things for the content manager.

Like so:
{
“id”: leTag.tag,
“displayName”: ’ <span style=“background-color:’ + tagColor + ‘;’ +
‘color:’ + textColor + ‘;font-weight:normal;padding: 3px 10px;text-overflow: ellipsis;’ +
'white-space: nowrap;border-radius: 2px;”>’ + leTag.tag + ‘</span>’,
“description”: “Dit artikel is vindbaar met de tag “” + leTag.tag + “””
}

This works like a charm in 7.2.0 but no longer in 7.4.0 where the html is simply no longer rendered. Since this is pretty crucial for us is there another way of doing this? Or is it possible to have the rendering reinstated?

Hi. Sounds like your ‘feature’ is essentially a vulnerability that we have closed :-). I recommend you create a feature request with an example of what you need and what it looks like.

Nice hack =)

You can also render colored SVG “buttons” as icons in the CustomSelector, at least that is supported since “forever”.

Add this icon prop to the code you have (on the same level as id, displayName, description):

        icon: {
          data:
            "<svg width='22' height='22'><rect x='0' y='0' rx='0' ry='0' width='22' height='22' style='fill:green;' /></svg >",
          type: 'image/svg+xml'
        }

Replace fill:green here with some other color, like fill:#bbccdd and you have colors indicating the selection. The displayName won’t change color, but at least the user will know what the resulting color looks like.

2 Likes