The Visual Builder Cloud Service Blog

Importing and Using Javascript libraries in your Visual Builder custom code

JT Thomas
Director of Product Management

In a recent post, I shared the prescriptive model for creating custom code within Visual Builder. Namely, using Javascript modules at the App, Flow, or Page level to create custom functions within the module. In this post, I want to talk about importing and using external Javascript libraries so you can use functions, objects and variables within that library.

For this example, I will use the glmatrix library, a collection of Vectors, Matrices, and associated linear algebra operations. These types of operations can be used for more than just graphics so they live in their own library. The glmatrix library is provided in a "min" format. Essentially one free of whitespace and newline characters and in one file.

So, the library I am importing is the glmatrixmin.js library which can be downloaded from the "dist" directory within the project github page: https://github.com/toji/gl-matrix/tree/master/dist.

First, you'll need to import the library into your project. With Visual Builder, you can import resources at each of the levels, App, Flow, and Page and that resource will be accessible via that path. To import the file, right click on the project App, Flow, or Page node and select Import Resource.

The resource needs to be uploaded as a zip file. So compress the glmatrixmin.js into a zip and select it from your files system in the Import Resources dialog. The dialog will show the import location. Remember this as this is how we reference the file later.

Now the file is imported, you can see it in your code view under the Resources folder of the "main" Flow within which it was imported. 

Now, we can write some custom code in our PageModule and reference the file to load it into our module. To do that we use a define statement, which provides the path to the file and the alias with which we will refer to the imported library in our code.

See the below code example, for the define statement and usage. The full path to the file is used combining the import location with the flow name and resources directory. Note, the .js file extension is not necessary. Also, note the alias "glmatrix" is used to reference the objects and functions within the library. 




Join the discussion

Comments ( 3 )
  • Priya Friday, July 6, 2018
    I am trying to import jsQR from https://benadida.com/
    I imported it under resources just like the sample that you have given.
    my js is like

    define(["mobileApps/MyExpenseMobile/flows/main/resources/jsQR"], function(jsqr) {
    'use strict';

    var PageModule = function PageModule() {
    PageModule.prototype.scanIt = function() {
    return "dummy";
    }; };

    return PageModule;

    with this I am getting an error in console saying "The module does not exist or the function 'scanIt' does not exist in the module."
    If I remove the importing part in the js then i am able to call the scanIt function. Am I missing something here ?
  • HongLing Tuesday, October 2, 2018

    I had issue loading the module after I had declared same as you. Is there any other configuration other than loading .js into resources folder?
    I have issue loading the module when I "add define(["mobileApps/MyExpenseMobile/flows/main/resources/jsQR"], function(jsqr)" as well
  • JT Wednesday, October 3, 2018
    You can import the JS into any folder you would like but the path needs to be absolute or relative to the module that loads it. Part of the problem you both may experiencing is that you are using the code exactly as I provided it and it uses a specific app name "MyExpenseMobile." Try replacing that string with the name of your application (assuming it is also a mobileApp).
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.