JavaScript files

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

To create a JS file, click the plus button in the Actions panel and select the JS file option:

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 JS files can be utilized across any component or action within the app, while page-level files are restricted to their specific page.

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

Cross usage

Functions and variables defined in one file can be used in another. Note that since JS files are added to a page as scripts, you can only reference definitions from files loaded earlier.

Global and custom libraries

Custom libraries in the custom code section, along with default libraries like moment and lodash, are available in the JS files:

Debugging

To troubleshoot an issue, insert a console log statement and run the function within an action or component. The logs will appear in the logs panel, prefixed with the file name where the code resides.

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

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