view
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.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>
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.
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"
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
See more details:
main.view.xml
<view title="Home" on-back="$:onFunction()">
...
</view>
main.js
function onFunction() {
notification.info("on-back was triggered");
}
Further reading
Version compatibility
on-navigate
was introduced in version 4.58.4 of the JourneyApps Container.Optional
Default: unset
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:
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
}
Last modified 9mo ago