Documentation
API
Q&A
Read
AnnouncementsArticlesWebsite tips
Learn
Getting StartedManagerMaestroAnalyticsExchangeWorkspaces
Resources
VideosDownloadsExchange PackagesRelease Notes
Ideas
Contact
Platform
Manager
Maestro
Exchange
Workspaces
Analytics
Springboard

Load External JavaScript Libraries

   MaestroThe UI design product.  |   Form Builder

Maestro allows you to include and load external JavaScript libraries in a form using one of the following:

  1. The JavaScript Library component - it includes pre-existing JavaScript libraries in a form, which are loaded on Form Load and the source is included in the app.js file.
  2. The Page Tracking feature of a form configuration in Manager.
  3. Lazy loading the libraries using jQuery.

The last two approaches are commonly used, so Let's look at each of them in more detail.

Use Page Tracking

Although page tracking is designed to add a JavaScript to a form to track it in a web analytics service, you can also use it to add custom JavaScript and HTML content to the application.

To add a library to a Maestro form:

  1. Configure a form page tracking using the following options:
    • Use Form Page Tracking - selected.
    • Page Script Include Position - Inside <HEAD>.
    • Form Page Tracking Script - paste your JavaScript library reference, for example, <script type="text/javascript" async src="https://my-domain.com/resources/js/my-lib.js"></script>.

However, some JavaScript libraries can't be loaded this way.

Note

Use the async attribute to run the script asynchronously, which, in turn, allows the form to load and render faster.

Use jQuery

One benefit of loading JavaScript libraries with jQueryjQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animations, and Ajax. is that the developer has complete control over when the library is loaded. This is important when you want to load a library only when it is required, which decreases the size of the application form footprint.

Another benefit of using this approach is that the path and names of the JavaScript libraries is environment-specific, so you can distinguish between production and non-production URLs.

To add a library to a Maestro form:

  1. Drag and drop a data field onto the page content of your Maestro form.
  2. Click the Integration pane and expand TM Form Data.
  3. Select the Include in Submission Data checkbox.
  4. Set the XML Location to Absolute.
  5. Set XML Name as Config/ExternalJSLibs. The Full Path will be /AvokaSmartForm/Config/ExternalJSLibs.
  6. Create a rule to dynamically load external JavaScript libraries, for example, a Page load rule as shown below:

    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.

  7. Log in to Manager and create a Form Prefill service.
  8. Create a service parameter ExternalJSLibs of String type and provide a delimited list of JavaScript resources, as shown below:
  9. Create a Groovy script that reads this service parameter and writes it to the Form XML location specified as /AvokaSmartForm/Config/ExternalJSLibs. The code snippet is shown below: 
    import com.avoka.core.groovy.GroovyLogger as logger
import com.avoka.component.xml.XmlDoc
import com.avoka.core.util.XmlUtils

XmlUtils.getXPathElement(schemaSeed, "/AvokaSmartForm/Config/ExternalJSLibs")
	.setTextContent(serviceParameters.get('ExternalJSLibs'));

return new XmlDoc(schemaSeed)
  10. Configure this prefill service as Form Prefill Data Service in the Maestro form.
  11. Render the form, open it in a browser and check the Console and the Network tabs of DevTool to see that the libraries loaded both for Page Tracking and jQuery configurations. Note the success and fail messages in the console as one library should load and the other should not.

Next, learn about library scopes.