# Sending Data to Action from a Form

### The Goal

Send data from form components to action by triggering a button event.

![Form for sending filled data](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FRRQbR9B6El4KCHqDHSxd%2Fimage.png?alt=media\&token=82604447-1c4c-472f-b39b-a067ec681046)

### What We Are Going to Do

{% tabs %}
{% tab title="Project Structure" %}

* [ ] Action \[`updateTask`]
  * [ ] *Parameters*

    * [ ] `id` \[*Integer*]
    * [ ] `name` \[*String*]
    * [ ] `content` \[*String*]

* [ ] View \[`Form`]
  * [ ] Container \[`container1`]
    * [ ] Text Field \[`fldName`]
    * [ ] Text Area \[`fldContent`]
    * [ ] Button \[`button1`]
      {% endtab %}

{% tab title="View\[dataFromAction]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FgfZVZalk1WMhiDGNnICi%2Fimage.png?alt=media\&token=9ff4af8e-81c6-4c8b-953b-9fc4a9060807)
{% endtab %}

{% tab title="Action\[updateTask]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fbft5NvLXxNtyCgkAuuRy%2Fimage.png?alt=media\&token=abb450d1-18ce-492f-b38c-d85f206f8685)
{% endtab %}
{% endtabs %}

### 1. Create an Action

First, lets create blank action with fixed input parameters.

1. From the *Main Menu*, create a new **Action** and name it `updateTask`.
2. In the Outline panel add three parameters by clicking on the Plus button.
   1. Rename the parameters on `id`, `name`, and `content`.
   2. Set up properties of `id` to *Integer* in the *Inspector* panel, and switch *Required* to `true`. It makes the parameter mandatory.
   3. Leave the `name` and `content` configure to *String*.
3. All available parameters are visible in the *Tester* panel, where a yellow warning shows mandatory blank parameters. In our case `id`.
4. Try filling some values in the testing parameters corresponding to the *value-type* and clicking the `Save & Run button`.
5. If the input parameters are valid *Tester* output will returns following:

```
status: "LOADED"
output: null
```

{% tabs %}
{% tab title="Create updateTask Action" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FFQId4YT9d8JuvwREvu0I%2Fimage.png?alt=media\&token=e52a1085-cd36-444b-b506-233e5e1261c4)
{% endtab %}

{% tab title="Setting Input Parameters" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FH84aKvzTOiqgOoEeRebx%2Fimage.png?alt=media\&token=ae22332b-c06b-4e79-b8a1-2254f9da667c)
{% endtab %}

{% tab title="Required Integer id" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FnnH89FwdnHVc7rb3Flh9%2Fimage.png?alt=media\&token=4298148b-a7a8-4050-93af-9097e6b65ead)
{% endtab %}
{% endtabs %}

### 2. Design a Basic Form

Design a basic form containing **Text Input** and **Text Field** components. 

1. Put a **Container** on the canvas *work-field* and name it `container1`.
2. Set up its layout on *Stretch* with horizontal alignment at right.
3. Place **Text Input** into`container1`, name it`fldName`, and set up its *Label* on 'name*'*.
4. The next component placed will be a **Text Area**, named `fldContent`, and labeled 'content'
5. *Values* of both components can be filled as a *constant* or mapped by action from the previous [Loading Data Tutorial](https://docs.adapptio.com/working-with-adapptio/how-to/data-and-dynamic-values/loading-data-from-action-to-form); what is exactly our case here.
6. *Values* of `fldName` are set up `task.data.name`; `fldContent` *value* is `task.data.content`.

{% tabs %}
{% tab title="Form Components" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FzpJGxD7jqOhLnO2ysxH0%2Fimage.png?alt=media\&token=583a115f-9411-490a-8683-99353a7cdd42)
{% endtab %}

{% tab title="Text Input Setting" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fmut0jxHiMppUE30mS59e%2Fimage.png?alt=media\&token=134ad889-0e8a-4fcc-80a5-3f9180fca3f2)
{% endtab %}

{% tab title="Text Area Setting" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2F0oYKZgRetPes1HK4dzJr%2Fimage.png?alt=media\&token=7d6db74f-3086-4918-8574-43df8f11e968)
{% endtab %}

{% tab title="Current Outline" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FbggTVVJSOffzgOPu7Iax%2Fimage.png?alt=media\&token=be075cb4-9217-427a-b440-871efca58c1e)
{% endtab %}
{% endtabs %}

### 3. Binding a Button with Action

Clicking the new button triggers an event bound with our action.

1. Place a new **Button** component into `container1` and name it `button1`.
2. Design it as you wish, or leave it at the *Default*.
3. Switch from *Options* to *Event panel* in the *Inspector* and clicking on the 'click' option will open the *Event editor*.
4. Drag & Drop **Call Action** component to *Flow canvas* and wire it together with **Event Start**.
5. Selecting the **Call Action** component allows us to define its attributes in *Inspector*.
6. Click on 'Click to select' and choose `updateTask` action.
7. Blank parameters will appear at *Inspector* that moment.
   1. Set up parameters *Values* on the following: `id` -> `task.data.id`; `name` -> `fldName.value;` `content` -> `fldContent.value`
8. We are done! *Data* will be sent to the action by clicking on the `button1` in *Preview mode* or after *Application deployment*.

{% tabs %}
{% tab title="Flow Event Canvas" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fk3JsoM43xP6Z74pflyfV%2Fimage.png?alt=media\&token=f9e52e45-77f2-4905-8913-0c73937b6d29)
{% endtab %}

{% tab title="Call Action Parameters" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fsp4yP4f4NYucNHt0LqkT%2Fimage.png?alt=media\&token=a801d152-3a67-446e-ba81-361b3253d38f)
{% endtab %}

{% tab title="Final Outline" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FWcvyO3HWK1Vk4vDOellJ%2Fimage.png?alt=media\&token=bc028723-4ec8-4822-8fe0-f00ed7d5aec7)
{% endtab %}
{% endtabs %}

### The Conclusion

This method is commonly used to reference any outgoing forms or other components values referenced to action.