Hello everyone

I have an Outsystems 11 Mobile application with a dropdown.

I would like to colour each specific list item in the dropdown a different colour depending on the value of that item.

Very similar to this post https://www.outsystems.com/forums/discussion/53654/specific-color-for-only-particular-items-in-the-list-dropdown/ 

but for mobile instead of Traditional web, and using a standard dropdown.

Does anyone have any suggestions?

Thanks!

Hi, friend! 

Will be very interesting figure it out how to do that inside a dropdown. The first step is to fill the dropdown list with a structures with the data plus the color to background. 

The select has a lot of properties applied to it. Try to pass the value to background-color at the extended properties.

That can be a good start

Solution

Hi Mitchel,

It is reasonably easy to do, if you change your dropdown 'options content' from text to custom. 

In that case, you can have a container around the text of each option, and you could give the container a style class that depends on your data.  In my example, i use the status of the request as the base for the color.


In css, just define how each of these classes should be displayed.  The dropdown-popup-row takes care of the values in the list, the .dropdown-display-content takes care of the selected value.

See attached oml,

Dorine

Solution

Lenon Manhães wrote:

Hi, friend! 

Will be very interesting figure it out how to do that inside a dropdown. The first step is to fill the dropdown list with a structures with the data plus the color to background. 

The select has a lot of properties applied to it. Try to pass the value to background-color at the extended properties.

That can be a good start

 Hi Lenon!

Thanks for your response. Unfortunately I was looking for a way to do this in Mobile app, but I appreciate the help either way!

 

Dorine Boudry wrote:

Hi Mitchel,

It is reasonably easy to do, if you change your dropdown 'options content' from text to custom. 

In that case, you can have a container around the text of each option, and you could give the container a style class that depends on your data.  In my example, i use the status of the request as the base for the color.


In css, just define how each of these classes should be displayed.  The dropdown-popup-row takes care of the values in the list, the .dropdown-display-content takes care of the selected value.

See attached oml,

Dorine

 

 Hello Dorine


Thank you very much! This worked exactly as needed.

I can't believe I didn't think of it myself. This is such a simple solution!

Thanks again and have a great day!