.svg?alt=media&token=22229f15-f796-4c11-a928-049c59e13a36)
Using external 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 - 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, if necessary.
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:
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.
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:
i18next also comes pre-built so no additional configurations are required. Below is an example of using i18next to add translations and language selector to your app.
The feature allows you to translate not only the app content but also text that is not user controlled, such as interaction, hints, selection, pagination, messages, and validation.
Navigate to the App triggers section in the right side panel and create a new action for the On App Load trigger.
Select the JavaScript Code type and specify the following code to initialize all the translations using i18n.init({...}):
Add a Select component to the working area and add the languages you need to the Options field, for example:
window.i18next.t is now i18n.t.
In the component's Value field, specify {{i18n.language}}.
Next, navigate to the Select component's Triggers section and create a new action for the On Change trigger.
Select the JavaScript Code step and specify the following code:
Finally, add translations anywhere you need to the text by using the i18n.t function.
In our example here, we've added translation to the Heading component:
{{i18n.t('welcome')}}
Done! Now when you select a different language in the Select component, your app will be translated automatically.
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.
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:
Start by locating the library you need on a public JavaScript CDN, for example, https://www.jsdelivr.com/.
Click on the library to open it and copy the provided JavaScript tag:
We'll be using https://www.jsdelivr.com/package/npm/canvas-confetti library as an example.
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:
There are several confetti code options listed on the site so you can choose whichever suits you best.
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
In this example, we add the possibility to switch to German in the app. Check out the instruction below
Submit your changes and enjoy the confetti!
