cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
PeterJC
New Member

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

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

 

 

2 REPLIES 2
OliverRodrigues
Super User II
Super User II

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

 




If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

Power Apps Portals Super User


Oliver Rodrigues


 

PeterJC
New Member

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

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

PowerPlatform 768x460.png

Microsoft Learn

Check out our new Discover Your Career Path blog post series and get all the details.

Users online (1,545)