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 App UI’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 App UI. Note: JS libraries can be imported at the App UI level or at the extension level. For typical usage within an App UI, import your JS library to the resources directory at the App UI level (extension1/sources/ui/self/applications/<app-ui-id>/resources). If you want to use external JS libraries with custom web components and fragments, import your JS library to the resources directory at the extension level (extension1/sources/ui/self/resources/).

   1. In the App UIs pane, go to the Resources folder, right-click js, and click Import.

      If you’re using Source view, go to extension1/sources/ui/self/applications/<app-ui-id>/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 gl-matrix-min.js library, a collection of vectors, matrices, and associated linear algebra operations, which has been imported to the App UI’s resources/js folder:

   define(['resources/js/gl-matrix-min'], (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. 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 Create Declarative References to Imported Resources.