Use external JS libraries

In UI Bakery, you can use either your own or any public JS library. Also, there are pre-built libraries in UI Bakery as well: moment.js and lodash, that can be used straight away and don't need to be configured additionally.
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.In the Builder mode, Add a new action with Code type and paste the code :
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.
​Add an action with Code type and paste the sample code:
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
next step is the Code step. Specify the sample code:
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 🎉

How Tos - Previous

Add navigation to application

Next - How Tos

Generate PDF document

Last modified 1mo ago

Copy link

Contents

Using moment.js

Using lodash

Connecting and using 3rd party JS library