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

• 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.

main.view.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 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)

main.view.xml

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

<button-group>
    <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" />
</button-group>

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