view

Overview

view is a special XML component which is similar to the body element in HTML. All variables and UI components are contained within the view block. It is required within each view.xml file, and no code (apart from the file's XML declaration) may exist outside of it.

Basic Example

main.view.xml

<?xml version="1.0" encoding="UTF-8"?>
<view title="My first view">
    <!-- Your view variables and UI components go here, example: -->
    <var name="first_name" type="text:name" />
    
    <text-input label="First Name" bind="first_name" required="false" />
     
</view>

Standard Attributes

title

Optional

Type: string

Default: unset

Text to appear as the title of your view. It can be a format string or returned from a JS/TS $:function to make it dynamic.

Given the basic example above, the title will appear on a device as follows:

Advanced Attributes

mode

Optional

Type: back | close

Default: back

By default a view will show a "back" icon in the top left corner, indicating to the user how to navigate back to the previous view. This can be overwritten to show a "close" icon when setting mode="close" on the view.

my_jobs.view.xml

<?xml version="1.0" encoding="UTF-8"?>
<view title="My jobs" mode="close">

</view>

mode="back" (default)

mode="close"

on-back

Optional

Default: unset

Triggered when: The user presses the built-in back button on a view (situated in the top-left corner of a view)

Event parameter: None

on-back is an event that calls a JS/TS $:function. By returning false, navigation can be prevented.

See more details:

JS/TS Events

main.view.xml

<view title="Home" on-back="$:onFunction()">    
    ...
</view>

main.js

function onFunction() {
    notification.info("on-back was triggered");
}

Further reading

Also see this section about overriding the default built-in back button behavior.

on-navigate

Version compatibility

on-navigate was introduced in version 4.58.4 of the JourneyApps Container.

Optional

Default: unset

Triggered when: The user navigates to another view using navigate.link or navigate.replace

Event parameter: None

on-navigate is an event that calls a JS/TS $:function. This function should return true to subsequently navigate, or false to prevent navigation.

See more details:

JS/TS Events

main.view.xml

<view title="Home" on-navigate="$:onFunction()">    
    <button label="My Jobs" on-press="$:navigateJobs()" validate="false" />
</view>

main.js

function onFunction() {
    notification.info("on-navigate was triggered");
    return true;
}

function navigateJobs() {
    navigate.link('my_jobs'); // This executes if the on-navigate function returns true
}