Dynamic Value

The Goal

Prepare a Basic Application binding Input Text Field Value with another Text component.

Dynamic Value Application

The Description

Any component's values can be referenced as data output for another. We are using Text Input which Value is bound with empty Text.

The Knowledge You Will Get

1. Understand how to Value association works.

The Project Structure

View[MainView]

• MainView

  • Container[cntMain]

    • Text Input[txtInput]

    • Text[txtOutput]

1. Prepare a Basic Layout

Let's start with Main Container with two included components; Text Input and Text.

1. Place in a new Container, name it cntMain, and set up its Item Flex -> Stretch; Horizontal Alignment -> Center; Vertical Alignment -> Middle

2. Into the cntMain put a Text Input and name it txtInput.

3. Right under place a new Text and set up its Properties as follows: ID -> txtInput; Text Style -> Bold; Font Size -> Large

2. Bind a Dynamic Value

Associating Dynamical Value by a Function can be done in just two steps.

1. Switch Value of txtOutput to dynamic Function by clicking on the right side ƒx icon.

2. Edit txtOutput Value -> txtInput.value

Watch your Canvas what happens if you will type just txtInput.

txtOutput[Properties]

Data Explorer[txtInput]

txtOutput without .value fx

The Conclusion

Binding and referencing Values are efficient and always reflect the state in the Data Explorer.

Follow up on our Dynamic Value tutorial https://youtu.be/F-SmrBlVUZY