UiPath Form is a great feature mainly for Attended Automation. The input stage can be transformed to be extremely interactive and easy to use with this amazing feature. I have been fortunate enough to have hands-on this feature since the very beginning and in this tutorial, we will see how can one add a simple and advanced condition using JavaScript on a component.
What are Conditions in UiPath Form
-
Conditions are the rules we want to apply to a component to alter its property. The condition can be applied “to display”, "to hide, “to disable”, etc.
-
You can have the most complex combination of conditions on a component in UiPath Form
-
Basic conditions are simple to use via the dropdown list in the condition Section
-
Advanced Condition on a component can be written in JavaScript, JSON
-
Condition can also be event-based
Why do we need to incorporate conditions?
-
There can be instances in which the form gets unfolded as the user selects the option or enters the data, In such a situation, we can add a condition to the components to display in front of the user only when the corresponding component is selected
-
Condition on Submit button can be useful when we need to enable the Submit button on the basis of a simple logic (all mandatory fields are filled) or a complex logic (combination of fields are filled)
Below is a small example to understand the condition part in UiPath Form.
Scenario:
For Sports Registration, the applicant needs to fill a form and submit it. Registration for Cricket is free of cost but for football the charges are applicable, but if the applicant is less than 18 years of age then the applicant has an option to choose the scholarship he/she wants to apply for and get the scholarship to register free of cost. The slots for Cricket and Football are different.
Below is the sample Form layout:
As we can see the Slots and Scholarship boxes are not by default visible because they should be visible as per the applicant’s selection. So the boxes are hidden and the form will unfold as the user inputs the value
To hide a component, we just need to go to the settings of that and scroll down and check the checkbox that says, Hidden. This will hide that container by default and can be displayed as per the conditions.
The slot will be displayed only when the applicant selects the sports category. So this is where the simple condition will be applied, as per the radio button selection the slots will be displayed.
Below is the way we can put simple condition.
Select boxes component’s Settings → Condition → Set the below values for cricket, and similarly for football
But the slightly advanced part to design is showing the Scholarship option using boxes, when the applicant is less than 18 years of age AND has selected the football radio button.
So in this case the simple condition won’t be helpful as it is not just if (A) → do this Else → do that. Hence, we go for the advanced condition.
We apply the below JavaScript Logic:
if((data.selectSportCategory === 'football') && (data.userAge < '18')){
result = true;
}
else {
result = false;
}
selectSportCategoryy and userAge are the Field Keys for the radio button for "Sport Category selection "and “Enter your age number” input component respectively and are accessed using the data keyword inside the JavaScript editor
About JavaScript Editor in Advanced Condition:
- The editor is quite well built, supports only plain and normal scripting
- We can access all the variables of other components using the
datakeyword - The output should be stored in the result variable
Now in the Logic tab, we need to attach an Action to the Logic. In this case, we need to showcase the boxes for the scholarship that are by default hidden. Below is a dropdown based action area that gives you the option to alter the properties on the basis of the action, in our case on the basis of the value of result
So this was a small example showcasing how to incorporate conditions in UiPath Form for the components and make it more user-friendly and interactive.
Download the sample project used for this tutorial:
UiPathForm_Condition.zip (4.0 KB)
UiPath Forms - Official Documentation
Thank you, hope this helps to understand the basics and get started using the UiPath form to take your input stage on to the next level.
Do share your thoughts/feedbacks/queries.
Happy Automation! 
Cheers!
ashokkarale
naveen.s
Manisha_Ravindra
Sanjay_Bhat
A_Learner
Gowtham_K115
SorenB
J0ska
Nisha_K21
Eric_Alvarado