JavaScript Basics in JourneyApps

JavaScript is used to define the behavior and logic of apps built on JourneyApps.

The following functionality is supported from JavaScript in JourneyApps:

The Basics:
- Variable initialisation
- Calling links
- Calling links with branching logic
- Debugging (writing log messages to console)
- Performing calculations
Working with Objects:
- Querying the database
- Manipulating objects
Other JavaScript Functionality:

JavaScript for Each View

Each view has a corresponding JavaScript file, that is automatically executed when the view loads.

Variable Initialisation

The JavaScript init() function is called when a view is loaded for the first time. This is typically used for initialising 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="string" />
</view>

... and the JavaScript:

function init() {
    view.comments = "<enter comments here>";
}

Calling Links

There are two ways to call links in JourneyApps:

Directly from a button component by specifying link="" on the button. See the Links section for more information.
Calling the link from JavaScript using the return link.link_name syntax.

For example, if you have a link defined in your View XML as such:

<link name="new_user" path="user/new" />

<button onpress="goToNewUser" label="New User" />

It can be called from JavaScript as follows:

function goToNewUser() {
    return link.new_user();
}

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 arguments to this function are passed to the 'user/new' view.
    return link.new_user(view.user_type);
}

Calling Links with Branching Logic

Example View XML:

<view ...>
    <var name="age" type="int" />

    <link name="child" path="child_form" />
    <link name="adult" path="adult_form" />

    <textinput bind="age" label="Age" />

    <button label="Next" onpress="proceed" />
</view>

... and the View JavaScript:

To do branching, we can simply use instead an if statement in our JavaScript function:

function proceed() {
    if (view.age >= 18) {
        return link.adult();
    } else {
        return link.child();
    }
}

Debugging

When you're using the Test App in Browser feature on the Test page of the App Editor, you can display debugging messages on your web browser's console using the console.log function:

console.log("message");

Performing Calculations

An example for how calculations may be performed:

View XML:

<view title="BMI">
    <var name="height" type="decimal" />
    <var name="weight" type="decimal" />
    <var name="bmi" type="decimal" />
    <var name="description" type="string" />

    <heading>BMI</heading>

    <textinput bind="height" label="Patient height (cm)" />
    <textinput bind="weight" label="Patient weight (kg)" />

    <button label="Calculate BMI" onpress="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.

Further JavaScript Functionality in JourneyApps

Working with Objects:
- Querying the database
- Manipulating objects
Other JavaScript Functionality: