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
Super User

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.

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Welcome Super Users.jpg

Super User Season 2

Congratulations, the new Super User Season 2 for 2021 has started!

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.

Users online (965)