Create Collapsible Sections

If your DataPage has a very long series of input fields, some of which may not apply to every end-user, you can divide your DataPage into sections and hide or show them when needed. This method can be used on Submission Forms, Update Forms, search and details pages of Reports, as well as Password Recovery Forms. This article will explain first how to add these sections to an existing Submission Form. The article then explains how to add buttons to toggle visibility. You can also configure your DataPage sections to display based on received parameters.

In this article, you create collapsible sections using toggle buttons in a Submission Form.

Add HTML blocks to surround sections in a Web Form

1. Navigate to the DataPages listing, select the DataPage you wish to add collapsible sections and click Edit. Proceed to the Configure Fields screen. Add an HTML Block to separate each section. Using the Insert button, at the lower right-hand corner of the DataPage Elements panel, insert an HTML Block.

Tech_tip_creating_collapsible_sections_1

Using the arrow buttons below the DataPage Elements panel, move the fields that will be included in the first collapsible section below this first HTML block. Then use the Insert button to add another HTML Block. This HTML block will serve both as the end of the first section and the beginning of the second. Move the appropriate fields to the second section and repeat the process until all of the sections have been marked out by HTML Blocks.

Tech_tip_creating_collapsible_sections_2

2. Next, create tables to encapsulate the section fields. To hide the separate sections, create HTML tables and set their visibility to ‘none’. In the first HTML Block create an HTML table tag. Set its id attribute to “Section1” and set its style attribute to “display:none”. Immediately after the table tag open a table data (td) tag.

Tech_tip_creating_collapsible_sections_3

Go to the second HTML Block. Close the table data tag and then close the table tag. If you were to preview the DataPage now, this first section would not be visible. In the second HTML block create a new HTML table and table data tag, but this time set the table id to “Section2”. The second set of tags will be closed in HTML Block number three. Repeat this process until all of the sections are enclosed in HTML table tags.

Tech_tip_creating_collapsible_sections_4

3. Now, you can create buttons to toggle visibility. The tables we created are currently hiding all of the fields. In the gaps between the tables, create buttons to toggle the section’s visibility. Before the opening HTML table tag in each HTML Block add an input tag with the type button. Replace the onClick attribute with a function called “Displayer()”. In the parenthesis after Displayer enter the number of the current section, e.g. Displayer(1) . Set the value attribute of the button to the section title. The value attribute will be the text displayed on the button.

Note: Instead of buttons you can use another HTML objects such as a links or images. Simply add Displayer as the onClick funtion to that object.

Tech_tip_creating_collapsible_sections_5

If you are looking to display an image instead of a button replace the code in the HTML Block :

<input type="button" onClick="Displayer(1)" value="Personal Info">  with    <img src="IMAGE URL " onClick="Displayer(1)" >

where IMAGE URL is the URL of the image uploaded on your server.

4. Now, you add the Displayer function to the footer. Using the Insert button, select Header & Footer to add these sections. Insert the Displayer function into the footer section. The Displayer function is written to accept an unlimited number of sections as long as the number passed to the function corresponds to the name of the section. (e.g. 4 is passed to toggle the visibility of section4).

Tech_tip_creating_collapsible_sections_7

5. Click Finish.

Testing and Formatting

By default, all of the sections we created will be hidden. You can change a section’s default visibility by setting the HTML table’s style attribute to “display:inline;” instead of “display:none;”.

If you would like to add columns to this DataPage, use the Insert button to add a New Section just after the first HTML Block. Change the column number as desired. Before the closing HTML Block add another New Section and reset the column number to one.

Tech_tip_creating_collapsible_sections_8

Advanced: Using Parameters to dynamically hide sections

You can also dynamically hide sections using received parameters

  1. Be sure to enable Advanced Options and Parameters for this DataPage to receive parameters.
  2. Create the HTML Block / HTML tables structure as before. In the footer a duplicate of the following code for every section in your DataPage. Replace the section number as needed. Make sure that all of the code is surrounded by script tags.
  3. Next, replace the Parameter name with the parameter you are receiving. Make sure the parameter is formatted correctly: [@xxxxx] and is surrounded by single quotes. Also change the value to match the value expected. If the received parameter’s value matches the expected value, the section will be visible.

JavaScript Reference:

<!–Opening Table HTML:–>
<table id="Section1" style="display:none;"><td>

<!–Closing Table HTML:–>
</td></table><br>

<!–HTML Input Tag for Buttons:–>
<input type="button" onClick="Displayer(1)" value="Section 1 Title"><br>

<!–Footer JavaScript for Toggling Buttons:–>

<script>
function Displayer(n)
{
var check = document.getElementById('Section'+n);
if(check.style.display == 'none')
{
check.style.display='inline';
}
else
{
check.style.display='none';
}
}

</script>

<!–JavaScript for Receiving Parameters:–>

<script>
var check = document.getElementById('Section1');
if('[@Parameter]' == 'value')
{
check.style.display='inline';
}
else
{
check.style.display='none';
}
</script>

Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.