How to hide / show screen elements

Mobsted platform allows to conditionally hide/show elements on the screen. For instance:

• dynamic forms with question branches and screen elements varying basing on user behavior [Step by step example →]

• UI / UX elements visually changing their style and content depending on previous user actions [Step by step example → ]

____________________________

DYNAMIC FEEDBACK FORM

Here we have a feedback form. We show the second question depending on the answer to the first one, using conditional visibility. As you can see, only first two selections show the second question.

Application user view:

How to set it up:

1. Drag and Drop Text element to the device screen emulator

2. Fill in it's Text field with How was your first experience with Mobsted?

3. Drag and Drop Radio Buttons element

4. Set its' Backendname to Experience

5. Add new lines of choices for Radio Button and fill in labels (what's shown) and values (if selected):

1. Drag and drop another Text element below Radio Buttons element

2. Fill in its' Text field with What did you like the most?

3. Below Text element - drag and drop Checkboxes element

4. Set its' Backendname to Experience

5. Set up its' visibility condition:

   1. Check Hidden box (a default state) in Visibility

   2. Set reference to the above Radio Button's value in Show conditions

      1. #Backendname;Experience# = Excellent OR Good

1. Click Save Screen

2. Click Preview button and check your work.

_________________________________________

VISUALLY CHANGING UI / UX ELEMENTS

In another example - Pizza delivery app has two options for delivery: Express and Regular. Using Variables, we show / hide the buttons with delivery options.

Application user view:

How to set it up:

1. Drag and drop Text element, fill in Text field with Delivery Option Selected: #Variable:delivery#.

1. Drag and drop Button element
2. Name it as Express Delivery

3. Click Actions Tab, choose Add new action and choose Set Variables

4. Click Add item and assign Variable with a name delivery and value to hold Express on button press

5. Set up its' visibility condition:

   1. Check Hidden box in Visibility

   2. Set 3 inputs in Show conditions:

      1. #Variable:delivery# ----- != ----- Express

1. Drag and drop another Button element

2. Name it as Regular Delivery

3. Click Actions Add new action and choose Set Variables

4. Click Add item and assign the same Variable delivery to hold Regular on button press

   1. Set up its' visibility condition:

      1. Check Hidden box in Visibility

      2. Set 3 inputs in Show conditions:

         1. "#Variable:delivery#" ----- != ----- "Regular"

1. Click Save Screen

2. Click Preview button and check your work.

MENTIONED ARTICLES

• Variables
• Constructor elements

RECOMMENDED ARTICLES

• Hashtags