# Loading Data from Action to Form

### The Goal

Our goal is to return data from an action and put them into form fields as initial values.

The most common use cases are *edit* pages. We have data already in the database and we want to load them into to the form so user can edit them.

<div align="left"><img src="/files/xPaQSHtLL2a5Vs0UhCFW" alt="Form components with data loaded from an action"></div>

### 1. Create an action

Let's create an action that will return some sample data.

1. From the *Main Menu*, create a new **Action** and name it `getTask`.
2. From the *Functions* panel drag the **Output** function and drop it to the *flow canvas*. Then connect `Start` node with the `Output` node.
3. Select the `Output` node and edit it's configuration options as follows:
   1. Change the **type** of `Return value` property to `Map {}`(a little icon next to the field).
   2. Add three items: `id`, `name` and `content`
   3. Open each item and set their value to:\
      id: `1`, name: `Task AAA`, and content: `Hello from task 1`.
4. To test if your setup is correct, click on the `Save & Run Action` button. You should see the following data in the *Tester* output:

```
id: 1
name: "Task AAA"
content: "Hello from task 1"
```

{% tabs %}
{% tab title="getTask Flow" %}
![](/files/SappiRrgxxDAfGExTp2T)
{% endtab %}

{% tab title="Output Settings" %}
![](/files/MSeFr0uVobGWQiaZZXYM)
{% endtab %}

{% tab title="Map Item Settings" %}
![](/files/bxiiiu5yjz4NkovDxM3v)
{% endtab %}
{% endtabs %}

### 2. Create a view

Now, we are going to create a simple view with two form elements and one action data source.

1. From the *main menu*, create a View and name it as you wish.
2. In the Outline panel, click on the Plus button and select **Add Data from Action**. This will create an object called *Action Data Source.*
3. Then in the *inspector* panel, click on the *Action Name* field and select the `getTask` action we've just created in the previous step.
4. Also, we recommend to change the action data source ID to `tasks`.
5. If configured correctly you should see the `tasks` item in the *Data Explorer* panel. When you open it it should have the `LOADED` state and you should see data returned from the action in the `data` property.
6. Now, place the **Text Input** and **Text Area** components into the view canvas. Change their IDs as follows: Text Input:  `fldName`; Text Area: `fldContent`.

### 3. Link data

So far we've added the action data source and components. Now, let's link them together.

1. Select the `fldName` component.
2. In the [*Inspector*](/getting-started/editor/components-panel/inspector.md) panel, find the **Value** property and switch it to expression (click the **fx** button).
3. Now let's put there an expression that returns the data from our data source:\
   `task.data.name`. This tells us that we want to access the `name` property from our `data` that has been returned from our `tasks` data source. You can see this hierarchy in the *Data Explorer* panel.
4. Do the same for the `fldContent` component as well but change `name` to `content` in the value expression.

{% tabs %}
{% tab title="Components List" %}
![](/files/rng5x2LxecmvffaKF7Na)
{% endtab %}

{% tab title="Components Structure" %}

* [ ] Action \[getTask]

* [ ] Data Action Variable \[task]

* [ ] Container \[container1]
  * [ ] Text Input \[fldName]
  * [ ] Text Area \[fldContent]
    {% endtab %}
    {% endtabs %}

{% tabs %}
{% tab title="Adding Action Data Source" %}
![](/files/rrqyl83avc5w0Wj55PLo)
{% endtab %}

{% tab title="Data Source Settings" %}
![](/files/6HUYU7LcV1xuiRFG1Aix)
{% endtab %}

{% tab title="Data Explorer" %}
![](/files/8XTVOdrnDJTqVthinh9J)
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Text Input and Field" %}
![](/files/E9FWkYusiSJ4cvSk94Hs)
{% endtab %}

{% tab title="Binding Text Input Value" %}
![](/files/DEwCB3f3sZAjtOG3b5QV)

```
task.data.name
```

{% endtab %}

{% tab title="Binding Text Area Value" %}
![](/files/LBUsgESQhK6BoVH4zbJw)

```
task.data.content
```

{% endtab %}
{% endtabs %}

### Conclusion

Try to upgrade the form - add a field for a missing ID property.


---

# 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/loading-data-from-action-to-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.
