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:


integer, number, and single-choice-integer

0 and null are false, everything else is true


empty string and null are false, everything else is true


null (no selection) is false, everything else is true


null is false, an object is true


null is false, object is true

multiple-choice and multiple-choice-integer

null and empty selection is false, any selection is true


null and false are false, true is true


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.

<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 how-if="selected_province" bind="selected_city" query="selected_province.cities" label="City" required="true" />

<info show-if="city" label="You selected" >{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)

<var name="is_technician" type="boolean" />
<var name="is_salesperson" type="boolean" />

    <button show-if="is_technician" label="Job Cards" icon="icons/job_cards.png"  />
    <button show-if="is_salesperson" label="Sales Quotes" icon="icons/sales_quotes.png" />
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.

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
<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 show-if="false" label="User Location" bind="user.location" />

Last updated