Radio Button Border Color and Background Fill

(1) Share

Report

Posted on by Community Power Pla...

I'm trying to set RadioBackgroundFill, and RadioborderColor property.

Wanted to set the background and background fill property corresponding to text color.

Have used the following code in RadioSelectionFill property

Switch(Self.Selected.Value,"Red",Red,"Green",Green,"Yellow",Yellow,"Pink",DeepPink,"Black",Black,"White",White,"Gray",Gray,"Orange",OrangeRed)

Also is it possible to hide the text of radio button items? Please help me..

Need to create something like this using radio buttons

@RezaDorrani @RandyHayes @AJ_Z @WarrenBelz @ragavanrajan @PowerAddict

Thanks in advance:)

Categories:

Building Power Apps

I have the same question (0)

All responses (4)

Answers (1)

RandyHayes 76,297 Super User 2024 Season 1 on at

Like (0)

Report

@Tiksha

You cannot set the colors of each radio button in that control.

You could simulate something like this in a component, but the Radio control itself will not do what you are looking for.

I hope this is helpful for you.

Was this reply helpful? Yes No
Verified answer

AJ_Z 3,711 Super User 2024 Season 1 on at

Like (1)

Report

Well the way I hide radio text is by making the Font 0 it is not Ideal but it works. Randy is right in saying that a radio is not ideal for your scenario I have made Colour Pickers many times and a lot look like this one that you want but I do not Radios I use a horizontal Gallery.

So I would add a horizontal gallery and make it's items the following:

["Green","Yellow","Orange","Red","Purple","Blue","Grey","Black"]

Then I would add in a circle and a check (badge) icon into the gallery and adjust the height and width of the gallery:

Then set the OnSelect Property of the gallery to this:
Set(varColSel,ThisItem.Value)

Then click the circle and change the fill property to:

If(ThisItem.IsSelected,Switch(varColSel,"Red",Red,"Green",Green,"Yellow",Yellow,"Pink",DeepPink,"Black",Black,"White",White,"Purple",Purple,"Blue",Blue,"Gray",Gray,"Orange",Orange),White)

Change the visible property of the check badge to:
ThisItem.IsSelected

then move the circle behind the check (badge) like so:

I would use this as it functions and looks better I would however change the fill RGBAs to different values that might be prettier colours e.g. the green looks a tad dark.

let me know if this meets your needs and is a solution to your problem

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

Like (2)

Report
Thank you @AJ_Z , I managed to get the solution, the same as I wanted.
Lemme just elaborate what changes I made to reach the exact solution.

Set the Fill & HoverFill property of circle to this:
If(ThisItem.Value="Red",Red,ThisItem.Value="Green",Green,ThisItem.Value="Yellow",Yellow,ThisItem.Value="Pink",DeepPink,ThisItem.Value="Black",Black,ThisItem.Value="White",White,ThisItem.Value="Purple",Purple,ThisItem.Value="Blue",Blue,ThisItem.Value="Gray",Gray,ThisItem.Value="Orange",Orange)
And PressedFill property of circle :
If(ThisItem.IsSelected,Switch(varColSel,"Red",Red,"Green",Green,"Yellow",Yellow,"Pink",DeepPink,"Black",Black,"White",White,"Purple",Purple,"Blue",Blue,"Gray",Gray,"Orange",Orange),White)

Was this reply helpful? Yes No
AJ_Z 3,711 Super User 2024 Season 1 on at

Like (1)

Report

@Tiksha I am really glad that this solution was able to help and it looks really elegant with those changes you made. Great work on it and good luck with your power app. 🙂

Was this reply helpful? Yes No