Creating a Two-tier Tabbed Form

by Pat Bremkamp

When you have a lot of data to display in a small space, the tabbed form works very well, but Alpha Five only shows as many tabs as will fit across the top of your form. To see the rest, you have to scroll right or left. In one of my form designs, the user needed to see all the available tabs at once. So, what was needed was a tabbed form with two rows of tabs, like this:

Fig. 1. The first row of tabs is active.

Tabs 1 through 3 operate normally, but if the user selects tab 5, the form changes to:

Fig. 2. The second row of tabs is active.

Some time ago, Steve Workings published an article showing how to simulate a tabbed form with a conditional object and a multistate button. Using his idea it is easy to create a two row (or more) tabbed form.

In this article, we'll create the form shown in Figures 1 and 2. First, create a simple table, then go to forms and create a new form. Make the design space very large: you'll need a lot of room. Now, create two tabbed forms of exactly the same size named TABBED1 for tabs 1 through 3 and TABBED2 for tabs 4 through 6. Set the tab properties to square corners and minimum side angle.

Next, create two multistate buttons, named MB1 and MB2, the same size as the tabs on the tabbed forms. Set the border to single line, white, top, left and right only. You'll need to play with the settings to get the buttons to match the tabs.

Fig. 3. Creating the tabbed subforms and multistate buttons.

Fig. 4. Setting the tabbed object properties.

Place all your fields on the tabs at this point; it will save a lot of time later.

For Multistate Button 1, set the following choices:

Fig. 5. The Multistate button properties.

Do the same for Multistate Button 2, using Tab 1, Tab 2 and Tab 3 with values of t1, t2 and t3 respectively.

Now, create a session level variable called PickTab:

Fig. 6. This variable is defined at the Form level.

Next, create a conditional object big enough to hold one of the tabbed forms and the multistate button and create the following two conditions:

Fig. 7. Creating the conditional object.

For Page1, the condition is Var->Picktab="t1".or.Var->Picktab="t2".or.Var->Picktab="t3"

For Page2, the condition is Var->Picktab="t4".or.Var->Picktab="t5".or.Var->Picktab="t6"

Now drag TABBED1 and MB1 onto Page1 of the conditional object and drag TABBED2 and MB2 onto Page 2. Be sure the two forms are aligned on top of each other.

Fig. 8. Line up the tabbed subforms and the multistate buttons.

Now, all we have to do is add the scripts to pick the proper page of the conditional object and pick the tab that was pressed. Add the following script to the OnChange event of MB1:

dim shared PickTab as c 'session level variable
PickTab=this.value 'get the value of the button pressed
topparent:cond1.refresh() 'go to the conditional object page
select 
 case PickTab="t4"
 topparent:tabbed2.tab_set(1) 'go to the correct tab
 case PickTab="t5"
 topparent:tabbed2.tab_set(2)
 case PickTab="t6"
 topparent:tabbed2.tab_set(3)
end select
end

Similarly, add this script to the OnChange event of MB2:

dim shared PickTab as c
PickTab=this.value
topparent:cond1.refresh()
select 
 case PickTab="t1"
 topparent:tabbed1.tab_set(1)
 case PickTab="t2"
 topparent:tabbed1.tab_set(2)
 case PickTab="t3"
 topparent:tabbed1.tab_set(3)
end select
end

Now, the final step is to attach the following script to the OnInit event of the parent form so the form always opens on the same tab:

dim shared PickTab as c 'session level variable
PickTab="t1" 'default selection
topparent:cond1.refresh() 'go to the default page
topparent:tabbed1.tab_set(1) 'select the default tab
end

And attach the following action to the OnPush event of the SAVE button:

parent.commit() 'save the record
dim shared PickTab as c 'session level variable
PickTab="t1" 'default selection
parentform:cond1.refresh() 'go back to default page
parentform:tabbed1.tab_set(1) 'go back to default tab
end

That's all there is to it. You can download sample files with forms and scripts.

3/25/00

Don't forget, we need your feedback to make this site better!

Return to home