FORM ELEMENTS (BASIC)

Features and properties of form elements (Basic)

Text Box Form Element

It is a text box element field where you can enter text (Alphanumeric values) in it, and it has five sub-categories.

Text Box categories

The text box form element has the following categories.

1. Text Box
  • This element field will store the string values.
    E.g., it will store values like User Name.
2. Text Area
  • This element field will store the string values.
    E.g., it will store values like an address.
3. Email Id
  • This element field will store only emails.
4. Phone Number
  •  This element field will store only Phone numbers.
5. Rich Text
  • Rich Text is an editor is used to create a document; it is the same as a word document.

Text-Box Properties

  • Field Name: It is a unique name for the field element.
  • Label Name: It will set the label for the element field, and it can be the same as the field name.
  • Help Text: Help Text is a helpful tip that you want to show the user who uses the application, i.e. when you put the cursor over the element, it displays a help text.
  • Default value: It is to set a default value for the field.
  • Hidden Field: When you set the element as a hidden field, it will not display on the application.

  • IsEnable Scanner: It will allow you to scan a QR code/ Bar code from that From element field in mobile app.
  • Validation Settings: This ensures that the data inserted into an application element satisfies defined formats and other input criteria.
  • Required Field: If you set an element as a required field. It means that it is a mandatory field.

  • Length Validation: Length validation has two values.

        Maximum Value and Minimum Value.

  • You can set length validation to an element.

 For Example: you can set a validation to the text box field length as follows.

  • Minimum value=3
  • Maximum value=6

So you can enter a minimum of 3 characters and a maximum of 6 characters in that field.

  • Pattern Validation: Patterns are regular expressions used to implement a specific element's validity when data is collected. For Example, there are several validation types for the Text Box element, as shown in the Validation Pattern Pop-up window. Additional validation patterns can be modified and customize the validation of an error message.

 

Caution! : If you change the category in properties for the form elements, Field name and label name will not change.

Important Note! : Properties like Field Name, Label Name, Help Text, Default Value, Required field and Hidden Field has the same feature as in the Name element and it is the same for all the Basic element fields.

Number Form Element

This Number element field is to store only numeric values.
For Example, it stores values like Phone number, cost of an element.

Number-Properties

Validation settings: This ensures that the data inserted into an application element satisfies defined formats and other input criteria.

  • Pattern Validation: Patterns are regular expressions used to add validity to the field as data is collected.
    For Example: there are several validation types for the Text Box element, as shown in the Validation Pattern popup window. You may change different validation patterns and customize the validation to get an error message when you fail to meet the validation requirement.

  • Range Validation: Range validation has two values.

        Range From*
        Range To*

If you set the validation range to the element field, values entered in the element field must be between the given limits.

Date Form Element

This Date form element is where you can enter date in it, and it has four categories.

1. Date

The date element is to store values of only a date.

E.g.: It is to store values like date of birth, date of joining.

2. Time

The Time element is to store only time values.

E.g.: It is to store values like departure time, arrival time

3. Date time

The Date time element is to store both date and time values.

E.g.: It is to store values like departure date and time, arrival date, and time.

4. Date Range

The Date Range element is to select Dates for a specific Range (from a date and to date)

Date-Properties

  • Default Value: This field is to set a default value. It has two options,
  • Current date – you can select this option to put the current date, i.e., when you add a record, the current date sets as the default date.
  • Choose date - you can select this option to choose a date, i.e., the date you choose sets as a default date.

Checkbox Form Element

This Checkbox form element is to store true/false values. Use it when you have a list of values where you need to select multiple options. It has two categories.

  • Checkbox:

When you select this category, it displays a list with empty check boxes ☐. Once you check the value, it shows a tick mark in the box ☑.

  • Switch:

For example: it stores values like languages known by a person, Skills. A person may learn only one language or more to select whichever languages he knows when using check boxes for the languages.

Check box-Properties

  • Select by Default: When you select this, the Quixy Platform takes the default element field value as true.

File Upload Form Element

This File Upload element field is to upload an image, document, audio, video files.

File Upload-Properties

Validation Settings:  Ensure that data inserted into an application element satisfies defined formats and other input criteria.

  • File Size: This is to set the maximum size of the file that you can upload.

  • File Type: This is to define the type of file you can upload, and It has four pre-defined file types from which you can select a file type.
    • Image
    • Document
    • Audio
    • Video files

File Uploads using S3 (Security Feature)

  • Whenever the user submits a record with the File Upload element, the system would fetch the S3 Bucket details with the Access key & secret key.
  • The system verifies the keys, gets the relevant bucket details, and then stores the file attached in the organization's bucket.
  • You should only access the S3 bucket through API calls from applications or with proper access or a secret key.

Example:

  1. Develop an application with the File Upload feature fields in the selected organization, and then create an S3 bucket for the organization. Rest encryption is to be enabled using the AWS Key Management System. The device generates and stores the access key and the secret key for accessing the S3 bucket.
  2. Log in with your organization's user details.
  3. Open the Add Record page for the created application.
  4. The actor can attach the file to the file upload field and enter all the values to the form.
  5. Submit the app.

