Loading ...

Using PXJavaScript to Dynamically Load JavaScript Files in Acumatica

27 January 2025

When working on an Acumatica project, you might encounter situations where JavaScript code grows significantly as the project scales. While it’s common practice to move such code into separate .js files and include them in .aspx pages using:

<script type="text/javascript" src=".../app.js"></script>

Acumatica provides a built-in way to dynamically load JavaScript files using the PXJavaScript controller. This approach offers greater flexibility and control, especially in scenarios where conditional loading or late binding is required.

This article explains how to use PXJavaScript for dynamic JavaScript file loading with a detailed breakdown of the code.

Example: Using PXJavaScript Controller

In Acumatica, the PXJavaScript controller is a convenient way to inject JavaScript into your page. Here’s an example:

This markup defines a PXJavaScript element that dynamically loads a JavaScript file. Let’s break it down.

Breakdown of PXJavaScript Code

PXJavaScript Control

<px:PXJavaScript

    runat="server"

    ID="CstCalendarJavaScript"

    IsStartupScript="False"

    Script="..."

/>

The PXJavaScript control is used to embed JavaScript in the page dynamically. Key attributes include:

    • runat="server": Indicates that the control is server-side.
    • ID: Unique identifier for the control.
    • IsStartupScript: When set to False, the script is injected at runtime rather than on page startup.
    • Script: The JavaScript code to be executed.
  1. JavaScript Execution on Page Load

window.addEventListener('load', () => {

    // Code executes after the page has fully loaded

});

The load event listener ensures the JavaScript code runs only after the entire page is loaded.

  1. Dynamic Script Element Creation

const s = document.createElement('script');

s.src = '.. /calendar.js';

A new <script> element is created dynamically, and its src attribute points to the desired JavaScript file. In this case, the script path is ../Includes/calendar.js.

  1. Handling Script Load Success

s.onload = () => {

    if (typeof initializeCalendar === 'function') {

        initializeCalendar();

    } else {

        console.error('initializeCalendar is not defined.');

    }

};

The onload event is triggered when the script is successfully loaded and executed. The script checks if the function initializeCalendar exists before invoking it.

  1. Error Handling for Script Load Failure

s.onerror = () => console.error('Failed to load setup script:', s.src);

The onerror event is triggered if the script fails to load. An error message is logged to the console, including the problematic script path.

  1. Appending Script to Document Head

document.head.appendChild(s);

Finally, the <script> element is appended to the <head> section of the document, initiating its execution.

Why Use PXJavaScript?

  1. Dynamic Loading: Scripts can be loaded conditionally based on user actions or runtime conditions.
  2. Modularity: Keeps JavaScript code modular and separate from HTML.
  3. Error Handling: Provides better error reporting and debugging.
  4. Late Binding: Scripts are loaded only when needed, reducing initial page load time.

Practical Use Case in Acumatica

Imagine you are building a scheduling feature in Acumatica that requires a calendar library. The library's JavaScript file (calendar.js) needs to be loaded dynamically to initialize the calendar component. Instead of including the script on every page, you can use PXJavaScript to load it only on pages where the calendar is required.

With this setup, the calendar script is loaded on demand, and the initializeCalendar function ensures the calendar is properly initialized once the script is ready.