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

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

Power Apps Community Call

Monthly Power Apps Community Call

Did you miss the call?? Check out the Power Apps Community Call here!

secondImage

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV STudio

Power Platform ISV Studio

ISV Studio is the go-to Power Platform destination for ISV’s to monitor & manage applications post-AppSource publish.

Users online (36,957)