LogoLogo
What's NewDeveloper CommunitySupportStatus
  • 🚀Get Started
    • What is JourneyApps Platform?
    • Tutorial: Build your First App
      • 1. Introduction
      • 2. Create a new App
      • 3. OXIDE IDE Overview
      • 4. Hello World app
      • 5. The Data Model
      • 6. View Components
      • 7. Queries and Data Sync
      • 8. Simple Navigation
      • 9. View Stack
      • 10. Input Validation
      • 11. View Parameters
      • 12. Data Manipulation
      • 13. Responsive Apps
      • 14. Styling
      • 15. Lists
      • 16. GPS Capturing
      • 17. Relationships
      • 18. Multiple User Roles
      • 19. Deployment and Users
      • 20. Version Control
      • 21. CSV and APIs
      • 22. Conclusion
    • JourneyApps Platform Fundamentals
      • Creating a New App
        • Git-enabled Apps
      • What are Views?
      • What is the Data Model?
      • JourneyApps Syntax Basics
      • Access the Database (DB)
        • Manipulate DB Objects
        • Query DB Objects
      • View Navigation
        • Deep Linking
      • CloudCode Overview
      • OXIDE (Online IDE)
  • 💻Build your App
    • JourneyApps Syntax
      • Syntax Basics
      • Access the DB
      • View Navigation
      • Async & Await
      • TypeScript Apps (Beta)
        • runtime-build package
        • TypeScript App Troubleshooting
      • What's New in V4
        • Updating to the V4 API
    • Configure your Data Model
      • What is the data model?
      • Reference: model
        • field
        • belongs-to
        • has-many
        • index
      • Data Rules
        • Data Buckets
        • Sync Rules - Limit data synced to devices
        • Data ACLs - Limit access to data
        • Real-world example for Data Rules
        • ❔FAQs
        • Migrate to Data Rules
      • App Indexes
      • Webhooks
    • UI Components
      • All UI Components
        • actionSheet
        • Attachments
        • button
        • button-group
        • capture-coordinates
          • marker
          • marker-query
        • capture-file
        • capture-photo
        • capture-signature
        • card
          • accent
          • action
        • columns
          • column
        • component
        • context-menu
          • divider
          • item
        • CSV
        • date-input
        • datetime-input
        • dialog
          • body
        • display-3d-model
          • 📖display-3d-model Guides
            • Guide 1: Initialize and layout a 3D model in a view
            • Guide 2: Control playback position
            • Guide 3: Troubleshooting controls
        • display-coordinates
        • display-file
        • display-image
        • display-photo
        • display-signature
        • heading
        • html
          • HTML Advanced Topics
          • ❔HTML FAQs
          • 📖Guide: HTML & JourneyApps iFrame Client
        • icons
        • info
        • info-table
          • row
        • journey.photos (capture multiple photos)
        • JourneyPrinter (print PDFs)
        • grid
          • cell
          • 📖grid Examples
        • list
          • list-item
            • accent
            • asset
            • pills
              • pill
            • action
        • multiple-choice-checklist
        • navigation (Navigation drawer)
          • general-section
            • item
          • section
            • item
              • item
          • ❔navigation FAQs
        • notification
        • object-dropdown
        • object-list
          • action
        • object-repeat
        • object-table
          • action
          • column
            • action
            • edit-boolean
            • edit-date
            • edit-datetime
            • edit-integer
            • edit-number
            • edit-select
            • edit-text
            • edit-time
            • edit-typeahead
              • action
            • header-action
          • column-group
          • empty-action
          • 📖object-table Guides
            • Actions
            • Cell callouts
            • Column groups
            • Columns
            • Controlled object-table
            • Controls
            • Copy & paste data
            • Edit cells
            • Filters
            • Frozen columns
            • Fullscreen object-table
            • Mode
            • State
            • Styles
        • optionList
        • PhotonSync (transfer data offline)
        • power-bi
          • 📖Guide: PowerBI Embedding
        • scan-barcode
        • shortcut
        • sidebar
        • single-choice-dropdown
        • single-choice-radio
        • template
        • text-input
        • time-input
        • toggle
        • view
      • JS/TS Events
      • Show / Hide UI Components
      • View Templates
      • XML Fields (Attributes)
        • align-content
        • align-controls
        • align-label
        • bind
        • clear-button-visibility
        • control-order
        • disabled
        • error-message
        • icon-position
        • id
        • hide-if
        • modifier-text
        • label
        • label-case
        • label-color
        • on-change
        • on-press
        • placeholder
        • required
        • show-if
    • JS / TS APIs
      • Attachment
      • Bluetooth (Beta)
      • Broadcast
      • component
      • CSV
      • DB
      • HardwareBarcode
      • journey
        • journey.config
        • journey.container
        • journey.device
        • journey.diagnostics
        • journey.dialog
        • journey.files
        • journey.hardware
        • journey.photos
        • journey.runtime
        • journey.sensors
        • journey.viewStack
      • JourneyPrinter
      • KeyboardBarcode
      • LocalDB
      • NFC
      • OnlineDB
      • PhotonSync
      • SerialPort
      • ShortcutManager
      • TCPSocket
      • user
    • Extend your App with Custom Code
      • App packages
        • App packages overview
        • PDF report package
        • TypeScript library & unit tests
        • Manage External Dependencies
      • Custom HTML
    • Style & Customize your App
      • Style & configure UI components
        • Overview
        • Understand extendable themes
        • Use themes on a view
        • Theme specific components on a view
        • Examples
        • Debugging
        • ❔FAQs
      • Change your App Font
      • Custom Branding
        • Custom Container Features
        • Special Requirements for iOS Containers
    • Integrate your App
      • Backend integrations with CloudCode
      • Barcode Scanning
        • Barcode Scanning using Keyboard Emulation
        • Hardware Barcode Scanning
        • scan-barcode
      • Bluetooth Low Energy (BLE)
      • Broadcast API
      • HTTP requests (Fetch API)
      • JourneyApps Print (Android)
      • Maps and navigation
      • NFC
      • Opening external links/apps
      • Serial Port
      • TCP Sockets
    • Design Intuitive Apps
      • UX Guidelines
      • Write Effective Copy
  • 📱App Features
    • RealWear® Voice Control
      • Automatic Voice Commands
        • Automatic Voice Commands - Advanced
      • Manual Voice Commands
    • App, Runtime and Container Updates
    • Batch Operations (App)
    • Call JS/TS Functions from XML
    • Capture GPS Locations
    • Push Notifications
    • Translations
    • XML Format Strings
    • Webhooks (External)
  • 🌐CloudCode
    • CloudCode Overview
    • Trigger a CloudCode Task
      • Trigger CC with a Schedule
      • Trigger CC via a Webhook
      • Trigger CC from an App
      • Trigger CC from Another Task
      • Trigger CC via HTTP
    • Attachments in CloudCode
    • Timezones
    • Advanced CloudCode Topics
      • Access Multiple DBs in CloudCode Tasks
      • Batch API (CloudCode)
      • CloudCode Dependencies
      • Configure HTTPS in CloudCode
      • Deployment environment variables
      • Local CloudCode Development
      • PDF Reports using CloudCode
      • Shared CloudCode Tasks
      • Translations in CloudCode
  • 📥Backend API
    • Introduction
    • API Reference
      • Retrieve All Objects
      • Query Objects
      • Sort Results
      • Limit and Skip
      • Count Objects
      • Create a New Object
      • Retrieve a Single Object
      • Update a Single Object
      • Delete a Single Object
      • Batch Operations (v4 API)
      • Oplog API
      • Retrieve the App Data Model
      • Manage App Users and Sessions
      • Field Representation
      • Error Responses
    • API Limits
    • Update to the V4 API
  • ⚙️Technical
    • Data Synchronization Priority
    • Device Diagnostics
    • JSON1 Query Engine
    • Improve App Performance
    • Security Measures
    • Supported Platforms
      • Web Container
      • Windows Installer
    • Domain Whitelist
  • 🖥️OXIDE
    • Get started with OXIDE
      • OXIDE Overview
      • Components of OXIDE
    • Configure Testing Deployments
    • Edit and Manage Files
      • How to Navigate to a Function
      • Manage External Dependencies
    • Create and Manage App Containers
    • Debugging & Troubleshooting
      • Common Troubleshooting Pointers
      • App Diagnostics Reports
      • Build Logs
    • OXIDE Workspaces
      • OXIDE Trees
  • ❕Deprecated Features
    • Deprecated Features and Components
