Power Platform Community Forum Thread Details

checkboxes and toggle switches in Power Pages

I'm trying to implement a switch for a Yes/No type field in a basic form in power pages, which will let me hook into onchange event, so I can show/hide another section when "Yes" is selected. This is easier said than done, though.

In an ideal world, I could just use bootstrap's own classes on a checkbox to convert it into a switch control, and then apply some custom JS in the form to handle the on change. But I don't seem to be able to do this.

I noticed there's a toggle component provided by MS that you can use, but it does some strange things, for example the font is different on the label (easily fix by CSS, I guess), and it essentially renders the toggle as a button that changes appearance when you click on it, and uses a hidden input field to track the value. Hidden input fields do not fire change events, so an alternative solution is needed.

I also noticed there's a checkbox component, which I was hoping I might then be able to apply the appropriate bootstrap classes to, and which would allow me to hook into the change event, but given the structure of the checkbox code this doesn't seem as straight forward as it should be, for example it doesn't look like you can go into the form metadata and set a CSS Class for that form element. Also, as an aside, why on earth would it render all checkboxes with the same id of "CheckboxControl-CheckboxControl-checkbox-toggle". I think if I go down this route, I'd have to use some javascript/jquery to grab a specific checkbox using some kind of selector, then manipulate the DOM elements to add the missing CSS classes. Achieveable, but is this really the only way?

So is there an out of the box solution to this I'm overlooking, or do I need create my own switch control somehow that is designed better?

Is there somewhere we can feedback or contribute solutions to this kind of problem? It feels silly that there's no provided control that uses the built in bootstrap classes, given Power Pages comes with bootstrap already included.

Forgive my naivity, I'm new to Power Pages. :)

Categories:

General topics

Add the Toggle Component to your form as usual for the Yes/No field.
Use Custom JavaScript to hook into the change event. Even though the toggle field doesn’t natively trigger a change event, you can use mutation observers or input events to detect when the toggle changes value.
$(document).ready(function() {
// Assuming the toggle field has a specific ID
$('#YourToggleFieldID').on('click', function() {
// Get the value of the hidden input field that is tied to the toggle
var toggleValue = $(this).find('input').val();

if (toggleValue === "true") {
// Show another section if 'Yes' is selected
$('#YourSectionToShow').show();
} else {
// Hide the section otherwise
$('#YourSectionToShow').hide();
}
});
});
Create a Checkbox Field: Add a standard checkbox field (Yes/No).
Manually Apply Bootstrap’s Switch Classes: You’ll need to use some custom JavaScript to apply Bootstrap’s switch classes to this checkbox after the form has been rendered.
$(document).ready(function() {
// Find the checkbox and apply bootstrap switch classes
$('#YourCheckboxID').wrap('<div class="form-check form-switch"></div>');

// Listen for changes in the checkbox value
$('#YourCheckboxID').on('change', function() {
if ($(this).is(':checked')) {
$('#YourSectionToShow').show();
} else {
$('#YourSectionToShow').hide();
}
});
});

Quick Links