Hiding & Showing Controls using Client-Server API

As the page is refreshed at a Control level, we can add controls to Container Controls that aren’t refreshed during the life of the page. Client-side changes applied to those Container Controls will persist even if its child controls are refreshed by the server.

You can use this to hide and show controls on the client without changes being unexpectedly reverted by a server refresh.

Steps

Create a form. Add a Field Control called myName to the page. Give myName the id name. Add a Button Control with text content “Set Name”

Add a server-side click event to the Button Control with the following code:

fields.myName.value = "Rover";

Now run the form, open the Developer Tools Console and hide the field in the client using:

document.querySelector("#name").style.display="none";

Click the Set Name button and you will see the myName control re-appear on the page. The client-side styling that you had applied has been lost.

Now, in the studio, add a Panel Control to the page and place the myName Field Control within it. Give this panel control an id container.

Run the form, open the Developer Tools Console and hide the field in the client using:

document.querySelector("#container").style.display="none";

Click the Set Name button. You will see that the myName field does not re-appear because the Panel Control has not been refreshed so the client-side styling has not been lost.

Previous Page To Module