Powered by GitBook
On this page
  • Introduction
  • Syntax & Basic Example
  • What goes on in the background
  • Passing View Variables
  • Format Strings
  • JS/TS events (e.g. on-press, on-change)
  • object-table fields
  • Other common XML attributes
  1. App Features

Call JS/TS Functions from XML

PreviousBatch Operations (App)NextCapture GPS Locations

Last updated 2 years ago

Container Compatibility

This feature was introduced in version 4.19 and later of the JourneyApps Container.

Introduction

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

Syntax & Basic Example

The basic syntax for calling a function defined in the view's JS/TS from the XML is:

$:myFunctionName(myParameter)

In the below example, a button's state is determined by evaluating an object's field:

main.view.xml
<var name="form" type="application_form" />

<button label="Save" disabled="$:isDisabled(view.form)" disabled-message="Complete all fields before saving" on-press=":$saveForm()"/>
main.js
function isDisabled(form) {
    if (form && form.details_pending) {
        return true;
    }
    else {
        return false;
    }
}

What goes on in the background

Everything after the $: is evaluated as if it were part of the view's JS/TS. This also means that:

  1. You are able to execute single lines of JS from the XML, e.g.

main.view.xml
<info show-if="$:view.my_counter === 3">You have no remaining attempts.</info>

