Log in to AnswerLog in to Follow
UserImage.jpg
Tom De Backer
23Views
6Comments
Solved
Convert hexadecimal text to color
Question
Beginner
Reactive
CSS
Front-end

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?

0
0
28 Mar
2021-03-18 21-03-15
Benjith Sam
mvp_badge
MVP
Solution

Replying to Tom De Backer's comment on 28 Mar 2022 12:32:40

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

See solution in context
RWA_Lab_ColorInput.oml

2
0
28 Mar

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

0
0
28 Mar

@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)

0
0
28 Mar

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

0
0
28 Mar

@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.

0
0
28 Mar
2021-03-18 21-03-15
Benjith Sam
mvp_badge
MVP
Solution

Replying to Tom De Backer's comment on 28 Mar 2022 12:32:40

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

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