JourneyApps Syntax Basics

XML

All Views and most of their components are defined using XML syntax. It's possible to define queries directly from the View XML. Format strings can also be used in some components in the XML. In addition, the Data Model and Sync Rules are also defined using XML.
If you have never used XML before, you can find more information here.

JavaScript/TypeScript

JavaScript or TypeScript is used to define the behavior and logic of apps built on JourneyApps. Each view has a corresponding JavaScript or TypeScript file, that is automatically executed when the view loads.
The following functionality is supported from the JavaScript/TypeScript in JourneyApps:

Creating Variables

The JavaScript/TypeScript init() function is called when a view is loaded for the first time. This is typically used for initializing variables or queries.
Any variable or parameter defined in a view can be referenced by view.variablename.
Example View XML:
<view ...>
<var name="comments" type="text" />
</view>
... and the JavaScript:
function init() {
view.comments = "<enter comments here>";
}

Referencing Variables

A variable (or parameter) in a view can refer directly to a variable, a field of an object variable, and traverse through object relationships.

Example

Suppose we have a view defining the following variables:
<var name="current_asset" type="asset" />
<var name="counter" type="integer" />
Then the following variable references are all valid:
counter
current_asset
current_asset.make
current_asset.category
current_asset.category.name
To navigate to other views, you can use the navigate syntax.
You can define the logic for navigation from either the JS or the XML. There are also multiple navigate methods that you can use, depending on whether you'd like to add the new view to the view stack, or whether you'd like to dismiss back to a previous view or not. For a complete reference, please read the reference documentation.
For example, if you have a view with path user/new, it can be called from JavaScript as follows:
function goToNewUser() {
navigate.link("user/new");
}
If you wish to navigate directly from the XML (for example, by using a button), you can use the $: syntax to call the relevant navigate method directly (read more about $: functions here).
<button label="Click Me" on-press="$:navigate.link('view_path')" />
If the view we are linking to requires any parameters, we can simply pass those parameters to the JavaScript function, for example:
function goToNewUser() {
// The additional parameters to this function are passed to the 'user/new' view.
navigate.link("user/new", view.user_type);
}
Similarly from the XML:
<button label="Click Me" on-press="$:navigate.link('view_path', $:view.user_type)" />
Example View XML:
<view ...>
<var name="age" type="integer" />
<text-input bind="age" label="Age" />
<button label="Next" on-press="proceed" />
</view>
To do branching, we can simply use instead of an if statement in our JavaScript function:
function proceed() {
if (view.age >= 18) {
navigate.link("adult_form");
} else {
navigate.link("child_form");
}
}

Performing Calculations

An example for how calculations may be performed:
View XML:
<view title="BMI">
<var name="height" type="number" />
<var name="weight" type="number" />
<var name="bmi" type="number" />
<var name="description" type="text" />
<heading>BMI</heading>
<text-input bind="height" label="Patient height (cm)" />
<text-input bind="weight" label="Patient weight (kg)" />
<button label="Calculate BMI" on-press="calculate_bmi" />
<info label="BMI index" value="{bmi:%.1f}"/>
<info bind="description" label="Description" />
</view>
View JavaScript:
function calculate_bmi() {
var weight = view.weight;
var height = view.height;
if (weight > 0 && height > 0) {
var finalBmi = weight / (height / 100 * height / 100);
view.bmi = finalBmi;
if ( finalBmi < 18.5 ) {
view.description = "The patient is too thin.";
} else if ( finalBmi < 25 ) {
view.description = "The patient is healthy.";
} else {
view.description = "The patient is overweight.";
}
} else {
dialog("Incorrect inputs", "Please complete the fields correctly");
}
}
Note that the view is automatically refreshed with the new "bmi" and "description" values.

Debugging

JourneyApps provides two main ways to debug your app.

console.logs

For simple or repetitive debugging operations, you can display debugging messages on your app's console using the console.log function. To access the console, you need to first test your app on the Desktop JourneyApps Container or on Web (testing.onjourneyapps.com). To do that, click Test App in OXIDE.
console.log("message");
To access the app's console from the Desktop JourneyApps container, right click anywhere on the app and select "Toggle DevTools". This will open the Chrome Developer Console. On Web you can right-click and select "Inspect", and then open the "Console" tab.
You can also view these messages in the application diagnostics, under the Logs section.

Debug console

Version compatibility
The debug console was introduced with version 4.75.0 of the JourneyApps Runtime.
For more advanced debugging use the debug console. Capabilities include accessing view variables from within the developer console, and exploring underlying components of your app such as the DB or journey namespaces.
It is available within the Chrome Developer Console described above. To activate the debug console, open the "Console" tab and change the console context to JourneyScript.worker.js in the available dropdown.
  • Enable Verbose log levels, and for best results, update the developer console settings to include time stamps.
  • Since version 4.85.0 of the JourneyApps Runtime, more detailed performance profiling can be enabled in the debug console, see journey.profiling.

Further JavaScript/TypeScript Functionality in JourneyApps

Working with Objects:
Other JavaScript/TypeScript Functionality:
Copy link
On this page
XML
JavaScript/TypeScript
Creating Variables
Referencing Variables
Navigating to other views
Calling Links with Branching Logic
Performing Calculations
Debugging
Further JavaScript/TypeScript Functionality in JourneyApps