LogoLogo
  • Adapptio User Documentation
  • Getting Started
    • Quickstart
    • Architecture Overview
      • Views
      • Actions
      • Integrations
      • API Endpoints
      • Routes
      • Events
      • Assets
    • Editor
      • Main Menu
        • Create New Resources
        • Manage the Application
        • Monitoring Errors
      • Main Toolbar
        • Deploying the Application
        • Opening the Application
        • Preview Mode
        • Error Monitor
      • Components Panel
        • Components
        • Inspector
        • View Settings
      • Outline Panel
        • Data Variables
          • State Variable
          • Data From Action
      • Data Explorer
      • Console
    • Playground
  • Working with Adapptio
    • Best Practices
    • Tutorials
      • 1. Hello World
      • 2. Visualize Data from API
      • 3. Advanced Layout Application
      • 4. Application with In-Memory Database
    • How To
      • Custom Auth
      • Action Logic
        • Transform Node
      • UI Logic
        • Logout
        • Conditional Render
        • One Of
      • Data & Dynamic values
        • Custom Variable
        • Data from Action
        • Dynamic Value
        • Change Value from Event
        • Loading Data from Action to Form
        • Sending Data to Action from a Form
        • Server-side Dropdown Autocompletion
      • Visual
        • Styling Icon Button
      • Layouts
        • Centered Box
        • Header & Sidebar Layout
        • Grid Form Layout
        • Stretched Layout in Row
    • Components
      • Composed Chart
      • Advanced Table
      • Custom Component
    • Examples of Applications
      • SaaS Platforms
      • Customers Portals
      • Information Systems
      • Internal Tools
        • Color Picker
      • IoT Applications
      • Smart Portals
      • Analytics & Calculators
      • Statistics & Monitoring Panels
      • API Data Visualization
      • Simple Games
  • DEPLOYMENT
    • Cloud Hosted
    • Self Hosted
  • REFERENCE GUIDE
    • Components List
      • Application Header
      • Box
      • Container
      • Grid
      • Sidebar Layout
      • View
      • Text Input
      • Number
      • Checkbox
      • Option
      • Date and Time
      • File Upload
    • Properties
      • ACCEPT
      • CUSTOM PLACEHOLDER
      • DESCRIPTION
      • ENABLED
      • FONT SIZE
      • FOREGROUND COLOR
      • FORM DATA KEY
      • HEADERS
      • ICON
      • ID
      • LABEL
      • METHOD
      • MULTIPLE
      • MAX FILE SIZE
      • REQUEST TIMEOUT
      • REQUIRED
      • READ-ONLY
      • SIZE
      • TEXT ALIGNMENT
      • TEXT STYLE
      • URL
      • UPLOAD IMMEDIATELY
      • VALIDATE
      • VALUE
    • Functions
      • Array
      • Date
      • Generators
      • JSON
      • Logic
      • Math
      • Object
      • String
      • Types
      • Util
  • Support
    • Get in touch
    • Release Notes
  • Legal
    • Terms and Conditions
    • GDPR
Powered by GitBook
On this page
  • The Goal
  • The Description
  • The Knowledge You Will Get
  • The Project Structure
  • 1. Prepare a Basic Layout
  • 2. Bind a Dynamic Value
  • The Conclusion

Was this helpful?

  1. Working with Adapptio
  2. How To
  3. Data & Dynamic values

Dynamic Value

PreviousData from ActionNextChange Value from Event

Last updated 2 years ago

Was this helpful?

The Goal

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

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

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.

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

Dynamic Value Application