Power Pages - Multi Select Field Show Hide and Set Business Required Using Javascript

In this Power Portals blog post content, we are going to implement a multi-select field and use JavaScript to hide and show it based on user interactions. Enhance user experience and streamline data entry by revealing the field only when needed. 

At the end of this post, you'll be able to hide and show fields based on the option selected in the multi-select field and make it business required as these two options are not available out of the box in power pages.

Add the below code in your basic form additional settings.

Code: $(document).ready(function () {

var field = document.getElementById('new_multiselectparentfield');

$("#new_multiselectchildfield").parent().parent().hide();// To Hide Multi Select Field

var changeField = new MutationObserver(function(mutations) {

console.log('changed');

onDisplaySectionChange();

});

changeField.observe(field, {

attributes: true,

attributeFilter: ['value'] });

MakeRequired("new_multiselectparentfield");

});

function onDisplaySectionChange(){

var data = $("#new_multiselectparentfield").val();

if(data.includes(100000000)){

$("#new_multiselectchildfield").parent().parent().show();// To show multi-select field

}

else{

$("#new_multiselectchildfield").parent().parent().hide();

}

}

var MakeRequired = function (fieldName) {

try {

if ($("#" + fieldName) != undefined) {

$("#" + fieldName).prop('required', true);

$("#" + fieldName).closest(".control").prev().addClass("required");

var validation = document.createElement('span');

validation.style.display = "none";

validation.id = fieldName + "Validator";

validation.controltovalidate = fieldName;

validation.errormessage = $("#" + fieldName + "_label").html() + " is a required field.";

validation.initialvalue = "";

validation.evaluationfunction = function () {

var value = $("#" + fieldName).val();

if (value == null || value == "") {

return false;

} else {

return true;

}

};

Page_Validators.push(validation);

}

}

catch (error) {

errorHandler(error);

}

}