Validations are the medium through which you can make sure that the app complies with your needs and performs functions as intended. Its goal is to validate whether the user inputs data as per the requirements which are set for the microapp. Validations can range from simply making a field as mandatory to having complex conditions, where these validations come into play when user tries to either Submit the form (i.e. by clicking on Submit button - Refer Submit Form chapter for more information) or Navigate to another page.
In Studio, you can apply either Basic Validations or Advance Validations on any control. We will see how we can apply these two type of Validations in the following section.
These type of Validations are simple to achieve and easy to use, for example, marking a field as mandatory. Whenever you add any control, you can set it as Required, which implies that an user must enter some data in that field before it can be submitted.
How to apply Basic Validation
In DronaHQ Studio, when you build or edit your app, in the Controls tab on the left hand side, click on any control to add that control on the screen, say Text box. Once the control is added, you can change its default settings in the Property tab on the right hand side of the screen. On expanding the Info section in Property tab, you will see a toggle field called “Required”. By default it is set to OFF. To mark a field as mandatory, you need to set this value to ON. The below image shows how to set a field as mandatory
When you add any control on the form, you can put Advance Validations on that control by clicking on either the Conditional Visibility icon
or the Control Validations button.
This will open a wizard having Validations tab.
Using this tab you can apply validation criterias on the desired control. On the Validations tab, you need to select the page on which your control resides. This selection will lead to displaying all the controls on that page in the left pane, showing the Unique Name of the control along with validations counts and the type of the control (if there are no validations applied to the control, validation count will display 0).
To add a validation criteria, select the control and click on Add One button.
Let's say we have an application called Leave Application having fields like a text field where an employee can input its ID say Employee ID, date fields to capture start and end date of the leave application, say, Leave Start Date and Resume Date, a drop down to determine if the leave is a half day or a full day leave, a radio button to select the type of leave, say Sick Leave or Casual or Privilege Leave and a text field to capture the Reason for the leave application. Let’s try to apply Validation criteria on these input fields as following -
- Employee ID - Let’s say, it is mandatory to enter Employee ID. You can set field as “Required” on the Info section after you select the Employee ID control. When the “Required” is set ON, you will see a red colored asterisk (*) sign, next to the visible Label. This validation will ensure that if user does not fill Employee ID and tries to click on Submit button, app will not allow to send data and throw a message stating “This field is mandatory” which is displayed below the field.
- Leave Start Date & Resume Date - Ideally, in Leave Applications, typical criteria for validating dates can be - Leave Start Date should not be greater than Resume Date and Resume Date should not be lesser than Start Date. These criteria may sound simple but need to have extra check, like Leave Start Date can be equal to Resume Date. Hence to apply such criteria, you can use the logical operators in the Validations tab.
Follow the below mentioned steps to apply the validation criteria for Dates -
- Select Leave Start Date control in the left pane of Validations tab. You will see a validation criteria wizard “SHOULD BE” containing a drop down for selecting Conditional Operator, drop down to fetch value from an existing field or a direct value and drop down/text box to input operand and lastly a text field to display Error Message to end user in case the input does not satisfy the given criteria.
- Select Operator has options like - Equal to, Not Equal to, Before, After, etc. In our Leave Application example, we want to set the criteria - Leave Start Date should not be greater than Resume Date, which implies that Leave Start Date can be less than or equal to Resume Date, therefore, in the operator we should select Before, select Field in the operand drop down and select Resume Date operand. We should put a meaningful error message which will be displayed to the end user if input data does not satisfy this criteria. Let’s put an error message as “Leave Start Date cannot be greater than Resume Date”. Thus, this criteria is built & evaluated as, Leave Start Date SHOULD BE Before Field Resume Date else display error message Leave Start Date cannot be greater than Resume Date
But, this validation is incomplete yet since it does not satisfy input data where Leave Start Date & Resume Date are same. To consider this scenario, please follow the next step.
- You can put multiple validation criteria on a control by using logical AND/OR operators. This can be achieved by either clicking
- An AND operator will bind the conditions together and if both the conditions satisfy the criteria, it evaluates to true. Where as an OR operator will evaluate to true if any of the condition is true.
- Now, in our example Leave Application, we need to check if Leave Start Date is Before Resume Date OR Leave Start Date is equal to Resume Date. This way the validation criteria evaluates to true if either of the condition is satisfied. Hence the validation conditions look like this -
- On the similar basis, we can put validation conditions on Resume date as well.
- Once you are ready with your Validations, click on Save button to save your criteria. If you want to remove any condition, then you can simply click on the cross button next to the validation condition and save your changes.
- Once you Save your changes, you can preview the validations by clicking on the Preview button. If everything seems fine, you can publish and make the app live.
You can also mark all fields as “Required” in their properties to make them as mandatory input. Once all the validations are in place and as desired, you can test it by clicking Preview button. When you feel your validations are in place, you can publish the app to your end users.