Show/Hide Components Dynamically

JourneyApps supports dynamically showing and hiding view 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 attribute 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 attribute for show-if or hide-if to control visibility, you can dynamically change the value of that variable/attribute in order to dynamically toggle the visibility of a component (examples are provided below).

Please Note: This functionality has been available since version 3.16.0 of the JourneyApps Container on Android, and since version 1.7.1 of the JourneyApps Container on iOS. If you have trouble while trying to use this functionality, please ensure that you've updated to the latest versions of the JourneyApps Container on either Android, iOS or Chrome.

Supported Components

Any component can have a show-if or hide-if option, with these special cases:

sidebar itself can’t be hidden, but individual sidebar items may be hidden
columns can’t be hidden, but items inside can be hidden
menu — either the entire menu, or individual buttons may be hidden
table — either the entire table, or individual rows may be hidden
gps — 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 attribute 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:

`int`, `decimal`, and `enum`	`0` and `null` are false, everything else is true
`string`	empty string and `null` are false, everything else is true
`objects`	`null` is false, an object is true
`location`	`null` is false, object is true
`enum_set`	`null` and empty selection is false, any selection 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.

Code in View XML:

<var name="provinces" type="province" array="true" />
<var name="selected_province" type="province" />
<var name="selected_city" type="city"  />

<list bind="selected_province" collection="provinces" label="Province" required="true" />

<list bind="selected_city" collection="selected_province.cities" label="City" required="true" type="dropdown" 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 enum to store each user's role)

Code in View XML:

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

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

Code in View JavaScript:

// This function is called each time the view is loaded
function init() {
    // initialize any data here that should be available when the view is shown
  
    // 'role' is an enum on the 'user' object where 0 = Technician and 1 = Salesperson
    if (user.role == 0) {
        view.is_technician = 1;
        view.is_salesperson = 0;
    } else if (user.role == 1) {
        view.is_technician = 0;
        view.is_salesperson = 1;
    }
}

Example — Trigger Show/Hide From JavaScript

This example shows how we can dynamically control the showing/hiding of components from JavaScript. If the user presses a button, we hide or show the heading above the button.

Code in View XML:

<var name="hide_me" type="int" />    

<heading hide-if="hide_me">I will be hidden when the user presses the below button!</heading>
<button label="Hide/Show Heading" onpress="hideMeShowMe" />

Code in View JavaScript:

// This function is called each time the view is loaded
function init() {
    // initialize any data here that should be available when the view is shown
  
    // initially the heading will be visible    
    view.hide_me = 0;
}

function hideMeShowMe() {
  if (view.hide_me == 0) // if the heading is visible,
    view.hide_me = 1; // hide the heading
  else
    view.hide_me = 0; // show the heading
}

Please Note: The visibility of a GPS component cannot be dynamically controlled. It must be either visible or specifically hidden (see below).

Example — Background GPS Capturing

Normally, a GPS 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 a GPS component will cause it to continue capturing a GPS location in the background.

Code in View XML:

<gps label="User Location" bind="user.location" show-if="false" />