mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 22:17:55 +00:00
2d08d889de
* add custom resolvers info and editable row selection info (#9057) * fix system requirements icon * add auth info for webhooks and fix casing * add regex custom validation info (#9068) * [docs]: Marketplace 1.7 updates (#9085) * [docs] Amazon redshift plugin * make minor improvements * add and update docs for marketplace 1.7 * update order of plugins in overview to match sidebar * create new version --------- Co-authored-by: Shubhendra <withshubh@gmail.com> * add the latest version in the versions.json file (#9094) * [docs]: Update PDF component (#9088) * update PDF component * merged with develop and added changes to the new version * update docs favicon: (#9118) * [docs] SSO revamp (#9031) * add method to set default language * update image settings through custom css and update screenshots for getting started and tooljet concepts (#9158) * fix read documentation button * fix formatting for setup icons (#9172) * fix sidebar link for aws lambda * Update static media (#9175) * updated the screenshots * reduced the gif size * reverted the package.json file * edited the zoomed in images and replaced some gifs with screenshots * removed one gif * update static media * update file names * update toolbar * fix file names * fix: dynamodb img path * update media for org management dashboard * fix: casing and formatting * update workspace constant media * update media in workspace settings and github * update github sso * minor change to github sso docs * minor fix * update google sso * change includeCurrentVersion flag to false --------- Co-authored-by: Asjad Ahmed Khan <iitasjad2001@gmail.com> Co-authored-by: Asjad Ahmed Khan <60435499+2001asjad@users.noreply.github.com> Co-authored-by: Karan Rathod <karan.altcampus@gmail.com> * Feature: Engagespot plugin (#9012) * feat(plugins): added engagespot plugin * feat(docs): added engagespot plugin docs * chore(engagespot-plugin): revised copywritings * Feature: Databricks data source (#9174) * plugin-created * Databricks integration * icon, error handling * removed unrelated changes from marketplace and frontend package-lock.json removed runAsync and maxRows timeouts pending * timeout implementation * socket timeout and error handling * resolve comments * resolve comments2 * solved render issue test connection improvements * solved undefined error * fix TJDB not null value fail for is operation (#9055) * fix TJDB not null value fail for is operation * handling not null and null case insenstive values * Support for marketplace plugin deploy on render preview app (#9221) * Fix for marketplace error on render preview app * add marketplace build command * Adding new workflow for building marketplace plugin * removed render app creation * [:docs] Add documentation for Databricks plugin (#9224) * add docs for databricks * update databricks docs * update docs * remove ref to clusters * bump to v2.34.0 * Fixed data source cypress failure (#9227) * updated spec with required text * updated mongodb and import spec * updated import spec --------- Co-authored-by: Karan Rathod <karan.altcampus@gmail.com> Co-authored-by: Adish M <44204658+adishM98@users.noreply.github.com> Co-authored-by: Midhun G S <gsmithun4@gmail.com> Co-authored-by: Shubhendra <withshubh@gmail.com> Co-authored-by: Aman Regu <amanregu@gmail.com> Co-authored-by: Asjad Ahmed Khan <iitasjad2001@gmail.com> Co-authored-by: Asjad Ahmed Khan <60435499+2001asjad@users.noreply.github.com> Co-authored-by: Jobin Jose <129726530+jobin-logidots@users.noreply.github.com> Co-authored-by: Syed Mohammad Akhtar Rizvi <85864291+ShazanRizvi@users.noreply.github.com> Co-authored-by: blank0537 <111295371+blank0537@users.noreply.github.com> Co-authored-by: Mekhla Asopa <59684099+Mekhla-Asopa@users.noreply.github.com>
102 lines
4.7 KiB
Markdown
102 lines
4.7 KiB
Markdown
---
|
|
id: control-component
|
|
title: Control component (Component Specific Actions)
|
|
---
|
|
|
|
Control component action invokes the component specific actions. Component specific actions are the actions that are exclusive actions for a particular component. Component specific actions can be triggered either through the event handlers or from the Run JavaScript code query.
|
|
|
|
You can find the component specific actions for the specific component in their respective documentation. For example, you can find the component specific actions for the **Bounded Box** component in the [Bounded Box](/docs/widgets/bounded-box) documentation.
|
|
|
|
<details>
|
|
<summary>Currently, Component specific actions are supported only by the below listed components.</summary>
|
|
<div>
|
|
<ul>
|
|
<li><a href="/docs/widgets/button#component-specific-actions-csa">Button</a></li>
|
|
<li><a href="/docs/widgets/checkbox#component-specific-actions-csa">Checkbox</a></li>
|
|
<li><a href="/docs/widgets/color-picker#component-specific-actions-csa">Color Picker</a></li>
|
|
<li><a href="/docs/widgets/dropdown#component-specific-actions-csa">Dropdown</a></li>
|
|
<li><a href="/docs/widgets/file-picker#component-specific-actions-csa">File Picker</a></li>
|
|
<li><a href="/docs/widgets/form#component-specific-actions-csa">Form</a></li>
|
|
<li><a href="/docs/widgets/icon#component-specific-actions-csa">Icon</a></li>
|
|
<li><a href="/docs/widgets/kanban#component-specific-actions-csa">Kanban</a></li>
|
|
<li><a href="/docs/widgets/link#component-specific-actions-csa">Link</a></li>
|
|
<li><a href="/docs/widgets/map#component-specific-actions-csa">Map</a></li>
|
|
<li><a href="/docs/widgets/modal#component-specific-actions-csa">Modal</a></li>
|
|
<li><a href="/docs/widgets/multiselect#component-specific-actions-csa">Multiselect</a></li>
|
|
<li><a href="/docs/widgets/radio-button#component-specific-actions-csa">Radio button</a></li>
|
|
<li><a href="/docs/widgets/table#component-specific-actions-csa">Table</a></li>
|
|
<li><a href="/docs/widgets/tabs#component-specific-actions-csa">Tabs</a></li>
|
|
<li><a href="/docs/widgets/text-input#component-specific-actions-csa">Text Input</a></li>
|
|
<li><a href="/docs/widgets/text#component-specific-actions-csa">Text</a></li>
|
|
<li><a href="/docs/widgets/textarea#component-specific-actions-csa">Text Area</a></li>
|
|
</ul>
|
|
</div>
|
|
</details>
|
|
|
|
:::info
|
|
Check out the **[demo](https://youtu.be/JIhSH3YeM3E)** of Component specific actions demonstrated in one of our community call.
|
|
:::
|
|
|
|
## Using Component Specific Actions
|
|
|
|
### Set a value for text input component using button's event handler
|
|
|
|
- Drag a **Text Input** and a **Button** component onto the canvas.
|
|
|
|
- Go to the **Inspector** on the left sidebar to check the exposed variables available for the `textinput1` component under the `components`. You'll see that the variable `value` is an empty string because the field value of the text input component is empty right now.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
- Now enter some value in the text input component and you'll see that the `value` in inspector has been updated.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
- Now, click on the button's component handler to open up its properties in the right sidebar and then add a event handler for **On Click** event to trigger **Control Component** action. Select `textinput1` in component dropdown, `Set text` as Action, and in `Text` field enter the text that you want to update in the field value.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
- Now when you'll click on the button you'll see that the field value of the text input component has been updated with value that you set.
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
### Clear value of text input component using JavaScript query
|
|
|
|
- Let's clear the value that we set in the previous section, using Run JavaScript code. Create a new Run JavaScript Code query and call the component and the CSA that component provides.
|
|
|
|
**Syntax:**
|
|
```js
|
|
await components.textinput1.clear()
|
|
```
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div style={{textAlign: 'center'}}>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
- Finally, hit the **save and run** query button to fire up the query, and you'll see that the field value of the text input component has been cleared.
|
|
|