> For the complete documentation index, see [llms.txt](https://docs.adapptio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.adapptio.com/working-with-adapptio/how-to/data-and-dynamic-values/sending-data-to-action-from-a-form.md).

# 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](/files/h8cwY7CssoJg0Tv7XDOI)

### 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]" %}
![](/files/ZrQyvF32gRPrZ09ED2fm)
{% endtab %}

{% tab title="Action\[updateTask]" %}
![](/files/nmZfP9Lgj88ITI7JCoaB)
{% 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" %}
![](/files/76PUF9VdBuvAw2cIChll)
{% endtab %}

{% tab title="Setting Input Parameters" %}
![](/files/36WHSU4WXnbl4ZkhMTEt)
{% endtab %}

{% tab title="Required Integer id" %}
![](/files/4al5J3iejdXhDhtheJUb)
{% 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](/working-with-adapptio/how-to/data-and-dynamic-values/loading-data-from-action-to-form.md); 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" %}
![](/files/qoTnNiHKyPjGKHQhMQA7)
{% endtab %}

{% tab title="Text Input Setting" %}
![](/files/M7ZXZOB2R8DzYBCqwVqq)
{% endtab %}

{% tab title="Text Area Setting" %}
![](/files/xovJxP9Tl33ZpQgwPDkt)
{% endtab %}

{% tab title="Current Outline" %}
![](/files/hixCL34ajyF6ZKYsknEE)
{% 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" %}
![](/files/kEbPsQLtYavORXh95kut)
{% endtab %}

{% tab title="Call Action Parameters" %}
![](/files/PzcI3jWMGcuaLcePo9xa)
{% endtab %}

{% tab title="Final Outline" %}
![](/files/ihE1sahXxCJBRwK3mqre)
{% endtab %}
{% endtabs %}

### The Conclusion

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