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 Grid Layout
  • 2. Create and Bind a New State Variable
  • 3. Bind an Event Logic to the button1
  • The Conclusion

Was this helpful?

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

Change Value from Event

PreviousDynamic ValueNextLoading Data from Action to Form

Last updated 3 years ago

Was this helpful?

The Goal

Prepare a Basic Application showing the exact number with the Subtraction Button.

The Description

In most cases, applications like a calculator are effectively composed by the Grid. The Text component reflects the State Variable, which has been subtracted by one by triggering an Event of Button.

The Knowledge You Will Get

  1. How to work with Values from the Events.

The Project Structure

1. Prepare a Grid Layout

First, let's prepare a Basic Grid Layout structure, including Text and Button components.

  1. Place in a Grid Layout component, keep ID -> grid1; Columns -> 12, and set up its Item Flex -> Stretch; Spacing -> None

  2. Into grid1 put a new Text, keep its ID -> text1; Text Alignment -> Center; Text Style -> Bold; Font Size -> Large; Vertical Alignment -> Center

    1. Layout -> Item Position -> X -> 1; Y -> 3; Width -> 8; Height -> 6

  3. Place into the grid1 a new Button, keep ID -> button1, and set up its Icon Name -> "mdi/minus"; Icon Size -> Large

    1. Layout -> Item Position -> X -> 10; Y -> 3; Width -> 1; Height -> 6

2. Create and Bind a New State Variable

A State Variable will contain numeric information bonded with the Text output.

  1. Add State Variable by clicking on the Plus icon in the Outline Panel.

  2. Name it myCounter, switch its Type to Number, and set up Initial Value -> 10.

  3. Switch Value of text1 to ƒx Function and set -> myCounter.value

3. Bind an Event Logic to the button1

The last step we have to do is bind an Event, subtracting the Value of myCounter by one.

  1. Select the Event option in the button1 and Add Event Logic Plus icon -> Call Method

  2. Set up already wired up Call Method as follows:

    1. Method -> myCounter.setValue

    2. Switch Argument #1 to ƒx Function -> myCounter.value - 1

setValue is an available Method in State Variable, visible in the Data Explorer.

The Argument has to be set up as a ƒx Function because of the reading of the current Value.

The Conclusion

Any available Methods can be seen in the Data Explorer and have to set up Arguments.

Follow up on our Change Value from Event tutorial

https://youtu.be/Kee6oXJdzaY
Basic Substracting Application