Use external JS libraries

Check out how to use and connect external JS libraries to UI Bakery

In UI Bakery, you can use either your own or any public JS library. Also, some libraries are included out of the box: moment.js and lodash. These libraries can be used straight away with no additional configuration.

Using moment.js

To use moment.js in your app, you don't need to configure it additionally, as it comes pre-built. Just follow these simple steps:

1. In the Builder mode, Add a new action with Code type and paste the code :

return {{ moment().format("dddd, MMMM Do YYYY, h:mm:ss a") }};

2. Run Action, then check the Result section - you will see the actual date as an outcome.

Using moment.js plugins

The moment.js is pre-loaded, however, if you need to use some additional plugins, you need to setup both libraries to be able to use the plugins. Let's add a moment-timezone plugin that helps with the timezone manipulations.

1. Copy the script tag of moment.js and the required plugin and paste it into the Custom Code section of the builder:

<script src="
https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js
"></script>

<script src="https://cdn.jsdelivr.net/npm/moment-timezone@0.5.40/moment-timezone.min.js"></script>

2. In the action, before using moment.js, you need to require both of the libraries:

var moment = require('moment'); require('moment-timezone');

const now = moment();
return now.tz('America/Los_Angeles').format('ha z')

Using lodash

Here's an example of how to use lodash library for the case when you need to filter a table by several keys of the selected row of another table. Since it comes pre-built, no need for additional setup.

Add an action with Code type and paste the sample code:

const data = {{ ui.table.selectedRow.data }};
return _.filter(
  {{ actions.list2.data }},
  _.matches({ 'userId': data.id, 'taskType': data.taskType }),
);

Connecting and using external 3rd party JS library

Let’s review an external JS library connection and usage on canvas-confetti library example. The case is that upon successful form submission, the user gets a confetti blast.

1. Start by locating a library on a public JavaScript CDN, such as https://www.jsdelivr.com. Once you found the library (e.g. https://www.jsdelivr.com/package/npm/canvas-confetti), copy the provided JavaScript tag:

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>

It is essential to ensure that you are loading the appropriate build for a browser usage. The recommended approach is to load the minified UMD build from a CDN as opposed to the index.js file. This is because the index.js file may contain imports and require calls that require preprocessing before they can be utilized in the browser.

The naming conventions for builds that are suitable for loading in the browser vary among libraries, but are typically named following the format "umd/<library>.min.js", "browser/<library>.min.js" or simply "<library>.min.js" in the root folder.

For example, when using React:

🟢 You would want to use the file located at "https://cdn.jsdelivr.net/npm/react@17.0.1/umd/react.production.min.js"

🔴 Instead of "https://cdn.jsdelivr.net/npm/react@17.0.1/index.js" which contains require calls.

It is important to note that some libraries may not have a browser-compatible build available. An example is "https://www.jsdelivr.com/package/npm/@datasert/cronjs-matcher".

Linking to the incorrect file may result in errors such as "require is not a function" or "module is undefined" in the browser console when starting your application. A comprehensive list of libraries and their respective browser-compatible builds can be found on the https://www.jsdelivr.com/ website.

Additionally, some libraries may be available as ESM builds and not available as UMD builds. If a library is not working as expected, you can check for the availability of ESM builds on https://www.jsdelivr.com/ such as the example of https://www.npmjs.com/package/yup library:

🟢 ESM will work - import yup from 'https://cdn.jsdelivr.net/npm/yup@0.32.11/+esm'

🔴 UMD generated by jsdelivr will not work - https://cdn.jsdelivr.net/npm/yup@0.32.11/lib/util/printValue.min.js

2. Open the Custom Code section and paste the code:

3. Add a new Form to the canvas.

4. Add a new action:

• the first step should be Update Row

• next step is the Code step. Specify the sample code:

confetti({
  particleCount: 100,
  spread: 70,
  origin: { y: 0.6 }
});

Please note that there are several confetti code options listed on the site, so you can choose any of those that suits you best.

5. Next, go to the Triggers section of the form and assign the newly created action to the On Submit trigger.

6. Publish the changes and check the submission now 🎉