<button on-press="$:journey.dialog.simple({title: 'Not implemented yet'})" />

2. You are able to call functions from your Shared JS (or App Modules for TypeScript apps), e.g.

main.view.xml
<button show-if="$:sharedShowCredentials() === true" />

JavaScript AND Operator

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:

main.js
function shouldShow() {
    return view.my_counter === 3 && view.num_of_attempts < 4;
}

The && operators does not work correctly within your view's XML, so call the function defined above:

main.view.xml
<button show-if="$:shouldShow()" />

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.

main.view.xml
<button show-if="$:myFunction(view.my_view_variable)" />

where my_view_variable is the name of a view variable (i.e. defined as <var name="my_view_variable" .. />)

main.view.xml
<button show-if="$:myFunction(user.name)" />

Format Strings

Defining a button in your view's XML like this:

main.view.xml
<button label="{$:getLabel()}" />

and the function in your view's JavaScript like this:

main.js
function getLabel() {
    return "Click me!";
}

will result in a button with label Click me!

JS/TS events (e.g. on-press, on-change)

main.view.xml
<button on-press=”$:myFunction()” />

Note that $:myFunction() is not wrapped in { }

main.js
function myFunction() {
    var confirm = jouurney.dialog.confirm({title: "Are you sure you want to navigate away?"});
    if (confirm) {
        return navigate.link("my_view");
    }
}

You can pass parameters from XML to JS/TS:

main.view.xml
<button on-press="$:confirmAndNavigate('nextView')" />
main.js
function confirmAndNavigate(viewPath) {
    var confirm = jouurney.dialog.confirm({title: "Are you sure you want to navigate away?"});
    if (confirm) {
        return navigate.link(viewPath);
    }
}

object-table fields

Within an object-table each row is exposed as $object, which can be used in your table as follows:

schema.xml
<model name="total" label="Total">
    <field name="total1" label="Total 1" type="number" />
    <field name="total2" label="Total 2" type="number" />
</model>
main.view.xml
<var name="my_collection" type="query:total" />

<object-table query="my_collection" label="My Totals">
    <column heading="Total">{$:calculateTotal($object)} </column>
</object-table>
main.js
function calculateTotal(myObject) {
    return myObject.total1 + myObject.total2;
}
main.view.xml
<object-table ...>
    <action on-press="$:rowAction($selection)" validate="false" />
    ...
</object-table>
function rowAction(selectedObject){
    // Do something with the object
    console.log(JSON.stringify(selectedObject));
}

The returned $object / $selection is not a typical JourneyApps DB 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.

Other common XML attributes

The below table lists other common XML attributes where JS/TS functions can be used. Note that this is not a complete list.

Attribute
Added Support
Examples

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 )

📱
user
journey
Format strings
JS/TS event
action
Format Strings
on-press, on-scan, etc.
show-if
hide-if
required
disabled
show-if
hide-if
disabled
array
sidebar items
sidebar item