Starter Guide
Data sources
Use external JS libraries
Check out how to use and connect external JS libraries to UI Bakery
Using moment.js
To use moment.js in your app, no need to configure it additionally, as it comes pre-built. Just follow these simple steps:
- 1.
1
return {{ moment().format("dddd, MMMM Do YYYY, h:mm:ss a") }};
Copied!
2. Run Action, then check the Result tab - you will see the actual date as an outcome.
Using lodash
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.
1
const data = {{ ui.table.selectedRow.data }};
2
return _.filter(
3
{{ actions.list2.data }},
4
_.matches({ 'userId': data.id, 'taskType': data.taskType }),
5
);
Copied!
Connecting and using 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 with copying
<script> tag
1
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
2
Copied!
2. Save the Changes
3. Add a new Form to the canvas
4. Add a new workflow:
- the first step should be Update Row
1
confetti({
2
particleCount: 100,
3
spread: 70,
4
origin: { y: 0.6 }
5
});
Copied!
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 6d ago
Copy link