Input Box

What is it?

The input box widget allows you, the user, to enter values or data conveniently. When you add this widget to a form, the data you enter is saved separately for each unique instance or copy of the form. This way, every form iteration keeps its own set of entered data, ensuring that information is stored accurately and individually for each form version. 

How and When to use it? 

To add a new Input Box to your page, simply drag and drop the “Input Box” widget from the left-hand side of the page screen to the design area of your page. 

To change the name of the input box, tap on the placed widget to reveal the blue Quick Settings panel. By default, the name is displayed on the widget’s left side. 

How to configure it? 

1. Drag an Input Box into the Form

2. Click the Input Box and then click "Widget Property Settings" button to open Widget Property Settings. 

3. The General Tab is shown, we will demonstrate how each property is used. 

1.  Name 

For example, we create an Input Box, look through the Name property under Basic in the Widget Property Settings. Users can change the name of the Input Box with the Name property,  “Remarks” for example. 

The design time and the runtime display are shown below: 

2. Display Name

User may change the label of the Input Box with Display Name property. Compared to the Name property, the Name property is used in the configuration, while the Display Name is what the user will see in runtime. 

For example, we create 2 Input Boxes, look through the Display Name property under Basic in the Widget Property Settings. 

The design time and the runtime display are shown below:

Notice that in the runtime, users will see display names “Variable 1” and “Variable 2” of the input boxes. We can also set calculation formula for “Destination” equals to “Source”:

Notice that the name (rather than display name) is used in the configurations. 

To conclude, the Name property is used in the configuration, while the Display Name is what the user will see in runtime. 

3. Description

It provides a space for app designer’s remark purpose. 

For example, we create an Input Box, look through the Description property under Basic in the Widget Property Settings. 

4. PlaceHolder

The PlaceHolder property provides a short hint for users to fill in the input box. 

For example, we create an Input Box and rename it as “Phone Number”, look through the  PlaceHolder property under Configurations in the Widget Property Settings. 

User may fill in the PlaceHolder.

The design time and the runtime display are shown below:

5. Textbox 

User can enable multiple lines of Input Box for user to input. 

For example, we create an Input Box and rename it as "Remarks", look through the Textbox property under Configurations in the Widget Property Settings. 

By default, the Input Box provides a Single Line text box that allows users to type in a single line of text. The design time and the runtime are shown below: 

Users may change to Multiple Line if they want to write in multiple lines. 

User may drag the bottom right of the input box to resize the size of the input box. The adjusted design time and the runtime display are shown below:

6. Data Type 

User may change the data type of the Input Box according to the characteristics of variables. 

For example, we create an Input Box, look through the Data Type property under Configurations in the Widget Property Settings. 

6.1 String

Keyboard Type: It changes the layout of the user’s keyboard according to the keyboard type. 

6.2 Integer

Example: 

6.3 Decimal 

6.4 Percent

7. Scanner Mode In Mobile 

It allows user to scan a barcode or QR code for a faster entry process. 

For example, we create an Input Box, look through the Scanner Mode In Mobile property under Configurations in the Widget Property Settings. 

Users can enable the Scanner Mode in Mobile. 

In the runtime, users may click the right of the input box to scan the QR code or barcode. The runtime display are shown below:

8. When Value is From Other Page

It determines whether the user can edit the value of the input box if the value is from another page. By default, the value is “Normal”, which enables user to edit the value. 

For example, we create a Parent Page and a Child Page, and both of them will have an Input Box “Order Number”. We create a button in the Parent Page that transfers the order number value from the “Parent” to the “Child”. 

For “Order Number (Child)”, look through the When Value of From Other Page property under Configurations in the Widget Property Settings. 

User can change it to “Looks Read-Only” 

The runtime display is shown below: 

9. Check Updated Value

It provides a validation for values with source value or default formula before storing into the  database. If the user wants to save a value which is different from the source value or default formula value, then the system will display a warning message (shown below) and require the user to provide the appropriate value before saving the data. Users can click “Retrieve” to replace the edited value with the calculated value. 

For example, we create 3 Input Boxes named “A”, “B” and “Sum”, where the default calculation formula of “Sum” is the sum of  “A” and “B”. We also create a Form Table to store the value of the variables.

For “Sum”, look through the Check Updated Value property under Configurations in the Widget Property Settings. 

User can enable the Check Updated Value: 

For example, we have “A” and “B” equal to 1 and edit the value of “Sum” to be 3. While the calculated value should be 2, when we press the “Save” button, the warning message will be displayed to remind the user to retrieve the updated value before saving to the Form Table. Pressing the “Retrieve” button will update the value of the “Sum” in the form. 

10. Recalculate When Open Record

The Recalculate When Open Record allows the widget to recalculate its values based on its calculation formula or Page Data Source while opening the record. 

For example, we create 3 Input Boxes named “A”, “B” and “Sum”, where the default calculation formula of “Sum” is the sum of  “A” and “B”. We also create a Form Table to store the value of the variables. 

Notice that in the Form Table, there is a record showing that A, B and Sum are equal to 1, 2 and 3 respectively, which follows the default formula: Sum = A+B.  

For the Input Box “Sum”, look through the Recalculate When Open Record property under Configurations in the Widget Property Settings. 

If we want to recalculate the widget using the value based on its calculation formula or Page Data Source, we can enable the Recalculate When Open Record: 

For example, we create another record in the Form Table showing “A” and “B” equal to 1 and 2 respectively, and we edit the value of “Sum” to be 5 (instead of 3).  

With the Recalculate When Open Record property, when users open record in the Form Table, it will trigger the recalculation for “Sum”.

When users open record, the value of Input Box “Sum” is 3, which follows the default calculation instead of the manual input because of the recalculation, while we can see the original record of “Sum” in the Form Table.