Work With Third-Party JavaScript Libraries

It’s possible to reference third-party JavaScript libraries in VB Studio when you want to use functions, objects, and variables within that library in your custom code.

To reference external JavaScript libraries in your code, you need to import the JavaScript library to your application's resources, then add custom code to reference the file to be loaded in the module.

1. Import the JavaScript library as an archive to your application.
   1. In the Web Apps pane, go to the Resources folder, right-click js, and click Import.
      If you're using Source view, go to webApps/<webapp>/resources/js and click Import.

      You can choose to import your files directly to the resources folder, but it's best practice to keep all your JavaScript files in the resources/js folder.

   2. Select the archive you want to import and click Import.
2. Define your custom code and reference the file to load into the module. To do that, you use a define statement, which provides the path to the file and the alias with which you refer to the imported library in code.
   Here's an example of the define statement used for the glmatrixmin.js library, a collection of vectors, matrices, and associated linear algebra operations, which has been imported to the application's resources/js folder:

   define(['resources/js/gl-matrix-min'], function(glmatrix) => {
     'use strict';
   
     class AppModule {
       createVec3(form) {
         let myVec3 = glmatrix.vec3.create();
         glmatrix.vec3.set(myVec3, 0,0, 2.0);
         return myVec3;
       }
     }
     
     return AppModule;
   });

   Note how the file is referenced simply by adding resources/js to the name of the JS file (you don't need the .js extension). Note also the alias glmatrix, which is used to name your import in the function() syntax. This alias is the name you'll use to reference the objects and functions within the library.

Tip:

It's also possible to import a JavaScript library to your app's resources, then use Imports in the Settings editor to create a reference to the imported resource that you can call in your application without adding code to your JavaScript file. See Manage Custom Component, CSS, and Module Imports.