Using JS libraries
Last updated
Was this helpful?
Last updated
Was this helpful?
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 - , , and . 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.
To use in your app, you don't need to configure it additionally as it comes pre-built. Simply follow the steps below:
In your app, create a new action of the JavaScript Code type and specify the following code:
Run the action and check the Result tab - you will see the actual date displayed.
Navigate to the Custom code tab and specify there the script tags of moment.js and the timezone plugin:
Now, create a JavaScript Code action and specify the following code requiring both of the libraries:
Run the action and check the Result tab.
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.
Follow the instruction below to learn how to do that:
Click on the library to open it and copy the provided JavaScript tag:
Now, navigate to the Custom code tab in your app and paste the copied tag there.
Add a Form component to the working area.
Next, create a new action consisting of two steps:
For the first step, add a Create Row action.
For the second step, add a JavaScript Code action and specify the following code:
Finally, navigate to the Triggers section of the Form and assign your newly created action to the On Submit trigger.
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
To use 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:
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
Here we'll use the as an example - upon successful Form submission, users will get a confetti blast.
Start by locating the library you need on a public JavaScript CDN, for example, .
We'll be using library as an example.
🟢 You would want to use the file located at
🔴 Instead of , 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 - .
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 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 , such as the example of library:
🟢 ESM will work - import yup from '
'
🔴 UMD generated by jsdelivr will not work -
There are several listed on the site so you can choose whichever suits you best.
Submit your changes and enjoy the confetti!