Call JS/TS Functions from XML
Last updated
Last updated
Developers can call JavaScript or TypeScript functions from most component attributes in the view XML. This allows attribute values to be determined programmatically, and in most cases be dynamic. This enables more complex use cases than hardcoded attribute values.
Some examples are:
Dynamically defining the visibility of UI components (i.e. when used in conjunction with and
Dynamically determining text to display in a view
Populating tables with custom data (e.g. translated data or data aggregates)
Generating the content of
The basic syntax for calling a function defined in the view's JS/TS from the XML is:
In the below example, a button's state is determined by evaluating an object's field:
Everything after the $:
is evaluated as if it were part of the view's JS/TS. This also means that:
You are able to execute single lines of JS from the XML, e.g.
2. You are able to call functions from your Shared JS (or App Modules for TypeScript apps), e.g.
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/TypeScript function instead, as explained below.
In your view's JS/TS, the &&
operator can be used:
The &&
operators does not work correctly within your view's XML, so call the function defined above:
When using the $:
syntax, view variables aren't automatically inferred anymore. To use a view variable, prepend it with view.
, e.g.
where my_view_variable
is the name of a view variable (i.e. defined as <var name="
my_view_variable" .. />
)
Defining a button in your view's XML like this:
and the function in your view's JavaScript like this:
will result in a button with label Click me!
on-press
, on-change
)You can pass parameters from XML to JS/TS:
object-table
fieldsWithin an object-table
each row is exposed as $object, which can be used in your table as follows:
The below table lists other common XML attributes where JS/TS functions can be used. Note that this is not a complete list.
A view function with custom parameters
<button on-press="$:confirmAndNavigate('my-path')" />
A function returning true
or false
<button show-if="$:shouldShow()" />
A function returning true
or false
<button hide-if="$:shouldHide()" />
A function returning true
or false
<text-input required="$:isRequired()" />
A function returning true
or false
<button disabled="$:isDisabled()" />
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.
Global variables such as and do not get prepended with view.
. They need to be called directly, e.g.
resolve to the return value of the function. For example:
JavaScript/TypeScript functions can be called when a is triggered:
Similarly, $selection
can be passed as a parameter when defining an object-table
:
Caveat: The object ID is accessible if the object is part of a JourneyApps rather than a query.
Note that only are wrapped in {}
.
state
(found in a )