Controlling Components Using Code
Apart from events, Component-Specific Actions (CSAs) can also be triggered using code to modify component properties and state.
Let’s say you want to:
- Reset a Form automatically after submission
- Show or hide components based on a condition
- Update a Text Input based on another field’s value
- Disable a button during API calls
- Change the active tab programmatically
In each of these cases, you can use CSAs with JavaScript or Python queries.
How It Works​
Each component in ToolJet comes with a set of CSAs. Below are some examples of CSAs:
- setValue() – Sets or updates a component’s value
- clear() – Clears the value of an input
- setLoading() – Sets or unsets the loading state
- setDisable() – Enables or disables a component
- setVisibility() – Dynamically controls component visibility
You can trigger these actions from your JavaScript or Python queries.
For example, if you have a Button that triggers a query and want to show a loader until the data is loaded. You could use setLoading()
to show a spinner:
await components.button1.setLoading(queries.getData.isLoading)
Use Cases​
Pre-fill a Form Field Based on User Selection​
When a user selects a product from a Dropdown, automatically set the price in a Text Input component:
await components.textInput1.setValue(components.dropdown1.value)
Clear Fields After Submitting a Form:​
After a user submits a Form, reset all inputs:
await components.formInput.resetForm()
Close the Modal after Form Submission:​
If you are using a Modal for collecting data, close it once the Form has been submitted successfully:
await components.modal1.close()
Using CSAs in your code lets you dynamically control component behavior based on custom logic.