User Interface

Tabs and Fields

Every interface is composed of two basic sets of objects, namely (Tabs) and (Fields), as shown in the following example.

Tabs and Fields

Making an analogy with a table, a Tab is the table and Fields are the fields of that table.

Thus, whenever a tab is created, and fields are added to that tab, a table with the same name as the tab will be created within the database, containing the same fields as that tab. All data entered in the user interface will be stored inside this table.

Therefore, every interface must have at least one set of objects (Tabs and Fields), however an interface can contain more than one set of these objects.

Let’s imagine a situation where it is necessary to create an application to store data related to the employees of a company. In addition, you want to add data on the dependents of these employees. We can conclude then that two tables will be needed, one to store employee data and another table to store dependent data, as shown below.

Employees table and Dependents table

We can see in the table (Dependents) that there are several names, however there is no relationship with the table (Employees) so that it is possible to identify the dependents of an employee. Therefore, it is necessary to establish some kind of relationship between these two tables, in order to allow the correlation between employees’ data and their dependents’ data. A very important point when working with tables is the definition of the primary key.

Primary Key

A primary key is a field with unique values ​​in a table, such as a driver’s license number, phone number (including area code), or vehicle identification number (VIN). In the above tables, the field (Id) of the table (Employees) and (Index) of the table (Dependents) are the primary keys. We can see that within their respective tables, these fields do not have duplicate values.

Relationship between tables

If we add to the table (Dependents) the information of the primary key of the table (Employees), we can establish a relationship between them. In the example below, the field (Id Lnk) was added to the table (Dependents) in order to store the value of the primary key of the table (Employees), thus establishing a relationship between these two tables. The infinity symbol shown next to the table (Dependents) means that for 1 record in the table (Employees) there can be several related records in the table (Dependents).

Relationship between employee table and dependent table

Now to identify, for example, the dependents of employee Jacob A. Smith (Id = 1), we search in the table (Dependents) all the records whose field (Id Lnk = 1).

Likewise, to identify the dependents of employee Michael B. Johnson (Id = 2), we search in the table (Dependents) all records whose field (Id Lnk = 2).

To identify the dependents of employee Joshua R. Williams (Id = 3), we searched in the table (Dependents) all the records whose field (Id Lnk = 3).

The figure below shows two ways to create the relationship between the Employees and Dependents tables. In both (A) and (B), we have a “1-to-many” relationship. The “infinity” symbol represents the “many”.

Thus in (A), for each record in the Employees table there can be several dependent records in the table. In (B), for each record in the dependent table, there can be several records in the employees table.

In this example, understanding the purpose of these two tables (employees and dependents), it makes more sense to create a relationship as defined in (A) than in (B).

*Remembering that in an interface, each (Tab) corresponds to a table. When we add more than one tab in the same interface, the relationship between the tables is created automatically. In the example discussed, it was necessary to add an extra field (id_lnk) in the dependent table to enable the creation of the relationship between the two tables. This extra field is also created automatically.

Creating relationships using the SmartBuilderTool

The order in which the tabs are created defines which table will match (1) and which will match (many) in the relationship. The tab that is created first will be the (1), and the tab that is created later will be the (many) in this relationship.

Thus, to implement the interface for registering employees and dependents in the example above, creating a relationship between the two tables as shown in (A), we must first create the Employees tab and then the Dependents tab as shown below.

The relationship between the two tables is created automatically, as well as the extra field used to establish this relationship, although this field is not visible.

In the example in the figure above, each time a record is selected in the (Employee) tab, the application automatically searches for related records in the (Dependents) tab. As we can see, the record corresponding to the employee Joshua R. Williams was selected in the (Employee) tab, while in the (Dependents) tab, the application filtered among all the records contained in the table (Dependents) only those related to this employee. The application does this automatically.