How to create and use tabpanel forms

In my point of view, the ability to build complex forms by using simple forms on them, is one of the key differences between Servoy and Visual FoxPro. This is where a major productivity boost can be realised.

Note! When you right-click on a form in the Solution Explorer the popup-menu shows an option create new sub form. Do not confuse this with the subform we are creating here! What this menu should say (for us OOP guys) is: create new form subclass or something like create new form extension!

For this walkthrough we will use the udm database that is installed along with the sample data. We will create a Company data-entry form and on that form we will create a pageframe/tabpanel with two tabs showing the contacts and adresses. First lets create the contacts (sub)form:

Right click the udm database
In the List-View window right-click the Contacts table
Select Create new form from the popup menu
Click the Next button

Right-click popup menu

New form dialog

Data provider dialog

Select the fields contact_id, company_id and name_last while holding down the Ctrl key
Set the options so they correspond with the screenshot above
Press the Finish button

Contacts form in the form designer

Now lets create the address (sub)form:

In the List-View window right-click the Addresses table
Select Create new form from the popup menu
Click the Next button

Data provider dialog

Addresses form in the form designer

Select all fields from the addresses table while holding down the Ctrl key
Set the options so they correspond with the screenshot above
Press the Finish button

Now we will create the Company form:

In the List-View window right-click the Companies table
Select Create new form from the popup menu
Click the Next button

Data provider dialog

Companies form in the form designer

Select some fields from the companies table while holding down the Ctrl key
Set the options so they correspond with the screenshot above
Press the Finish button

We now have three seperate forms that function independent from each other. To let them work together we need to let the application know how they are related. This is easily done by defining two relations as you have learned earlier. You will need to specify a relation from companies_to_contacts and from companies_to_addresses based on the CompanyId:

Companies_to_contacts relation dialog

Companies_to_addresses relation dialog

All we have to do now is add a tabpanel and specify the forms that should be contained in them:

Tabpanel button on Servoy toolbar

Press the tabpabel button on the toolbar
Select both the contacts and addresses forms using the Ctrl key (be sure to select the related forms)
Press Ok
Position and resize the tabpanel as desired
Run the form

Selecting tabpanel subforms

Companies form with tabpanel

Smart client with addresses/contacts subforms

Web client with addresses/contacts subforms

Now let's do something we definitely cannot do in VFP, lets change the addresses form from Listview to RecordView (vfp: grid-style to multiple control-style). You can either do this by recreating the form and disabling the checkbox Place fields horizontally or you can set the view property of the addresses form to RecordView (locked means the user can't change the layout) and rearrange the controls vertically.

Smart client with Recordview subform

Conclusion

In my opinion the ability to reuse simple forms in other forms by defining a relation and running it in the context of the parent, is absolutely brilliant! That is where we would start writing quit a lot of code in VFP in order to maintain referential integrity and provide adequate refresh logic. In Servoy all this can be setup in minutes without writing any code at all! The good thing about code that you don't write is that it's flawless :-) !