Use external JS libraries
Check out how to use and connect external JS libraries to UI Bakery
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.
return {{ moment().format("dddd, MMMM Do YYYY, h:mm:ss a") }};
2. Run Action, then check the Result tab - you will see the actual date as an outcome.
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 Code tab of the application's settings:
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js
"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment-timezone.min.js"></script>
2. Click Save changes.
3. In the action, before using moment.js, you'll now 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')
.png?alt=media&token=04735d22-0dc8-4f4e-b830-b8b2aa9cad5b)
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.
const data = {{ ui.table.selectedRow.data }};
return _.filter(
{{ actions.list2.data }},
_.matches({ 'userId': data.id, 'taskType': data.taskType }),
);
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/[email protected]/dist/confetti.browser.min.js"></script>
It is essential to ensure that you are loading the appropriate build for use in the browser. 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 they are typically named using 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/[email protected]/umd/react.production.min.js"
🔴 Instead of "https://cdn.jsdelivr.net/npm/[email protected]/index.js" which contains require calls.
It is important to note that some libraries may not have a browser-compatible build available. An example of this 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:
🔴 UMD generated by jsdelivr will not work - https://cdn.jsdelivr.net/npm/[email protected]/lib/util/printValue.min.js
2. Go to app settings (top left corner button) and navigate to the Code tab, paste the code and click Save changes:
Now your library is connected and loaded to your UI Bakery application, time to use it.
3. Add a new Form to the canvas
4. Add a new action:
- the first step should be Update Row
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 tab of the form and assign the newly created action to the On Submit trigger.
6. Publish the changes and check the submission now 🎉