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
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:
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);
Power Apps Portals Super User
@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. 😊
Check out new user group experience and if you are a leader please create your group
Did you miss the call?? Check out the Power Apps Community Call here!
See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.
User | Count |
---|---|
13 | |
12 | |
10 | |
8 | |
1 |
User | Count |
---|---|
24 | |
17 | |
15 | |
14 | |
3 |