Data from Action

The Goal

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

Data from Action Application

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

View[MainView]

• Data from Action[GetHelloWorldText]

• MainView

  • Container[container1]

    • Text[text1]

Action[MainView]

• GetHelloWorldText()

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"

Flow Chart[GetHelloWorldText]

GetHelloWorldText[Output]

Tester[GetHelloWorldText]

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

Outline Panel[myData]

myData[Action Name]

Data Explorer[myData]

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.

Follow up on our Data from Action tutorial https://youtu.be/zdR6fGLgbDo