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.
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" />

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

JS/TS Events

XML Fields (Attributes)

Last modified 26d ago