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 widget. Component specific actions can be triggered either through the event handlers or from the Run JavaScript code query.

:::info Check out the live demo of Component specific actions demonstrated in one of our community call. :::

Available Component Specific Actions

Widget	Component Specific Actions
Button	Click, Set label, Disable, Visibility, Loading
Checkbox	Set checked
Color picker	Set color
Dropdown	Select option
File picker	Clear files
Kanban	Add card, Delete card, Move card, Update card data
Map	Set location
Modal	Show, Close
Multiselect	Select option, Deselect option, Clear selection
Radio button	Select option
Tabs	Set tab
Table	Set page, Select row, Deselect Row, Discard changes
Text	Set text, Set Visibility
Text Area	Set text, Clear
Text Input	Set text, Clear, Set Focus, Set Blur, Disable, Visibility

:::info Currently, Component specific actions are supported only by the above listed widgets. We are working on bringing component specific actions for the remaining widgets. :::

Using Component Specific Actions

Drag a Text Input and a Button widget onto the canvas.
Go to the Inspector on the left sidebar to check the exposed variables available for the textinput1 widget under the components. You'll see that the variable value is an empty string because the field value of the text input widget is empty right now.

</div>

Now enter some value in the text input widget and you'll see that the value in inspector has been updated.

</div>

Now, click on the button's widget 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>

Now when you'll click on the button you'll see that the field value of the text input widget has been updated with value that you set.

</div>

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:

await components.textinput1.clear()

</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 widget has been cleared.

Available Component Specific Actions

Using Component Specific Actions

Set a value for text input widget using button's event handler

Clear value of text input widget using JavaScript query