# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.adapptio.com/working-with-adapptio/how-to/data-and-dynamic-values/sending-data-to-action-from-a-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.