Control visibility (condition to hide)

This is an example of how to use dependant fields and condition to hide in order show the the End-user different controls in the user step based on what has previously been selected.

Ensure that Allow Dependencies is set to true for the user step. The user step must allow dependencies for this functionality to work properly.

Create an App with steps and input data

1. Create a new Application in an Application package and open it in the Designer.

2. Add a User step in the App.

3. Add a Script step and connect it to the User step with a data arrow.

4. Add the following script to the Script step and set its target variable to items.

let perishable = [{name: "Ice Cream", category: "perishable"}, {name: "Lettuce", category: "perishable"}];
let nonPerishable = [{name: "Canned Beans", category: "non-perishable"}, {name: "Sugar", category: "non-perishable"}];

return perishable & nonPerishable;

Create and connect controls

• Check the Allow Dependencies checkbox in the User step General section.

• Create a List selection control in the user step.

  1. Set Source to be items.

  2. Set the Prompt to be What type of product are you receiving?.

  3. Set the Large Row Text to be {name}.

  4. Set the Target Variable to be item.

• Create a Date input in the user step.

  1. Set the Prompt to be Expiration date.

  2. Set the Condition To Hide to be {item.category != "perishable"}

  3. Set the Merge Behavior to keep my local changes.

• Create a Text input in the user step.

  1. Set the Prompt to be Storage Requirements.

  2. Set the Condition To Hide to be {item.category = "perishable"}

  3. Set the Merge Behavior to keep my local changes.

Test the user step with keep my local changes

1. Save the Application.

2. Start the Application in any client.

3. Open the list selection and select Ice Cream.

   1. Notice that the date input is now being shown as the chosen option category is perishable.

   2. Notice that the text input is hidden as the chosen option is perishable.

4. Set a date in the date input.

5. Open the list selection and select Canned beans.

   1. Notice that the date input is hidden as the chosen option category is not perishable.

6. Open the list selection and select Lettuce.

   1. Notice that the date input is now being shown as the chosen option category is perishable.

   2. Notice that the date input contains your previous input as the control has been set to Keep my local changes.

Test the user step with discard my local changes

1. Open the Application in the Designer.

2. Open the User step.

3. Set the date input Merge Behaviour to Discard my local changes.

4. Save the Application.

5. Start the Application in any client.

6. Open the list selection and select Ice Cream.

   1. Notice that the date input is now being shown as the chosen option category is perishable.

7. Set a date in the date input.

8. Open the list selection and select Canned beans.

   1. Notice that the date input is hidden as the chosen option category is not perishable.

9. Open the list selection and select Lettuce.

   1. Notice that the date input is now being shown as the chosen option category is perishable.

   2. Notice that the date input have discarded your previous input as the control has been set to discard my local changes.