1.9 KiB
| id | title |
|---|---|
| control-components | 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.