id | title |
---|---|
import-external-libraries-using-runjs |
Import external libraries using RunJS |
ToolJet allows you to utilize external libraries in your app by importing them using the RunJS query.
In this how-to guide, we will import a few JavaScript libraries and use it in the application.
:::tip You can import any of the available libraries using their CDN. Find free CDN of the open source projects at jsDelivr :::
-
Create a new application and then create a new RunJS query from the query panel.
-
Let's write some code for importing libraries. We will first create a function
addScript
that returns aPromise
, thePromise
creates a script tag -> sets an attribute -> and eventListenerresolves
if its loaded andrejects
if there is an error, and then body is appended at the end. -
We are going to import two libraries using their CDNs: MathJS and Flatten, and display an alert when the libraries are loaded successfully.
function addScript(src) { return new Promise((resolve, reject) => { const s = document.createElement('script'); s.setAttribute('src', src); s.addEventListener('load', resolve); s.addEventListener('error', reject); document.body.appendChild(s); }); } try { await addScript('https://cdn.jsdelivr.net/npm/mathjs@11.7.0'); await addScript('https://cdn.jsdelivr.net/npm/flattenjs@2.1.3/lib/flatten.min.js'); await actions.showAlert("success", 'Mathjs and Flatten imported') } catch (e) { console.log(e); }
-
Now, when you hit create and then run the query, the script will be injected into the DOM. An alert should pop-up with the message Mathjs and Flatten imported.
:::tip Enable the Run this query on application load? option to make the libraries available throughout the application as soon as the app is loaded. :::
-
Let's create a new RunJS query that will use Flatten library(imported in the above section) and the query will flatten the JSON object.
return flatten({ key1: { keyA: 'valueI' }, key2: { keyB: 'valueII' }, key3: { a: { b: { c: 2 } } } })
-
Save the query, you can either Preview the output on the query manager or Run the query to check the output on the inspector on the left-sidebar.
- Let's create a new RunJS query that will return the result of calculation performed by atan2 method and then divided by pi.
return math.atan2(3, -3) / math.pi
-
Save the query, you can either Preview the output on the query manager or Run the query to check the output on the inspector on the left-sidebar.