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

[PeterJC]

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

[OliverRodrigues]

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

[PeterJC]

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