Show / Hide UI Components
JourneyApps supports dynamically showing and hiding UI components in mobile apps. This is useful for use cases like:
  • Conditionally showing input fields based on a user's previous inputs (for example, "If you are married, fill in your spouse's details")
  • Showing different menu buttons on the main screen of the app depending on the user's "role" (for example, only managers see an Administration section)
  • ... etc.

How to Show/Hide Components

In short, most view components (see Supported Components below for full details) support a show-if or hide-if option in the View XML that controls whether the component is hidden or shown. show-if or hide-if can either be a literal boolean value (true or false), or it can specify a variable, parameter or field that can be a string, number, object, etc. that evaluates to false or evaluates to true (see below for full details).
If a component has a required="true" validation specified, but it is hidden, the validation will be ignored/skipped.
If you use a variable or field for show-if or hide-if to control visibility, you can dynamically change the value of that variable/field in order to dynamically toggle the visibility of a component (examples are provided below).

Supported Components

Any component can have a show-if or hide-if option, with the following exceptions:
  • sidebar itself can't be hidden, but individual sidebar items may be hidden
  • menu - either the entire menu, or individual buttons may be hidden
  • capture-coordinates - will still capture a location in the background

Valid Arguments to Determine Showing/Hiding

show-if or hide-if can either be a literal boolean value (true or false), or it can specify a variable, parameter or field that can be a string, number, object, etc. that evaluates to false or evaluates to true
The default JavaScript behavior is used to determine whether something evaluates to false or evaluates to true:
Type
Behavior
integer, number, and single-choice-integer
0 and null are false, everything else is true
text
empty string and null are false, everything else is true
single-choice
null (no selection) is false, everything else is true
objects
null is false, an object is true
location
null is false, object is true
multiple-choice and multiple-choice-integer
null and empty selection is false, any selection is true
boolean
null and false are false, true is true

Examples

Example - Hide/Show Inputs Based on Prior Input

In this example, we have a dropdown list to select a Province, and a dropdown list to select a City within the selected Province. The dropdown list for the City only shows once the user selected a Province. We also show a "You selected:" status message when the user selected a city.
XML
<var name="provinces" type="query:province" />
<var name="selected_province" type="province" />
<var name="selected_city" type="city" />
<object-list bind="selected_province" query="provinces" label="Province" required="true" />
<object-dropdown bind="selected_city" query="selected_province.cities" label="City" required="true" show-if="selected_province" />
<info label="You selected" show-if="city" >{selected_city}</info>

Example - Show or Hide Based on User Role

In this example, a single mobile app will be used by both Salespeople and Technicians at a company. However, Technicians should only have access to Job Card related functionality, whereas Salespeople should only have access to Sales Quote related functionality. We accomplish this by having two menu buttons on a view that show or hide depending on what the user's role is (we use an single-choice to store each user's role)
XML
<var name="is_technician" type="boolean" />
<var name="is_salesperson" type="boolean" />
<menu>
<button label="Job Cards" icon="icons/job_cards.png" show-if="is_technician" />
<button label="Sales Quotes" icon="icons/sales_quotes.png" show-if="is_salesperson" />
</menu>
JS
function init() {
// 'role' is a single-choice on the 'user' object where 'technician' = Technician and 'salesperson' = Salesperson
if (user.role == 'technician') {
view.is_technician = true;
view.is_salesperson = false;
} else if (user.role == 'salesperson') {
view.is_technician = false;
view.is_salesperson = true;
}
}

Example - Trigger Show/Hide From JavaScript

This example shows how we can dynamically control the showing/hiding of components from JavaScript/TypeScript. If the user presses a button, we hide or show the heading above the button.
main.js
function init() {
// initially the heading will be visible
view.hide_me = false;
}
function hideMeShowMe() {
if (view.hide_me == false) { // if the heading is visible,
view.hide_me = true; // hide the heading
} else {
view.hide_me = false; // show the heading
}
}
main.view.xml
<var name="hide_me" type="boolean" />
<heading hide-if="hide_me">I will be hidden when the user presses the below button!</heading>
<button label="Hide/Show Heading" on-press="hideMeShowMe" />

Example - Background GPS Capturing

Note: The visibility of a GPS component cannot be dynamically controlled. It must be either visible or specifically hidden (see below).
Normally, a capture-coordinates component in JourneyApps will show a map to the user indicating what GPS location is being captured. However, often you want to capture a GPS location in the background without displaying a map to the user. Hiding the component will cause it to continue capturing a GPS location in the background.hint
<capture-coordinates label="User Location" bind="user.location" show-if="false" />
Copy link
On this page
How to Show/Hide Components
Supported Components
Valid Arguments to Determine Showing/Hiding
Examples