Skip to main content
News and Announcements icon
Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Pages - Power Apps Portals / Powerapps Portal, how ...
Power Pages - Power Apps Portals
Unanswered

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

(0) ShareShare
ReportReport
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.

 

PeterJC_0-1614100620964.png

 

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.

 

PeterJC_2-1614101066543.png

 

 

 

 

<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 :

PeterJC_0-1614105769116.png

to this 

PeterJC_1-1614105850311.png

Is the aim.

 

Thanks in advance,

PJC

 

 

  • PeterJC Profile Picture
    PeterJC 3 on at
    Re: Powerapps Portal, how to convert radio button (two option set) to a flip switch/toggle, is this possible?

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

  • oliver.rodrigues Profile Picture
    oliver.rodrigues 9,342 Most Valuable Professional on at
    Re: Powerapps Portal, how to convert radio button (two option set) to a flip switch/toggle, is this possible?

    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);

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

News and Announcements

Welcome to the Power Platform Communities

Quick Links

Paul Stork – Community Spotlight

We are honored to recognize Paul Stork as our July 2025 Community…

Congratulations to the June Top 10 Community Leaders!

These are the community rock stars!

Announcing the Engage with the Community forum!

This forum is your space to connect, share, and grow!

Leaderboard > Power Pages

#1
Lucas001 Profile Picture

Lucas001 60 Super User 2025 Season 1

#2
Fubar Profile Picture

Fubar 55 Super User 2025 Season 1

#3
surya narayanan Profile Picture

surya narayanan 35

Last month Overall leaderboard

Featured topics

Updates on Power Apps Portals - PLEASE READ

Product updates

Microsoft Power Platform Community release plans