Hello,
I have a question regarding customizing drop down lists.
would it be possible to change the color of the element based on data retrieved for that specific record
so lets say I have this structure (Id,Name,Status) could I change the text color of each element based on the value of the status, so when I have a status of busy the name would be red and so on.
Hi Joharah Khalid,
There are many threads about this subject, I'm sharing one of them try to see answer to see the next steps you should take :)
https://www.outsystems.com/forums/discussion/36777/different-colors-for-different-statuses-in-table-records/
https://www.outsystems.com/forums/Search.aspx?page=1&q=is+it+possible+to+have+dropdown+list+elements+with+different+text+colors%3f&scat=forums
Kind Regards,
Kundan chauhan
KUNDAN CHAUHAN,
but what I meant was in a drop down list rather than a table.
I tried a bunch of ways I found in other threads that didn't seem to work :( its seems like the ".current" attribute isn't working as expected when added to the extended class element of the dropdown list.
Thanks anyways!
I've added some random logic to include a class name in Dropdown Search widget. You can attach any field name that serves as your class-name.
Although it won't be 100% fit for your requirement but more or less you'll be able to achive the basic UI that you're looking for.
I've added a CSS class "id-1" that applies red colour. This solution won't need any custom javascript or HTML changes. Works based on just default Dropdown Search widget.
may I ask how are you specifying on which elements is the "id-1" class being applied to?
and where is the variable "ImageUrlOrIconClass" used?
Hi
Please refer to this thread.
https://www.outsystems.com/forums/discussion/53654/specific-color-for-only-particular-items-in-the-list-dropdown/
Regard
@Tom Zhao the forums post you suggested uses Traditional Web for the solution. Hence it won't be useful in thi scenario since Joharah is using Reactive Web app.
@Joharah Khalid Here's a more specific example of your use-case.
You can use the following css, and assign the dropdown properties with "current" values that may change for each record. That value goes into your class-name and it shows in different colours as per those class names configured in the screen / theme CSS.
Change dropdown Option Content to custom then drag and drop expression in dropdown. In expression properties mention if condition. I have share my OML file maybe it will help you and if you have more condition refer to this thread.
Thanks