web

You’re offline. This is a read only version of the page.

News and Announcements icon

Power Platform CommunityForums Power Pages Powerapps Portal, how ...

Power Pages

Unanswered

Powerapps Portal, how to convert radio button (two option set) to a flip switch/toggle, is this possible?

(0) Share

Report

Report

Posted on by PeterJC

3

Wondering how to convert a radio buttons (two option set) to flip switch/toggle or if it is even possible to do?

I am trying to do this on the Profile page of the portal which I have customised.

I have tried adding custom CSS styles to the page and to the field xxx_dailyjopurnal via JQuery on the web page not sure if this is the correct way.

<script>

$("#xxx_dailyjournalupdates").removeClass("control boolean-radio").addClass("switch slider");

</script>

I used the CSS style from https://www.w3schools.com/howto/howto_css_switch.asp

I added the CSS to the web page in the custom CSS area.

Nothing seems to render out so I assume I have done this incorrect. Has anyone tried this before or has any pointers on how to accomplish this?

From this :

to this

Is the aim.

Thanks in advance,

PJC

Categories:

Power Apps portals

I have the same question (0)

All responses Img

All responses (2)

Answers Img

Answers (0)

oliver.rodrigues 9,368 Most Valuable Professional on at

Like (1)

Report
Hi, I was quickly playing around here and I think you will need to do a bit more of customization than just removing/adding classes.

First of all I think there is a typo in your JS there, the class you are looking for is "slider" instead of "silder", but anyways I don't think that's your main issue.

I think what you need to do is the following:

hide original control

re-build the control with your custom slider

either add a logic to the on change of the new control, setting the value against the original field;

or add a function on the validation of the form to set the value against the original field

finally play around with CSS. In my initial tests I couldn't get the colors working properly

This is a head start to your JS, hope it helps:

$("#cr984_boolean").hide() var customControl = ''; customControl += '<label class="switch">'; customControl += ' <input id="cr984_boolean_custom" type="checkbox">'; customControl += ' <span class="slider round"></span>'; customControl += '</label>'; $("#cr984_boolean").parent().append(customControl);

Was this reply helpful? Yes No
PeterJC 3 on at

Like (0)

Report

@OliverRodrigues Many thanks for the quick reply. Good spot on the typo, I have created this in the post and code.

I will give the above suggestion a try and get back to you with the findings and hopefully a solution. 😊

Was this reply helpful? Yes No

Join the conversation

Helpful resources

News and Announcements

Welcome to the Power Platform Communities

Season of Giving Solutions is Here!

Explore Copilot Studio Forums, Blogs & Galleries!

Quick Links

Subscribe to this forum!

Stay up to date on forum activity by subscribing.

Leaderboard > Power Pages

#1

#2

Fubar 62 Super User 2025 Season 2

#3

sannavajjala87 31

Last 30 days Overall leaderboard

Featured topics

Solution to LinkedIn Authentication in Power Apps Portals

Welcome to the Power Pages forum!

Product updates

Microsoft Power Platform Community release plans