> 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/loading-data-from-action-to-form.md).

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