---
title: "JourneyApps Syntax Basics"
description: "XML"
permalink: /docs/get-started/journeyapps-fundamentals/journeyapps-syntax-basics/
---
# JourneyApps Syntax Basics

## XML

All Views and most of their [components](/docs/build/ui-components/) are defined using XML syntax. It's possible to define queries directly from the View XML. [Format strings](/docs/app-features/xml-format-strings/) can also be used in some components in the XML. In addition, the [Data Model](/docs/get-started/journeyapps-fundamentals/what-is-the-data-model/) and [Sync Rules](/docs/build/data-model-configuration/data-rules/sync-rules-v2/) are also defined using XML.

If you have never used XML before, you can find more information [here](http://www.xmlfiles.com/xml/).

## 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:

```xml
<view ...>
  <var name="comments" type="text" />
</view>
```

... and the JavaScript:

```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:

```xml
<var name="current_asset" type="asset" />
<var name="counter" type="integer" />
```

Then the following variable references are all valid:

```javascript
counter
current_asset
current_asset.make
current_asset.category
current_asset.category.name
```

### Navigating to other views

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](/docs/get-started/journeyapps-fundamentals/view-navigation/).

For example, if you have a view with path `user/new`, it can be called from JavaScript as follows:

```javascript
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](/docs/app-features/calling-js-functions-from-xml/)).

```xml
<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:

```javascript
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:

```xml
<button label="Click Me" on-press="$:navigate.link('view_path', $:view.user_type)" />
```

### Calling Links with Branching Logic

Example View XML:

```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:

```javascript
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:

```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:

```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 several 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. See the next section for instructions to access the console.

```javascript
console.log("message");
```

These messages can be seen in the application [diagnostics](/docs/technical/device-diagnostics/), under the *Logs* section, as well as the app's console. This latter option is more suitable for development purposes. See the next section for details.

#### Chrome Developer Console

An app's console is found within the "Console" tab of the Chrome Developer Console.

The Chrome Developer Console can be accessed when the *Debug* option is enabled in the JourneyApps container. This option is enabled for the Desktop container installed via the **Test App** flow in OXIDE, and is also enabled on [Web](/docs/technical/supported-platforms/web-container/) (testing.onjourneyapps.com). The *Debug* option can be enabled for a custom-branded container in the [Platform section](/docs/oxide/create-and-manage-app-containers/#platforms).

Opening the console differs per platform:

* On Desktop, right-click anywhere and select "Toggle DevTools".
* On Web, right-click and select "Inspect", and then navigate to the "Console" tab.
* Debugging on Android devices requires several steps, following the general Android debugging guidelines. On a high level:
  * "[Developer options](https://developer.android.com/studio/debug/dev-options)" must be enabled on the device.
  * The device must be connected to the [Android debug bridge](https://developer.android.com/tools/adb) or Android Studio on a Desktop computer (via USB or wirelessly).
  * On the Desktop computer, in Chrome, the Android device should then be listed here: [chrome://inspect/#devices](chrome://inspect/#devices)
    * Select "inspect" to open the console.

#### **Debug console**

<Info title={"Version compatibility"}>

The debug console was introduced with version **4.75.0** of the JourneyApps Runtime.

</Info>

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.

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fxxcvb6t8w8v9ytlnamfe-2fdebug-console-987cabb2.png)

<Info>

* 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`](/docs/build/js-ts-apis/journey/).

</Info>

### Further JavaScript/TypeScript Functionality in JourneyApps

Working with Objects:

* [Querying the database](/docs/get-started/journeyapps-fundamentals/accessing-the-database/querying-db-objects/)
* [Manipulating objects](/docs/get-started/journeyapps-fundamentals/accessing-the-database/manipulating-db-objects/)

Other JavaScript/TypeScript Functionality:

* [Linking specific data to a user](/docs/build/js-ts-apis/user/)
* [Opening External Links/Apps](/docs/build/integration/opening-external-links-apps/)