Forms may be placed within other forms by placing a tabpanel on a form. A tabpanel can show other forms with the solution (including forms from other modules).
Placing a Form Within a Form
To place a form in another form, we need the following Servoy objects
- A relation
- Another form
- A tabpanel
Creating a Relation
Before we can place a related form on another form, we must create a Relation. A relation is a link between to tables (or a global variable and a table)
For this example, we will create a relation in the 'example_data' database from customers to orders.
To create a relation:
- Do one of the following
- Select File > New > Other. A window with a tree view will appear. Select Servoy > Relation. A new window will appear; select the solution to place the relation and give the relation a name.
- Select the dropdown on the New button on the Developer toolbar and select Other. A window with a tree view will appear. Select Servoy > Relation. A new window will appear; select the solution to place the relation and give the relation a name.
- Select the Relations node in the Solution Explorer under the desired solution. Click the Create relation button in the Solution Explorer list view toolbar.
Right click on the Relations node in the Solution Explorer under the desired solution. Select Create relation from the menu.
The last two options are more desirable as they will allow Servoy Developer to name the relation for you.
- A new relation editor view should appear in the middle of Servoy Workbench. Do not edit the name at this time.
- Select the table for the left side of the relation by clicking on the ... button. For this example, select example_data.customers.
- Select the table for the right side of the relation by clicking on the ... button. For this example, select example_data.customers.
- The name of the relation has been constructed automatically in the name field after selecting the tables. This name must be unique, so verify that the name is sufficient for the relation and editing is not required. For this example, the default should be fine.
Select the primary key of the parent(left) table and the matching foreign key of the child(right) table. For this example, ensure the customer_id equals the customer_id.
Servoy Developer will normally try to match these ids if they have the same name and it is a true primary key to foreign key match.
- Set the constraints for the relationship. For this example, leave them as they are by default.
- Save the relation editor. See Intro to Servoy Developer environment
Creating a Form
Before a form can be placed onto another form, the form must be created. You cannot create new forms in the same editor; each form opens in its own editor. For information about creating a form, please see Creating Forms.
For this example, create a new form based on 'example_data.orders' table. Make the form a table view form.
To create a table view form, use the same instructions on Creating Forms, with the following exceptions
- Add data providers with the Fill text property and Place horizontal options selected.
- Ensure the form is in Table View by checking the form property view and that is it set to Table view (locked).
Creating a Tabpanel
A tabpanel is a Servoy control/object that can be placed on a form. See Intro to Servoy Concepts for more information about tabpanels. For this example, we will place the newly created orders form on the customers detail form.
To place a tabpanel on a form:
- Make sure the desired form is open in Form Designer and selected
- Do one of the following
- Press ctrl-alt-t.
- Select Elements > Place TabPanel from the menu.
- Click on the TabPanel button on the Developer toolbar.
- A window will appear for selecting a tabpanel form.
- Choose a form
- For a related form, choose the form through the relation desired. For this example, open the node for the 'customers_to_orders' relation and select the newly created orders form.
- For a unrelated form, choose the form through the Unrelated node.
- The tabpanel will appear with the chosen form inside it.
- To place another form in the tabpanel, select the tabpanel in Form Designer and use one of the same commands in step 2 above.
The customers form should now show the orders form within the tabpanel. Since the form was added through a relation, the data in the orders form are related records to the selected customer. If the customer record is navigated, the records in the order form will also reload to the related records for currently selected customer record.
Quick Start Video