Load External JavaScript Libraries

   MaestroPreviously known as Transact Maestro.  |   Form Builder

You can use one of the following ways to include or load external JavaScript libraries in a Maestro form:

  • The JavaScript Library widget in the Maestro palette, which allows the developer to upload a library in Maestro. Note that these libraries are loaded on Form Load and the source is included in the app.js file.
  • The Page Tracking feature of a form configuration in Manager.
  • Lazy loading the libraries using jQuery.

The last two approaches are commonly used.

Use Page Tracking

Although the feature is called Page Tracking, you can also use it to add custom JavaScript and HTML content into the application.

To add a JavaScript:

  1. Navigate to the Page Tracking panel for your form configuration.
  2. Toggle Use Form Page Tracking to ON.
  3. Set the Page Script Include Position to Inside <HEAD>.
  4. Add the JavaScript library reference, as shown below:

The async attribute can be used to allow asynchronous running of the script. This technique generally allows the Maestro form to load and render faster. Some JavaScript libraries cannot be used this way.

Load Libraries with jQuery

One benefit of loading JavaScript libraries with jQuery, is that the developer has complete control over when the library is loaded. Specifically, the library can be loaded when it is required. Libraries that are related to a feature that is not used in the form never need to be loaded. This obviously decreases the size of the Maestro application footprint.

Another benefit of using this approach is that the path and names of the Javascript libraries can be environment-specific. Many supporting libraries have different production and non-production URLs.

  1. Add a data field into the page content of your Maestro form.
  2. Go to the Data tab and toggle Include in Submission Data to ON.
  3. Set the XML Location and the XML Name, as shown below:
  4. Create a rule to dynamically load external JavaScript libraries, for example a Page load rule as shown below:
  5. Note that loading libraries with jQuery provides success and failure handlers. A success handler can be used to invoke a function in the loaded script. Failure can be used to notify the user.
  6. Log in to Transact Manager and create a Form Prefill service.
  7. Create a service parameter - ExternalJSLibs, set its Type to String, and provide a delimited list of JavaScript resources, as shown below:
  8. Write a Groovy script that reads this service parameter and writes it into the Form XML location identified above.
  9. Save the script. Associate this Prefill Service with the Maestro form configuration in Transact Manager.
  10. Render the form. Inspect the Console and the Network for the libraries loaded with Page Tracking and jQuery. Note the success and fail messages in the console. One library loaded; the other did not.

Next, learn about library scopes.