To Get File Uploads from S3 Bucket of the organization( Security Feature)

  • Whenever a GET call is activated to retrieve file uploads, the device will retrieve S3 Bucket information with the Access key & Secret key.
  • The system verifies the keys and retrieves the relevant bucket details associated with the organization.
  • The system retrieves the uploaded file associated with the given input criteria and displays it in the app.
  • You should only access the S3 bucket through API calls from the same organization with proper access and secret key.

Example:

  1. Create an application with Data table reference output as File Upload field in a selected organization, and then the S3 bucket is to be created for that organization. Encryption is enabled using the AWS Key management system.
  2. The system generates and stores the Access Key and Secret Key for accessing the S3 bucket.
  3. Log in with the organization's user details.
  4. Open the Add Record page for the created app.
  5. The actor can able to select the input field for the data table reference added.
  6. The system displays the file upload against the given input from the S3 bucket of this organization and displays it in the app.

Radio Form Element

This Radio element field is to store true/false values.

E.g.: It is to store values like Gender, Marital status.

Radio-Properties

  • Choices: Choices are to set the value for the radio button element.
  • Description: Description is to set the description for the element.

Dropdown Form Element

The drop-down element field is to select one or more values from a list of values. It has two categories.

  • Drop-down:

This drop-down is to select only one value from the list of values.

  • Multi-select drop-down
This multi-select drop-down is to select one or more values from the list of values.

Drop down-properties

The drop-down has two types of choices.

  • Custom choices - You need to define the list of choices you want to display in the drop-down.
  • Pre-defined choices – These are the pre-defined choices in a Lookup.

Caution!

In this section below, only the creation of a basic lookup is explained for better understanding. More comprehensive view of creating, editing, deleting a lookup is explained in the other parts of Knowledge Base.

Please refer to those pages later in this Knowledge Base to get more information on lookups.

Lookups

Setup Basic Lookups

A Lookup is a list of values combined and stored as one list.

Example: City lookup will contain a list of Cities.

                     State lookup will contain a list of States.

                     The country lookup will contain a list of Countries.

  • You can select a lookup to place a list of pre-defined values in any drop-down while creating an application.

Create Lookup

  • Go to the Dashboard and click on the Admin Menu, select the database option and select the Lookups option.

  • Lookups page will open on the screen.
  • Click on the Select Workspace.

  • Select a workspace where you want to create the Lookup, and access the Lookup only through that particular Workspace.
  • Click on the Add Lookup.

  • An Add Lookup pop-up is visible on the screen.
  • Enter the lookup name.

  • Click on the Save button, the lookup type is added to the list and displays a toaster message Lookup type added successfully, and it is visible in the Lookups List.

  • Add the Lookup Values.
  • Click on the Lookup Name to which you want to add the lookup values.

  • You can see a Lookup values page open for that particular Lookup, click on the Add Lookup Value(s).

  • Add Lookup Value(s) pop-up opens, as shown below.

  • Add the Lookup values, as shown below.

  • Click on the Add button to add a new field to the list, as shown below.

  • Click on the Save button to save the values.
  • You can see the lookup values, as shown below.

Calculate Form Element

The calculate element field is to store the calculated value to a formula applied in fields.

Calculate-Properties

  • Calculate type: you can see two types of calculations in the drop-down.

  • Number - Formula applied on number fields.
  • String - Formula applied on string fields.
  • Create Formula Link: you can click on this link to create a formula in the Create Formula pop-up window.

Create Formula for Numbers

Calculate Minimum, Maximum, and Average values:

Select Number element fields in Calculate Formula to perform Minimum, Average, and Maximum Functions.

Maximum Value

  • In the Form Builder, add the Calculate element field to the form, and select calculate type as Number.

  • Click on the Create Formula link.

  • A Create Formula pop-up window displays on the screen to create a formula.

  • Select the Max function from the functions list.

  • Max function adds to the blank space.

  • Select the Number Elements among which you want to get the maximum number.

  • Separate the Number Elements in the Formula with a comma (,).

  • For Example: MAX = MAX (Number1, Number2, Number3).
  • Create the Formula and click on the Save button to save the Formula.

  • The Formula will get saved and will be visible in the properties, as shown below.

Note:

  • Example: Suppose Number 1 =100, Number 2=299, Number 3=5000.Then the result for MAX Function Value should be 5000.

Ans. MAX = 5000

  • If you create Max Function for a Column in the Grid, Then MAX function returns the largest value among the values in the selected column from grid.
  • For Example: The MAX Function should return the largest value among the values in the selected column from Grid.   MAX= MAX (Number 1)

Ans. MAX=600

Number 1

Number 2

200

444

400

212

300

500

600

489

544

939

 

