Use data binding and form relationships with custom forms

Data binding is useful for applying control classes (e.g., spinners, date / time pickers...) to form elements. Custom forms can also be linked to other custom forms and auto-populate when information is entered into a corresponding form. This article details how data binding and form relationships are configured.

Prerequisites

• Importing HTML forms to FocalScope's custom form repository
• Creating custom (HTML) forms in FocalScope

Tutorial

Creating data bindings on form elements

After creating or importing your custom form, create a data binding on an element as follows:

1. Click or highlight a suitable element
2. Click the [Data Binding] button (highlighted in red)
3. In the [Data Binding] pop up (highlighted in blue), select a class for the element. Options: date, time, spinner, lookup. Please note, the lookup class requires a master-detail relationship between at least two forms, namely, a master and a detail form
4. Continued in next section...

Figure 1 - Creating a data binding on an element

Creating a master-detail relationship between forms

Form relationships comprise of a master form and one or several detail forms. The master form is where all data entered into the detail forms will collect automatically. To create a master-detail relationship, do as follows:

1. Open the detail form and double-click the text field that will be referenced by the master form
   1. In the [Text Field Properties] pop up, note the name of the field
2. Open the master form, click the field that will received the data from the referenced field in the detail form and click the [Data Binding] button
   1. In the [Data Binding] pop up, select the detail form in the left [Data Source] dropdown list; in the right dropdown list, select field as noted in the previous step
   2. In the [Class] dropdown list, select [lookup]
   3. Click [Ok], and [Save] to save changes. The master-detail relationship has now been created
3. Repeat steps 1 & 2 for other fields that the master form has to reference from detail forms
4. Continued in next section...

Figure 2 - Creating a master-detail relationship

With the data bindings and master-detail relationship configured, the [Master form] is ready to use.

1. When the element with a lookup data binding is clicked, the detail form will load as per the master-detail relationship configuration
2. An agent then enters data into the referenced field (in this case the [Detail from data] field)
3. The master form auto-populates itself with the data entered into the referenced field(s) in the detail form

Figure 3 - Fully functional data binding and master-detail relationship

Additional Information

Setting up a custom (HTML) forms folder