Use external JS libraries
Check out how to use and connect external JS libraries to UI Bakery
To use moment.js in your app, no 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:
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')
Here's an example on 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 with copying
<script> tag
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
2. Save the Changes
3. Add a new Form to the canvas
4. Add a new workflow:
- 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
- the last step would be Execute Action - select the step that loads data in the Table
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 🎉
Last modified 1mo ago