How to import external libraries in Visual Builder

In this tutorial i will explain how you can use an AMD based library in Visual Builder. If the library does not supports AMD style import, you should import the library directly in your index.html. Please read the library instructions before attempting to import it in Visual Builder.

Configure requirejs paths

Go to app-flow.json and make an entry like below

"requirejs":{
    "paths":{
     "xlsx":"https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.2/xlsx.full.min"
    }
  }

requirejs should be a sibling node to id, description or defaultPage entries in app-flow.json.

In the above step we are configure requirejs with a new path xlsx with the value https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.2/xlsx.full.min . Make sure you omit the .js at the end of the cdn url, requirejs will add it automatically. In case your lib is added as app resources i.e. available under resources/js/path/to/lib. then your requirejs entry should look like this:

"requirejs":{
    "paths":{
     "myLib":"resources/js/path/to/lib"
}
  }

Once configured, we can move to next step where we can consume the library.

Import the library

So far we have only configured from where we need to load our library, in this step we will load and use it.

In your page module define function, make an entry for the library

define(['xlsx'], function(XLSX) {...}

When the page is loaded requirejs will fetch the xlsx lib from the location defined in step#1 and pass down a reference to the callback function (XLSX). One thing you should know as a developer that all these are AMD specification for configuring and loading modules, visual builder uses requirejs (an AMD implementation) hence these step are needed.

Any module function you define in the page module will have access to the imported lib via XLSX.

Version

VBCS: 19.4.3.13

JET: 8.1.3