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
  • 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
  1. Get Started
  2. JourneyApps Platform Fundamentals

JourneyApps Syntax Basics

PreviousWhat is the Data Model?NextAccess the Database (DB)

Last updated 1 year ago

XML

All Views and most of their are defined using XML syntax. It's possible to define queries directly from the View XML. can also be used in some components in the XML. In addition, the and are also defined using XML.

If you have never used XML before, you can find more information .

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

Navigating to other views

To navigate to other views, you can use the navigate syntax.

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");
}
<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)" />

Calling Links with Branching Logic

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 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.

console.log("message");

Chrome Developer Console

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

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:

      • Select "inspect" to open the console.

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.

Further JavaScript/TypeScript Functionality in JourneyApps

Working with Objects:

Other JavaScript/TypeScript Functionality:

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 .

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 ).

These messages can be seen in the application , 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.

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 (testing.onjourneyapps.com). The Debug option can be enabled for a custom-branded container in the .

"" must be enabled on the device.

The device must be connected to the 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:

Since version 4.85.0 of the JourneyApps Runtime, more detailed performance profiling can be enabled in the debug console, see .

🚀
components
Format strings
Data Model
Sync Rules
here
the reference documentation
here
diagnostics
Developer options
Android debug bridge
chrome://inspect/#devices
journey.profiling
Querying the database
Manipulating objects
Linking specific data to a user
Opening External Links/Apps
Web
Platform section