Add a Custom JavaScript Function

To add a custom JavaScript function, you define the function within the Module class provided in the JavaScript editor for your page, flow, or App UI. You can also do this for layouts and fragments.

  1. Open the artifact for which you want to add a JavaScript function, then select the JavaScript tab.

    For example, to use a JavaScript function in multiple pages, you can define the function at the app level or at the flow level for those pages. To define the function at the App UI level, select the App UI node, then click the JavaScript tab:

    Description of page-functions-editor1.png follows

    Description of the illustration page-functions-editor1.png

    JavaScript functions are defined in different files based on the artifact’s scope. An App UI uses the app.js file, a flow uses *`flow-name`*-flow.js, and a page uses *`page-name`*-page.js. Additionally, a layout uses layout.js and a fragment uses *`fragment-name`*-fragment.js.

  2. Define your JavaScript function within the Module class (AppModule, FlowModule, or PageModule) provided in the JavaScript editor. If you’re working with a fragment or layout, you’d use FragmentModule or LayoutModule.

    To define an app-level function, for example, define your function within the AppModule class:

    define([], () => {
  'use strict';

  class AppModule {
  // write your function here
  }

  return AppModule;
});

    Here’s an example of an AppModule function that takes a string, appends some text to it, then returns that string:

    define([], () => {
  'use strict';

  class AppModule {
    // Code for a custom AppModule method
    myAppModuleMethod(s) {
      return s + " has visited my AppModule method";
    }
  }

  return AppModule;
});

    If any function within the class needs to access the application context, make sure you create a constructor for the class and include the context as an input parameter:

    constructor(context){}

    Here’s another example where two functions have been created in the PageModule class: a constructor and a module function. When the page is opened, the corresponding instance of the PageModule class (shown below) is created for the page. Also, the instance’s constructor is automatically called and the application context passed to the constructor:

    define([], () => {
  'use strict';

  class PageModule {

    constructor(context) {
      this.eventHelper = context.getEventHelper();
    }

    fireSomeCustomPageEvent() {
      this.eventHelper.fireNotificationEvent(
            {summary: 'Summary here', message: 'Message here,'});
    }
  }

  return PageModule;
});

    As you write your code in the JavaScript editor, take advantage of suggestions that provide code-completion capabilities. This includes code snippets for common JavaScript structures, such as “for” and “while” loops and conditional statements. For example, typing for in the editor will show you various “for” loop structures:

    Description of js-code-complete-example.png follows

    Description of the illustration js-code-complete-example.png

    Selecting a structure will let you easily switch the variables in the structure.

  3. Watch for syntax errors in your code. Lines with syntax issues are flagged in the right margin, which you can then resolve from the Audits pane. A light bulb icon in the left margin indicates a hint that you can use to correct invalid code.

    For help with JavaScript syntax, see https://developer.mozilla.org/en-US/docs/Web/JavaScript#reference. These additional resources can be helpful as well:

After you’ve defined your custom JavaScript functions, you can call them in action chains as well as UI components: