Using JavaScript to Hide Form Sections in Power Pages Conditionally

by HubSite 365 about Lewis Baybutt [MVP]

Citizen DeveloperPower PagesLearning Selection

Discover how to hide a form section in Power Pages using JavaScript responses to buttons, dropdowns, and more.

Exploring Power Pages: A Step-by-Step Guide to Hiding Basic Form Sections using JavaScript

In one of his latest blog posts, Microsoft expert and MVP Lewis Baybutt teaches us how to hide a full section of a basic form in these interactive web contents using JavaScript based on specific on-page actions, such as clicking a button or selecting an option from a dropdown.

The first step is to write a JavaScript function. Such a function can be triggered in various ways. For instance, the function could run upon selection of a particular radio button added to the webpage using HTML.

As an example, let's consider the creation of two radio buttons in a form. Both buttons carry an 'onclick' property set to the function in their respective opening tags. By selecting one of these radio buttons, we can run our JavaScript function.

It is that simple. However, note that you might need to tweak this setup based on your specific needs. You can use a button or a dropdown to run the function, triggering upon changes made to the function.

Moving on to writing the function, it is crucial to select the JavaScript file within your workspace. You will identify this file by its JS icon. Declaring a function involves writing 'function', followed by its name, then opening and closing brackets for parameters, and finally using curly brackets to hold the tasks to be executed within.

To hide fields: function hideFields () {}

This function needs tasks to execute. First, we identify an element on the page to find and hide other elements. To hide a section of a form, fetch the ID of the page you wish to hide using inspect tool from your browser. Once this has been secured, you can utilize syntax to access elements you wish to hide.

This might be easier than it sounds. Identify the closest fieldset to the element you wish to hide, find all specified elements within that fieldset, then hide them using this method.

For the show function that displays hidden fields when the second radio button is clicked, use a similar function and change the name and end action to 'show'.

To show fields: function showFields() {}

Save your HTML, sync with portal configurations, and preview your site for testing. If everything goes well, you'll be able to hide or show entire basic form sections based on your chosen triggers.

Understanding Power Pages in a wider context

Power Pages is an increasingly popular tool among programmers seeking to create dynamic and interactive web contents. With tools like JavaScript, programmers have greater control over form sections in these generated pages. This affords a highly customizable user experience, making Power Pages a vital tool in any programmer’s toolkit.

Read the full article Hide a basic form section in Power Pages using JavaScript on a condition

Power Pages - Using JavaScript to Hide Form Sections in Power Pages Conditionally

Learn about Hide a basic form section in Power Pages using JavaScript on a condition

In today's blog, we intend to educate you on the possibility of hiding a basic form section using JavaScript based on user action in Power Pages. This could be achieved by performing certain actions like clicking a button, selecting a radio button, or even changing a dropdown to a particular value.

Firstly, it's necessary to understand the process of editing code. Our journey begins by writing a function in our JavaScript file of our webpage. The changes could be made via selecting edit code on the page we would like to modify.

Now let's consider the triggering condition that could set our JavaScript function in motion. In our scenario, we desire the function to activate once a specific radio button on our webpage, which has been included using some HTML, is selected. So basically our task begins with designing two radio buttons as follows.

<form>
    <input type="radio" id="option1" name="option" value="Hide" onclick="hideFields()"/>
    <label for="option1" class="containerRadio"> I'm booking for myself </label>
    <br>
    <input type="radio" id="option2" name="option" value="Show" onclick="showFields()"/>
    <label for="option2" class="containerRadio"> I'm from customer service </label>
    <br>
</form>

All that needs to be performed in our example is to run our function. This could be accomplished differently depending on your preferences like using a button or perhaps triggering the function upon change.

The next step would be to write our function in our JavaScript file. The declaration of a function would require writing the function, following it with a name, and then rounding off with brackets to include any parameters we aspire to pass into the function. Then, we would list our tasks that the function should execute encased in curly brackets.

As an illustration...

function hideFields () {
}

Once we lay out our function hideFields, we need to assign our function with some operations. Initially, it would be ideal to locate an element on our page that we could employ to find and conceal other elements. This can be accomplished using the inspect element tools in your browser.

Get the id of the first field in the form section which you want to hide
Use the syntax $("#elementIdValue").closest("fieldset").find("div.control, div.info, h3,legend,table).hide(); to hide it.
Write another, almost identical function to show the fields again

Collating these solutions would then lead us to crafting an interface capable of hiding and displaying entire sections based on user interaction on your Power Pages site. This could be achieved by alternatively using JavaScript blended with HTML. If there's any inquiry regarding the topic, do not hesitate to relay your question.

Here's hoping that your efforts in terms of coding bear satisfying and productive results. The team here is ready to assist with more insight in the coming blogs. Stay tuned!

Keywords

Power Pages form, hide form section, JavaScript hide form, Power Pages JavaScript, conditional form hiding, JavaScript condition form, basic form section, Power Pages form modification, JavaScript form control, hide Power Pages section