Using JS libraries

In UI Bakery, you can use either your own or any public JS library. Also, we have a number of libraries included out of the box - moment.js, lodash, and i18next. You can use these libraries straight away without any additional configurations.

In this article, we'll explore how you can use the included libraries and connect other external libraries.

Libraries included in UI Bakery

The moment.js and lodash libraries are preloaded in the JavaScript Code step. You can use them to manipulate dates and other values. For example, to transform date to a specific format:

return {{data}}.map(item => {
  return {
    ...item, // put all the keys from the original object
    created_at: moment(item.created_at).format('MMMM Do YYYY, h:mm:ss a')
  };
});

Or to get deep value from an object:

return _.get({ data }, 'birth.place.country', 'n/a');

We'll dive into more details about these libraries as well as i18next in the following sections.

Using moment.js

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

1. In your app, create a new action of the JavaScript Code type and specify the following code:

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

1. Run the action and check the Result tab - you will see the actual date displayed.

Utilizing moment.js plugins

If you need to utilize some additional plugins, you need to set up both the library and the plugins you need. Below is an example of how you can add a moment-timezone plugin that helps with timezone manipulations. Check it out👇

1. Navigate to the Custom code tab and specify there the script tags of moment.js and the timezone plugin:

<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>

1. Now, create a JavaScript Code action and specify the following code requiring both of the libraries:

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

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

1. Run the action and check the Result tab.

Using lodash

To use lodash in your app, just like with moment.js, you don't need to configure it additionally as it comes pre-built. Below is an example of using lodash when you need to filter a table by several keys of the selected row of another table. You just need to create a JavaScript Code action step and specify the following sample code:

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

Using i18next

i18next also comes pre-built so no additional configurations are required. You can use this library to add translations to your application.

Check out this example of utilizing i18next in your app👇

Internationalization (i18n) & Localization: Translating UI Bakery Apps

External third-party JS libraries

As we mentioned before, you can also connect any external JS library you need and use it in your app. In this section, we'll review an example how you can do that.

Use case: Add a confetti blast upon Form submission

Here we'll use the canvas-confetti library as an example - upon successful Form submission, users will get a confetti blast.

Follow the instruction below to learn how to do that:

1. Start by locating the library you need on a public JavaScript CDN, for example, https://www.jsdelivr.com/.
2. Click on the library to open it and copy the provided JavaScript tag:

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

We'll be using https://www.jsdelivr.com/package/npm/canvas-confetti library as an example.

IMPORTANT: Expand and read the information below before proceeding to the next step.

It is essential to ensure that you are loading the appropriate build for 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 "umd/<library>.min.js", "browser/<library>.min.js" or simply "<library>.min.js" format 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 of such library - 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

1. Now, navigate to the Custom code tab in your app and paste the copied tag there.

2. Add a Form component to the working area.

3. Next, create a new action consisting of two steps:

   1. For the first step, add a Create Row action.

   2. For the second step, add a JavaScript Code action and specify the following code:

confetti({
  particleCount: 500,
  spread: 300,
  origin: { y: 0.6 }
});

There are several confetti code options listed on the site so you can choose whichever suits you best.

1. Finally, navigate to the Triggers section of the Form and assign your newly created action to the On Submit trigger.

2. Submit your changes and enjoy the confetti! 🎉