Unanswered

Dropdown item in different color : Canvas app

(0) Share

Report

Posted on by Community Power Pla...

Hi,

I want to select different dropdown options filled with different colors (coming from sharepoint list) on a drop down button on Canvas app. Please suggest how to do it without gallery control.

Listname: 'Status'

--------------------

Title Values are : One, Off, Pause.

Red: On || Green: Off || Pause: Grey

Thank you in advance !

Categories:

Building Power Apps

I have the same question (0)

All responses (10)

Answers (0)

WarrenBelz 153,026 Most Valuable Professional on at

Like (0)

Report

Hi @Anonymous ,
You cannot change the colours of individual items of a drop-down (or Combo Box) except the selected item.
You could do this in a gallery (which you do not want) that you can make look a lot like a drop-down.

Please click Accept as solution if my post helped you solve your issue. This will help others find it more readily. It also closes the item. If the content was useful in other ways, please consider giving it Thumbs Up.

Was this reply helpful? Yes No
GarethPrisk 2,828 on at

Like (2)

Report
You can accomplish this using a Gallery, as you noted. To be clear (which I think you realize), there is no way to have a Drop Down have different color choices.

For the Gallery approach
Add a blank Gallery control
Add Status as your Items property
Add a label to the Gallery, and set the following properties
Text: ThisItem.Title
Fill: Switch (ThisItem.Title, "On", Red, "Off", Green, "Pause", Grey)
You can then tweak things as need - including sizing and whatnot. You can also optionally put that Switch function as the TemplateFill property of the Gallery, to have the entire gallery row's fill be the color.

Was this reply helpful? Yes No
Community Power Pla... on at

Like (0)

Report

@GarethPrisk Thank you so much for your quick response.

I followed your steps and able to set it up. But I can find it as a dropdown: to select from the drop down. Could you please help me here ? I am grateful.

I end up doing it like this, as attached.

Dropdown11.PNG

Was this reply helpful? Yes No
SmoothOperator 48 on at

Like (1)

Report

Another cool suggestion might be - in my example a dropdown list for approving :
on property "Fill"
If(
DataCardValue46.Selected.Value = "Approved",
Green,
DataCardValue46.Selected.Value = "Rejected",
Red,
White
)
and if you want it you can set it on "View" (displaymode property) if you want the dropdown value pre-filled.

I have a short .gif as well attached. Hope it is ok. (backup url: https://i.postimg.cc/gkjPY1FD/example.gif )

example.gif

Was this reply helpful? Yes No
Dunc 14 on at

Like (0)

Report
You could do this by manually creating a drop down.
Place a text box on top for selected value or hint text, with a down arrow in a box to the right
Add a small gallery that becomes visible when you click the down arrow
The gallery has one label in the template, with datasource set to the table with the colour values
The label gets its colour and text value from the datasource table
when you click on the desired colour/label, hide the gallery

Was this reply helpful? Yes No
Mehdi_M on at

Like (0)

Report

Hello,

it's not possible BUT you can build it in a container.

This container contains: 2 rectangles, 1 icon and 1 gallery. With the gallery you will be able to manage row background

Was this reply helpful? Yes No
Bed 2 on at

Like (0)

Report

Thats a good solution, can you explain the Details?

Was this reply helpful? Yes No
hamidomar000m 8 on at

Like (0)

Report

Hi Mehdi, can you please ellaborate how you can pick different color based on the value selected?

Was this reply helpful? Yes No
Mehdi_M on at

Like (0)

Report

Hi,
you need to create a collection with your items for your dropdown.
For example:
ClearCollect(col_ex;{Name: "Name1" ; Color: RBGA(155;0;0;1)};
{Name: "Name2" ; Color: RBGA(0;155;0;1)};Name: "Name3" ; Color: RBGA(0;0;155;1)})

Then, in a gallery, you display your Name values in a label (ThisItem.Name)
Then for the color, in the Fill property of the label you write ThisItem.color.
For the "combobox effect", you put your gallery in a container with a label which will carry the value selected in the gallery and right next to it an arrow icon to expand the gallery or close it.

I hope I answered your question

Mehdi Mazoujgui

Was this reply helpful? Yes No
hamidomar000m 8 on at

Like (0)

Report

Hi Mehdi,

thank you for your reply!
Could you please share a screenshot or an example how you do it? I couldnt do it with your reply.

Was this reply helpful? Yes No