Power Apps Yes/No colour

[RoisinConlon78]

Hi,

I have an app where when I edit a form there is a series of yes/no questions.  For each of the when the yes option is selected the colur of the slider is set. 

Example

Has this job been quoted -No=Grey, Yes=Green

Has this job beed scheduled No=Grey, Yes=Blue

On the details screen however the buttons remain grey even though the slider is pointed to yes

Can anyone help with what I need to do to make the buttons on the detail screen reflect the colours.  (I have set the colour on the cards on the dispay screen but this hasn't worked)

Hope I have explained this clearly

Thanks in advance

Roisin

[Leo09]

see if below links could help:

https://powerusers.microsoft.com/t5/PowerApps-Forum/How-do-you-turn-a-button-into-a-different-colour...

https://powerusers.microsoft.com/t5/PowerApps-Forum/Useful-Features-of-PowerApps-13-Gallery-with-Alt...

[v-monli-msft]

Hi @RoisinConlon78,

On the edit form, will the slider change the color as you edit? What is your detailed configuration on this? Some screenshots might help here.

Regards,

Mona

[RoisinConlon78]

Hi Mona,

See screenshots below.

First is in the preview where you can see what happens when the slider is set from no to yes.  Second is in the editing area - you can see the value I have set against "valuefill" property to chane the "processed" slider to orange when selected.

Lastly is a snap of the details screen - with both sliders set to yes in the edit screen I would like the corresponding colours to be shown here but can't figure out how.

Hope that helps.

Roisin

[RoisinConlon78]

Hi Leo,

Thank you for your reply

Unfortunately I had already reviewed both those articles and a few others but none seem to cover my specific issue hence the question, I may find find that my answer relates to some of these articles however I can't see it yet and need some guidance as I am quick new to this tool.

Roisin

[v-monli-msft]

Hi @RoisinConlon78,

I have reproduced this issue. And I will try to report this to the product team. If there is any update later, I will notice you here.

Thanks for the information.

Regards,

Mona

[CarlosFigueira · Accepted solution]

The card that is used for Yes/No columns in the display form uses a Toggle control that is disabled; at this moment, the toggle control doesn't have any way to customize its appearance when it's disabled. We're working on a solution to solve this issue, but for now you cannot change the toggle.

As a workaround, you can consider "crafting" your own read-only toggle, by using a few of the controls that let you set the color while disabled. For example, after unlocking the card, you can add a button, set its disabled property to true, its Text property to "" (nothing) and set its DisabledFill property to how you want the "fake toggle" background to show. Next, add a pair of Circles (under the Icons in the Insert tab), and set their Visible property to show or hide based on the value of 'Parent.Default' (which is the value of the item bound to the form), and its Fill color whatever you want it to show. Here's a sample of the properties to set:

Button1.Disabled: true
Button1.Text: ""
Button1.DisabledFill: If(Parent.Default, Color.Orange, Color.Gray)
LeftCircle.Visible: Not(Parent.Default)
LeftCircle.Fill: Color.White
RightCircle.Visible: Parent.Default
RightCircle.Fill: Color.White

Just to be clear, this is a workaround for the current behavior; we'll work to improve this functionality to allow a better customization of the Yes/No card in the display form.

[miglisic]

In future, this should be covered by better theming, not necessarily more customization options across the matrix of control properties and state permutations.

[leanneypants]

This took me a little creative thinking to understand it - once I did, it was great.

I've attached some images in case people didnt get it - 

The first button is the background, and the two circles are the on and off buttons

The real toggle is still there - I wanted to use the text label it returns so I just slapped the fake toggle on top of it