Posts

Showing posts from July, 2023

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

Image
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_mu

Power Pages - Clickable Advanced Forms - Tab Like Forms On Portals

Image
clickable tabs stand out as a user-friendly solution that simplifies navigation and improves the overall user experience. In this short blog post, we will explore how we can get a multi-step form with clickable tabs functionality. At the end of this post, you'll be able to make something like this. 1. Create a page with n number of subpages 2. Create a web template using the code below < div id = "multiple-tabs" class = "wrapper-body" > < div class = "container" > < div class = "page-heading" " > {% block breadcrumbs %} {% include 'Breadcrumbs' %} {% endblock %} {% block title %} {% include 'Page Header' %} {% endblock %} <!-- ENTER TABS CODE HERE --> {% assign depth_offset = depth_offset | default : 0 %} {% assign current_page = current_page