Minimum Value:

  • In the Form Builder, add the Calculate form element to the form.

  • Here, you can apply the calculation formula on grid elements.
  • Add form elements to the Grid.
  • Add the calculated element to the form to calculate the Minimum value.

  • In the calculate Properties, select Calculate type as Number.
  • Click on the Create Formula.

  • Create Formula pop-up window is displayed.

  • Select the Min function from the functions list.

  • Min function adds to the blank space.

  • Select the number elements among which you want to get the minimum number.
  • For example, we take a grid element to find the minimum number from the grid element's list of values.

  • If you have more than one element in the Formula, separate the elements with a comma (,).
  • The Formula must end with ).
  • You can also edit the formula by placing the cursor on the formula.

  • Create the Formula and click on the Save button to save the Formula.

  • The Formula is visible in the calculated element properties window.

Note:

  • Here, in the above Example: Suppose Number1 =100, Number2=299, Number3=5000.Then the result for Min Function Value should be 5000.

Min = 100

  • If you create Min Function for a Column in the Grid, Then Min function returns the minimum value among the values in the selected column from grid.
  • For Example:     The Min Function should return the largest value among the values in the selected column from Grid.   Min=Min (Number1)

Min=200

Number1

Number2

200

444

400

212

300

500

600

489

544

939


Note:

You can able to use calculate element inside another calculate element.

  • Example: Suppose Number1=100, Number2=299, Number3=400, Number4=5000.
  • Average (Calculate Field) = AVG (Number1, Number3) = 250
  • Maximum (Calculate Field) = MAX (Number3, Number4) = 5000
  • Minimum (Calculate Field) = MIN (Average, Number2) = 100
  • Maximum (Calculate Field) = MAX (Minimum, Average) = 250

 

Create Formula for a String

  • You can combine any two elements and create a formula.

Example: Employee Name + Employee phone number.

SubForm Form Element

This SubForm form element is to add another form within the application form.

Sub Form-Properties

  • Description: The description field is to set a description for the element.
  • You can add elements to the subform as per your requirement by clicking on Add Elements to SubForm in the subform properties.
  • Click on the Add Elements to SubForm, subform window opens as a form builder as shown below.

  • You can build the sub-form according to your requirements, in the same way you build an application by dragging and dropping elements into the application builder form.
  • After adding elements to the subform, click on the Back to Main Form.

Grid Form Element

The grid element field is just like a table inside an application. It will contain the form elements, the form elements will be the header names of the grid.

Grid-Properties

  • Add Grid Elements: This link will redirect to another form builder page specific to the grid element. You can add element fields to create a grid table.

  • The form elements that you add to the grid table can be seen as headers in the grid table to capture the same application respective to field elements.
  • You need to click on the preview to look at the grid table, as shown below.

  • You can see three buttons attached at the right corner of the grid table in the preview section, i.e., Add Record, Download to Excel, Upload Excel.

Add Record

  • Click on the Add Record button to add a new record manually.

  • A new empty row adds to the below-existing Grid, which allows the user to add new values to the grid elements manually.

  • You can add as many rows as you want to base on the requirement by clicking on Add Record.

Download to Excel

  • Click on the Download to Excel button to get the data from the grid table to an excel sheet.

  • A Download Excel pop-up is visible on the screen, as shown below.

  • You can see two buttons in the pop-up, Download All Data and Download Sample.
  • You can click on the Download All data button to download the Grid into an excel sheet with all the data captured into the excel sheet.
  • You can click on the Download Sample button to get a sample excel sheet.

Upload Excel

  • To upload an excel sheet, you need to download the sample grid file, use the Download to excel option, add the data to the excel file, and then upload it using the Upload Excel option.

Caution! : The header names of both the grid table and the excel table must be same.

  • Click on the Upload Excel button.

  • You can see an open window pop-up on the screen to select the excel file, as shown below.

  • Select the excel file and click on the open button to upload.
  • The data gets uploaded from the excel sheet to the Grid.

  • Disable Add: You can check this option to disable the Add icon from the grid table in the preview, and you cannot add records to the Grid manually.
  • Check the Disable Add checkbox, as shown below.

  • The grid table can be seen without the Add icon, as shown below.

  • Disable Delete: Once you check this option, the Grid records will not delete because you disabled the Grid's delete option.
  • Check the Disable Delete checkbox.

  • The grid table can be seen without the Action field, as shown below.

  • Disable Upload: You can check this option to disable the Upload Excel button on the grid table in preview.
  • Check the Disable Upload checkbox.

  • The grid table can be seen without Upload and Download icons, as shown below.

Form Builder Elements for Grid

Form Builder Elements are used in Grid to create a grid table.

  • The element fields in the application Form Builder and the grid Form Builder are the same, except Serial Number and Default Column in Basic Elements.

Important Note: You can refer to the Application Form Builder to get an understanding on the element fields and their uses.

Serial Number

This element is to set the serial number for the records in the Grid. It automatically updates the serial Number to the grid records.

Properties for serial Number:

Default Column

It has a list of values, you can set default values to the grid element, but it is difficult to get as many rows as the Number of default values set.

  • Field Name: Field Name is a unique name for the app elements.
  • Label Name: Label Name is to set the label for the element.
  • Custom choices - You need to define the list of choices you want to display in the drop-down.
  • Pre-defined choices - These are the pre-defined choices in a Lookup.


  • Select Default Value: This field is to set the default value for the element.
  • Hidden Filed: You can check this option to hide the element field.