mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 14:07:26 +00:00
53 lines
No EOL
2.1 KiB
Markdown
53 lines
No EOL
2.1 KiB
Markdown
---
|
|
id: custom-js
|
|
title: Custom JavaScript
|
|
---
|
|
|
|
# Custom JavaScript
|
|
|
|
You can write custom JavaScript code to interact with components and queries. To do that, you just need to create a new query and select **Run JavaScript Code** from the data sources dropdown.
|
|
|
|
|
|
<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/run-js.png" alt="custom js" />
|
|
|
|
|
|
#### Example: Displaying random number
|
|
|
|
- Let's drag a **button** and a **text** widget inside a container widget.
|
|
- Create a new query and select **Run JavaScript code** from dropdown.
|
|
- Write the code in **JavaScript editor** and save the query:
|
|
```jsx
|
|
const a = Math.floor(Math.random() * (10 - 1)) + 1;
|
|
return a;
|
|
```
|
|
:::tip
|
|
|
|
The return value is used as the `data` of the query.
|
|
|
|
:::
|
|
- Let's edit the properties of widgets:
|
|
- Add an event handler to the button - Select **On Click** event, **Run Query** action, and select the `runjs1` query that we created. This will run the JavaScript code every time the button is clicked.
|
|
- Edit the property of text widget - In the text field enter **Random number: `{{queries.runjs1.data}}`**. It will display the output as Random number: *result from JS code*
|
|
|
|
|
|
<img className="screenshot-full" src="/img/datasource-reference/custom-javascript/jsrandom.gif" alt="jsrandom" />
|
|
|
|
|
|
|
|
You can also write custom JavaScript code to get the data from **External APIs** and manipulate the response for graphical representation. Here's the [tutorial](https://blog.tooljet.com/build-github-stars-history-app-in-5-minutes-using-low-code/) on how we used custom JavaScript code to build an app using GitHub API.
|
|
|
|
### Libraries
|
|
|
|
ToolJet allows you to internally utilize these libraries:
|
|
|
|
| Name | Documentation |
|
|
| ----------- | ----------- |
|
|
| Moment | [https://momentjs.com/docs/](https://momentjs.com/docs/) |
|
|
| Lodash | [https://lodash.com/docs/](https://lodash.com/docs/) |
|
|
| Axios | [https://axios-http.com/docs/intro](https://axios-http.com/docs/intro) |
|
|
|
|
:::danger
|
|
|
|
Issues with writing custom JavaScript code? Ask in our [Slack Community](https://tooljet.com/slack).
|
|
|
|
::: |