Use the Icon color of an ENUM in the UI

Ask the community
1

Hi,
I am trying to use the color from A in the UI, however I have tried all the options in B and none of the settings sets the color of the icon to the color of the ENUM. Please help.
I have plans to use this icon many places so creating a list of conditional formatting for the color of the icon is not an option. Further I would also then need to add X amount of conditions for X amount of options in the ENUM and X amount of colors must then also be added in Themes. In addition there is no easy way to only copy the conditional formatting of an UI element, one would need to copy the entire UI element to another location and based on the context the icon value may not point to the same reference.

image
image2014×697 85.8 KB

As marked in green from the documentation the color should be possible to use in the UI.

image
image837×566 45.6 KB

2

Hi!

I agree that there seems to be no simple way to do this.

I have requested this feature from our platform engineering team and will try to give an update when I know more about when this feature can be expected.

Currently, it is possible to copy conditional styling to the clipboard.

Hope this helps!

Skjermbilde 2023-11-21 kl. 15.58.38
Skjermbilde 2023-11-21 kl. 15.58.17

1 Like
3

Hi.
Great. Thanks for the feature request.
For the conditional styling copy tips; in my case I need to copy A and then B to the new destination of the same conditional style. Some locations I have 10 styles that must be copied. Would be nice with a copy function at location C in image below that would copy all of the conditional styles in one go.

Further please consider making Color a data type in Appfarm and more on the fly allowance for using colors without going via the Color Theme (such as using functions as ColorValueHex(), RGBA(Red, Green, Blue, Alpha ) and ColorFade( Color, FadeAmount ))

image

4

Hi,

I understand that this is not very convenient. I have registered this as a wanted feature as well.

Have a nice day!

5

Thanks.
This is not very urgent in our end.
We have already implemented this in a alternative way; create base64 strings and save in an ENUM. Then use the Image UI element instead of the Icon UI element. Does pretty much the same job.

1 Like
6

Hey Lynfot

if it can help, you can keep your color code in a string and use a coded component to display what you want to have ( it can be a shape or a font or something … )

let me know if you need this
image

1 Like
7

Hi @Yassine.tebib ,

Could you please explain how you solved this? :slight_smile:

Erik

8

Really Sorry i saw your message a bit late

you can deal with it by using a coded component to display your color

the idea is to store you hexcode into your DB

HTML Content

<div id="divColor"></div>

Script

function changeBackgroundColor() {
    let div = document.getElementById('divColor');
    div.style.backgroundColor = appfarm.data.hexCode.get();
}

appfarm.data.hexCode.on('change', (val) => {
    changeBackgroundColor()
})


changeBackgroundColor()

Ressources
Type : Stylesheet

#divColor {
            width: 100%;
            height: 100%;
            border: 1px solid #000;
        }

Data

Link your String variable and call it hexCode

2 Likes