Adding Rules on Controls

This article is now deprecated. Refer to the article here for detailed information.

This article will guide on adding conditional visibility rules on controls

Many times we would come across a business requirement where we would want to hide some fields and show them only when the user selects some specific options on the screen. These cases can be customized in the Conditional Visibilities tab for that control. Basically, Conditional Visibilities are used to show/hide controls basis for some user action. To being with, let’s first add an additional control on the screen, say Date control, which will be by default hidden (that is, the user will not be able to see the field whenever the screen opens for the first time and should appear when the user types in the text “Date” in the textbox). To mark a control as hidden, in the INFO section of the Properties tab, click on the option – Hidden. This will grey out the control on the screen and will show up the text HIDDEN on the control. Now to add our visibility condition on the control, select that control on the screen on the app builder page and click on the Conditional Visibility icon (the eye). This will again open the Conditional Visibilities and Validations Wizard. On the Conditional Visibility tab, select the screen the way we did it for Validations. Once the screen is selected, click on the Add New Condition button to add visibility criteria. Here you will see 3 blocks, one to apply the visibility conditions, and then the 2 blocks one for performing actions when the condition evaluates to true and one, when the condition evaluates to false. Now to apply the visibility condition – Show Date control when the textbox contains the text “Date” – we need to select the control from the list of controls on which conditions will be applied – i.e. the text box. Then select the operator Contains and Value in the corresponding dropdowns and enter the text “date” in the value box. Then in the If Conditions True block, click on the Add More button to add the corresponding field to show/hide if the condition evaluates to True. So, we would select the operator Show and select the field Date in the field dropdown. To add to it, we should ideally hide the Date control if there is no text like Date in the text box, in such case we should add the option in False block to hide the Date control. Once you feel your conditions are put up correctly, you can save it, close & test it in preview. Let’s try to type in some text say DronaHQ, here we cannot see the date control. Now let’s add Date in the text box; the date control is visible now. This way the conditional visibility works.

If these conditions require any modification then you can again open the wizard edit the conditions and save the changes. This way you can add/edit Conditional Visibility & Validations on any controls in Studio.