Convert hexadecimal text to color

I want to use a hexadecimal text which is stored in the DB to use in a Tag.
However this Tag wants to receive a 'Color Identifier'.

Is there a way to convert the text into this identifier?

mvp_badge
MVP
Solution

Hi Tom,

If using JS is an option then you can try the below-mentioned approach.

var tagEle = document.getElementById($parameters.TagId).querySelector('div.tag');

if (tagEle) {
    tagEle.style.backgroundColor = $parameters.ColorHex;
}

See this Demo: Color_Tag_JS_Task

Refer to the attached oml file.

I hope this helps you!


Kind regards,

Benjith Sam

RWA_Lab_ColorInput.oml

Hello Tom,


You can set the tag widget color property to Transparent and create a style class defining the needed color as the background color.

Add this newly created style class name to the ExtendedClass property of Tag widget. 

Refer to the below image:


Kind regards,

Riyaz

@Muhammed Riyas The color I want for this tag is not fixed for every tag. It depends on the hexadecimal value which is stored in the DB. (I already have this value fetched from the DB)

Dear Tom,
Greetings of the day

You can use conditional expressions inside elements' value as well as classes.
Example : Use a Variable to store value of HEX you receive from Database.

In the UI, use expression with style tag to give dynamic value.

Example in the image below :


If you are receiving #FFFFFF from DB then your dynamic style will be color:#FFFFFF at runtime.
If you are getting only FFFFFF from DB then you need to add style ="color:#" + HexReceivedFromDB

Let us know if this is something you are looking for ?


Regards,
Palak Patel

@Palak Patel I have already thought about that solution, but this is not possible in a Tag (from OutsystemsUI). It wants to receive a Color entity.

mvp_badge
MVP
Solution

Hi Tom,

If using JS is an option then you can try the below-mentioned approach.

var tagEle = document.getElementById($parameters.TagId).querySelector('div.tag');

if (tagEle) {
    tagEle.style.backgroundColor = $parameters.ColorHex;
}

See this Demo: Color_Tag_JS_Task

Refer to the attached oml file.

I hope this helps you!


Kind regards,

Benjith Sam

RWA_Lab_ColorInput.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.