Skip to main content
Version: 2.0.0

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.

    Import external libraries using RunJS
  • Let's write some code for importing libraries. We will first create a function addScript that returns a Promise, the Promise creates a script tag -> sets an attribute -> and eventListener resolves if its loaded and rejects 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/[email protected]');
    await addScript('https://cdn.jsdelivr.net/npm/[email protected]/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.

    Import external libraries using RunJS
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.

Examples

Flatten the JSON objects using FlattenJS

  • 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.

    Import external libraries using RunJS

Computation using MathJS

  • 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.

    Import external libraries using RunJS