# Data from Action

### The Goal

Prepare a *Basic Application* returning data from action and its content display in the *Canvas*.

![Data from Action Application](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FY0PxPEvv4wcrJ4z9QQBO%2Fimage.png?alt=media\&token=4e9d58e9-dab7-49f2-8170-2a74dec49bea)

### The Description

Let's say that we will prepare an action returning `Hello World` *String* which will be displayed in the middle of the *Canvas* by the *Text* component.

### The Knowledge You Will Get

1. Working with data returned by action and its association with a component.

### The Project Structure

{% tabs %}
{% tab title="View\[MainView]" %}

* [ ] Data from Action\[`GetHelloWorldText`]

* [ ] MainView
  * [ ] Container\[`container1`]
    * [ ] Text\[`text1`]
      {% endtab %}

{% tab title="Action\[MainView]" %}

* [ ] `GetHelloWorldText()`
  {% endtab %}
  {% endtabs %}

### 1. Prepare an Action Returning `Hello World` String

The action itself is not executed till we call it by some *Method* or schedule it. Let's prepare an *Action* returning `Hello World` *String* and test its output.

1. Create an *Action* and name it `GetHelloWorldText`.
2. *On Start*: Place in the **Output** *Function*, wire it together, and set up its *Option* -> *Value* –> "`Hello World`"
3. *Save & Run Action* in the Tester and check if the *Return Value* is `output: "Hello World"`

{% tabs %}
{% tab title="Flow Chart\[GetHelloWorldText]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fv074wkwuHWEqdRqKZRH7%2Fimage.png?alt=media\&token=79177fd4-dc73-45ec-822a-cc2f3cfd5657)
{% endtab %}

{% tab title="GetHelloWorldText\[Output]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FFBMPOAvbt0wJszXdE509%2Fimage.png?alt=media\&token=aa5435e8-16c0-4fd8-89ae-e0d570fd6f01)
{% endtab %}

{% tab title="Tester\[GetHelloWorldText]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fvc2SxQP8S4NSY0Om4t5g%2Fimage.png?alt=media\&token=e67544d8-a40a-4531-80b1-4956bdf4f2bf)
{% endtab %}
{% endtabs %}

### 2. Add Data from Action in the MainView

Binding together `GetHelloWorldText` *Action* and *Add Data from Action* will provide an associable data source in the current `MainView`.

1. Create a new **Add Data from Action** in the *Outline Panel* and name it `myData`.
2. In the Inspector set up *Action Name* -> `GetHelloWorldText` by *click & select*.
3. Check `myData` structure in the *Data Explorer*. If you did it right, you can see `myData` -> `output: "Hello World"`.

{% tabs %}
{% tab title="Outline Panel\[myData]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fb1mGBH4TNHZrjLlRo0tB%2Fimage.png?alt=media\&token=33957d5d-4715-4659-b7c4-4407a0185c5b)
{% endtab %}

{% tab title="myData\[Action Name]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FDbGJf9o6xMx7pWmYk8um%2Fimage.png?alt=media\&token=3fcf66a3-7284-4637-b2c6-f6664ce4eb84)
{% endtab %}

{% tab title="Data Explorer\[myData]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FFljbwvNvfYkFFjSmz3dd%2Fimage.png?alt=media\&token=cf8caf69-267d-47c5-84bc-5bcf10d30fbb)
{% endtab %}
{% endtabs %}

### 3. Create an Output Text Layout

Showing *data content* can be done by the *Text* component, as in our case here.

1. Place into the *Canvas* a new **Container** and set up its *Item Flex* -> `Stretch`; *Vertical Alignment* -> `Middle`
2. Into the *Container* put a **Text** component with the following configuration: *Text Alignment* -> `Center`; *Text Style* -> `Bold`; *Font Size* -> `XXXLarge`; *Foreground* -> `RED`
   1. Finally, associate *data* returned by *Action*: *Value* -> `myData.data`

### The Conclusion

We learned that *Actions* can provide *returning values* that have to be bound by adding data sources in the required *View*. Try to add more returning values and associate them with different *Components*.

{% hint style="info" %}
Follow up on our *Data from Action* tutorial <https://youtu.be/zdR6fGLgbDo>
{% endhint %}