Unanswered

Custom Radio Button

(0) Share

Report

Posted on by Rohit_RC

Hello,

I am building a radio button like functionality using svg icons, see the image below
Button Component.png

=> The selected button should be highlighted in blue.
=> Only one button can be selected at a time and one button must be selected.

Note : I am building this as a component, i will be integrating this with another component
I have somehow managed to change the color of the button upon selecting by setting variables, but I am not sure how to carry this out in component for the requirements mentioned above.

Categories:

Building Power Apps

I have the same question (0)

All responses (5)

Answers (0)

nickellis74 432 Moderator on at

Like (0)

Report
Copy link

Link copied!

If only one can be active at a time, I would suggest storing a value in a variable and comparing against that to determine the state of the button.
So the OnSelect would be
UpdateContext({myVariable: "Value 1"})

Then all the formatting would be
If(myVariable="Value 1",{the formatting for selected},{the formatting for not selected})

I think that's what you mean? Tell me if I've misunderstood 🙂

Was this reply helpful? Yes No
Rohit_RC 20 on at

Like (0)

Report
Copy link

Link copied!

Hi @nickellis74 , thanks for replying
I am building this as a component and i reckon, UpdateContext can't be used in Components

Was this reply helpful? Yes No
nickellis74 432 Moderator on at

Like (0)

Report
Copy link

Link copied!

You're correct. My apologies.
Use Set() to specify the variable and set its value, and bind the output property to the value selected.
I've just very quickly done an icon that changes color when clicked:
OnSelect is Set(myOutput,!myOutput) just to switch between True and False. Then this color formula uses that to specify the color of the icon.

There is then a custom property called myVariable which is bound to myOutput so the component will output whatever the value if myOutput is:
A bit rushed, but hopefully that will help.

Was this reply helpful? Yes No
Rohit_RC 20 on at

Like (0)

Report
Copy link

Link copied!

well, the way you've set the variable behaves like toggle button, which is something that I don't want
for eg. if i click the button once, it'll get filled with the color, and upon clicking the same button twice, the color will fade away (I don't want this to happen).

Instead, what I want is - color of, say the left button should be disabled only when the right button is clicked & Vice Versa

Was this reply helpful? Yes No
nickellis74 432 Moderator on at

Like (0)

Report
Copy link

Link copied!

I was just using color as an example property. You can set any property you like based on this.
And for the radio button example, rather than using a boolean you would presumably assign a range of values like {1,2,3,4,5} and then with the first you'd say
If(myOutput = 1, DisplayMode.Disabled, DisplayMode.Enabled)
and with the second
If(myOutput = 2, DisplayMode.Disabled, DisplayMode.Enabled)

...and so on.

Was this reply helpful? Yes No