cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Tiksha
Helper II
Helper II

Radio Button Border Color and Background Fill

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

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

Tiksha_0-1641982142848.png

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

Tiksha_1-1641982230528.png

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

Thanks in advance:)

1 ACCEPTED SOLUTION

Accepted Solutions
AJ_Z
Super User
Super User

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"]

 

AJ_Z_0-1642033742044.png

 

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

 

AJ_Z_1-1642034900726.png

 

Then set the OnSelect Property of the gallery to this:

Set(varColSel,ThisItem.Value)

 

AJ_Z_2-1642035642441.png

 

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)

 

AJ_Z_5-1642036589533.png

 

 

Change the visible property of the check badge to:

ThisItem.IsSelected

 

AJ_Z_4-1642036361275.png

 

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

 

AJ_Z_6-1642036640080.png

 

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

 

If you appreciated my comments/responses please be sure to Like/Kudo them it really does make me smile 🙂 !

View solution in original post

4 REPLIES 4
RandyHayes
Super User
Super User

@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.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up below. Solved your problem? - Click on Accept as Solution below. Others seeking the same answers will be happy you did.
NOTE: My normal response times will be Mon to Fri from 1 PM to 10 PM UTC (and lots of other times too!)
Check out my PowerApps Videos too! And, follow me on Twitter @RandyHayes

Really want to show your appreciation? Buy Me A Cup Of Coffee!
AJ_Z
Super User
Super User

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"]

 

AJ_Z_0-1642033742044.png

 

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

 

AJ_Z_1-1642034900726.png

 

Then set the OnSelect Property of the gallery to this:

Set(varColSel,ThisItem.Value)

 

AJ_Z_2-1642035642441.png

 

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)

 

AJ_Z_5-1642036589533.png

 

 

Change the visible property of the check badge to:

ThisItem.IsSelected

 

AJ_Z_4-1642036361275.png

 

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

 

AJ_Z_6-1642036640080.png

 

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

 

If you appreciated my comments/responses please be sure to Like/Kudo them it really does make me smile 🙂 !

Tiksha
Helper II
Helper II

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.

 

Tiksha_0-1642053213971.png

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)

 

@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. 🙂

If you appreciated my comments/responses please be sure to Like/Kudo them it really does make me smile 🙂 !

Helpful resources

Announcements
PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

Microsoft Build 768x460.png

Microsoft Build is May 24-26. Have you registered yet?

Come together to explore latest innovations in code and application development—and gain insights from experts from around the world.

May UG Leader Call Carousel 768x460.png

What difference can a User Group make for you?

At the monthly call, connect with other leaders and find out how community makes your experience even better.

Top Solution Authors
Top Kudoed Authors
Users online (1,057)