Magic Buttons to Collapse/Expand Sections & Scroll to Top

This post describes how to build a set of three buttons that aid navigation of long forms. When a form has many sections and fields, one solution is to use Tabs. However, if there are several sections within a Tab, users may still have to do a lot of scrolling and clicking. The idea proposed here is to create a set of three buttons that float, always visible, at the bottom of the form:
[Back to Top]  [Collapse]  [Expand]

[Back to Top] simply scrolls to a standard location near the top of any page (#navTop). While Quick Base has a handy icon to scroll to the top, it's placed near the top. Normally you want to do this when you are near the bottom, so it's handy to have a button located there. [Collapse] and [Expand] use fairly simple JavaScript to collapse or expand all sections. The versions described here are compatible with Tabs in the following sense. They only collapse or expand within the current Tab.

With these buttons, a user who knows the structure and contents of a long form can collapse them all, then scan the section-headers to open just the one section they need. Or, they can set a preference by collapsing all, then clicking on their favorite sections to expand them, and leaving the form that way each time they exit. Of course, there's always the option to open up all the sections, if the user really likes to scroll. In short, the three magic buttons accommodate the preferences of just about any user.

Step 1. Create a formula-text field called "Bottom Nav" for the three buttons. The field's checkboxes must have "Allow some HTML ..." checked and should have the "Reportable" and "Searchable" boxes unchecked. For the formula, insert this:

var text buttonStyle=" class='Vibrant' style='padding:3px; white-space:nowrap; vertical-align:middle; line-height:21px;'";

var text imageStyle=" style='vertical-align:middle; background-color:white;'";

"<span style='font-size:120%; font-weight:bold; position:fixed; bottom:20px; left:44px; z-index:1000;'>" &

"<a href='#navTop'" & $buttonStyle & ">" &

    "<img class='TblIcon20 Upload' " & $imageStyle & ">" &
    "&nbsp;Back to Top</a>" &

"<a href=\"javascript:" & [Collapse Sections] & "void(0);\"" & $buttonStyle &">" &

    "<img class='TblIcon20 Animation' " & $imageStyle & ">" &
    "&nbsp;Collapse</a>" &

"<a href=\"javascript:" & [Expand Sections] & "void(0);\"" & $buttonStyle &">" &

    "<img class='TblIcon20 OSI_Model' " & $imageStyle & ">" &
    "&nbsp;Expand</a>" &

"</span>"

Some explanation ... The buttonStyle and imageStyle variables set the size and style of the buttons to be reasonably compatible with Quick Base standards. The <span> is set to be positioned at the bottom, with a z-index that floats it above all other elements of the page, left-aligned so as to obscure data-entry fields and thus prevent mis-clicks. As shown here, all three buttons use one of the standard images that Quick Base supplies as table-icons. You may prefer to use other images, or skip the images and just use plain text for the buttons. Finally, the [Collapse] and [Expand] buttons require some JavaScript. That's the next step.

Step 2. Create two global variables, in the Variables section of Settings for your app.

"Collapse Sections" is the name you should give to a text variable that contains the following:

$('.sectionTitle').each(function(){
    var $titleWrap = $(this).parent();
    var $expandedTitle = $titleWrap.hasClass('expanded') && 
         (this.innerHTML.length > 0);
    var $tabWrap = $titleWrap.parent().parent();
    var $hiddenTab = $tabWrap.hasClass('ui-tabs-hide');
    if($expandedTitle && !$hiddenTab){
        this.click();
        }
    });
$('#backToTop').click();

In words, this script finds every expanded section within the current tab, clicks each of those section-headers to make the section collapse, then scrolls up.

"Expand Sections" is the name you should give to a second text variable that contains the following:

$('.sectionTitle').each(function(){
    var $titleWrap = $(this).parent();
    var $collapsedTitle = $titleWrap.hasClass('collapsed') && 
         (this.innerHTML.length > 0);
    var $tabWrap = $titleWrap.parent().parent();
    var $hiddenTab = $tabWrap.hasClass('ui-tabs-hide');
    if($collapsedTitle && !$hiddenTab){
        this.click();
        }
    });
$('#backToTop').click();

This script finds every collapsed section within the current tab, clicks each of those section-headers to make the section expand, then scrolls up.

Step 3. Place the "Bottom Nav" field on your form. It should be the last field on the form. In addition, it should be immediately preceded by a section-header that has no name. Why a nameless header? Because it will be exempted from the collapsing and expanding actions of the JavaScript. We don't want the buttons to hide (collapse) or expose (expand) themselves!

This last point reveals an important caveat for the whole method described here. It works best on forms in which all sections, except the last one containing the buttons, have a name. That's because of the way Quick Base handles nameless sections; essentially, they are intended to stay expanded (within a Tab, if applicable).