JavaScript files

JavaScript files help organize custom functions and variables. They're perfect for storing reusable helpers and utilities within components and actions.

You can create a JS file from the Actions panel - simply select this option after clicking on the plus sign.

All top-level variables and functions defined in a JS file are accessible in Components and Actions.

Scope

JavaScript files are scoped based on their creation context:

• App-level files - can be utilized across any component or action within the app

• Page-level files - restricted to their specific page

When multiple functions with the same name are defined in a scope, then the most recent definition will take precedence.

Cross usage

Functions and variables defined in one JS file can also be used in others.

Since JavaScript files are added to a page as scripts, you can only reference definitions from files loaded earlier.

Global and custom libraries

JavaScript files can also contain custom libraries in the custom code section as well as default libraries like moment and lodash.

Debugging

You can troubleshoot any issues you have with a JS file by inserting a console log statement and running the function within an action or component, for example:

function dateWithLabel(date) {
  console.log('debug!', date);
  return 'Date: ' + moment(date).format('MM/dd/yyyy');
}

The logs will appear in the Logs panel, prefixed with the file name where the code resides.

Code that contains invalid JavaScript and cannot be parsed is not incorporated into the page.