Call JS/TS Functions from XML
Container Compatibility
This feature is compatible with v4.19 and later of the JourneyApps Container

Introduction

Developers can call JavaScript or TypeScript functions from a wide variety of places in the view XML. The JS/TS functions that are called can return values which can be used to define the visibility of components (in conjunction with show-if and hide-if), populate tables with custom data (e.g. translated data or data aggregates), or even define the content and states of sidebar items.
This is the basic syntax for calling a function defined in the view's JS/TS from the XML.
$:myFunctionName(myParameter)

What goes on in the background

Everything after the $: gets evaluated as if it were part of that view's JS/TS. This also means that:
  1. 1.
    You are able to execute single lines of JS from the XML, e.g.
<label show-if="$:view.someCounter == 3" />
<button on-press="$:dialog('Not implemented yet')" />
2. You are able to call functions from your Shared JS (or App Modules for TypeScript apps), e.g.
<button show-if="$:sharedShowCredentials() === true" />

Passing View Variables

When using the $:.. syntax, view variables aren't automatically inferred anymore. To use a view variable, prepend it with view., e.g.
$:myFunction(view.name)
where name is a view variable (i.e. defined as <var name="name" .. />)
Global variables such as user and journey do not get prepended with view.. They need to be called directly, e.g.
$:myFunction(user.name)
AND Operator
The JavaScript AND operator (&&) is a reserved character in XML and will not parse correctly if you include it in the XML function. It is recommended to extract the logic into a JavaScript function instead, as explained below.
The JS function which contains the && operator:
function shouldShow() {
return view.someCounter == 3 && view.otherVariable < 4;
}
Calling the above function in XML, where && operators will not work correctly:
<button show-if="$:shouldShow()" />

Format Strings

Resolves to: the return value of the function.
Defining a button in your view's XML like this:
<button label="{$:getLabel()}" />
and the function in your view's JavaScript like this:
function getLabel() {
return "Click me!";
}
will result in a button with label Click me!

on-press, on-scan, etc.

<button on-press=”$:myFunction()” />
Note that $:myFunction() is not wrapped in { }
function myFunction() {
var option = confirmDialog("Are you sure you want to navigate away?");
if (option) {
return link.nextView();
}
}
You can pass parameters:
<button on-press="$:confirmAndNavigate('nextView')" />
function confirmAndNavigate(path) {
var option = confirmDialog("Are you sure you want to navigate away?");
if (option) {
return link[path]();
}
}

object-table

The currently iterated object is exposed as $object, which can be used in your columns. This means that columns no longer have to be bound to the property of an object.
For example:
<model name="totals" label="Total">
<field name="total1" label="Total 1" type="number" />
<field name="total2" label="Total 2" type="number" />
</model>
<var name="my_collection" type="query:totals" />
<object-table query="my_collection" label="My Totals">
<column heading="Total"> {$:calculateTotal($object)} </column>
</object-table>
and
function calculateTotal(myObject) {
return myObject.total1 + myObject.total2;
}
The returned `object` is not a proper 'JourneyApps object'. It does not have an ID and cannot be used as a query parameter. We suggest that you extract the fields that you need from `$object` and use those accordingly. **Caveat:** The object ID is accessible if the object is part of a JourneyApps Array rather than a query.

Other Supported XML tags:

Note that only Format Strings are wrapped in {}.
Tag
Added Support
Examples
on-press, on-scan, etc
A view function with custom parameters
<button on-press="$:confirmAndNavigate('my-path')" />
show-if
A function returning true or false
<label show-if="$:shouldShow()" />
hide-if
A function returning true or false
<label hide-if="$:shouldHide()" />
required
A function returning true or false
<text-input required="$:isRequired()" />
state (found in a sidebar <item>)
A view variable - function returning "normal", "active" or "disabled"
<sidebar> <item state="$:getMyState()" /> <item state="myState" /> </sidebar> Note: In this example, myState is a view variable.
Copy link
On this page
Introduction
What goes on in the background
Passing View Variables
Format Strings
on-press, on-scan, etc.
object-table
Other Supported XML tags: