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

(0) Share

Report

Posted on by 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

Categories:

Power Apps portals

I have the same question (0)

All responses (2)

Answers (0)

Sort by

oliver.rodrigues 9,482 Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!
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);

Was this reply helpful? Yes No
PeterJC 3 on at

Like
a
(0)

Report
Copy link

Link copied!

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

Was this reply helpful? Yes No