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
  • 1. Create an action
  • 2. Create a view
  • 3. Link data
  • Conclusion

Was this helpful?

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

Loading Data from Action to Form

PreviousChange Value from EventNextSending Data to Action from a Form

Last updated 3 years ago

Was this helpful?

The Goal

Our goal is to return data from an action and put them into form fields as initial values.

The most common use cases are edit pages. We have data already in the database and we want to load them into to the form so user can edit them.

1. Create an action

Let's create an action that will return some sample data.

  1. From the Main Menu, create a new Action and name it getTask.

  2. From the Functions panel drag the Output function and drop it to the flow canvas. Then connect Start node with the Output node.

  3. Select the Output node and edit it's configuration options as follows:

    1. Change the type of Return value property to Map {}(a little icon next to the field).

    2. Add three items: id, name and content

    3. Open each item and set their value to: id: 1, name: Task AAA, and content: Hello from task 1.

  4. To test if your setup is correct, click on the Save & Run Action button. You should see the following data in the Tester output:

id: 1
name: "Task AAA"
content: "Hello from task 1"

2. Create a view

Now, we are going to create a simple view with two form elements and one action data source.

  1. From the main menu, create a View and name it as you wish.

  2. In the Outline panel, click on the Plus button and select Add Data from Action. This will create an object called Action Data Source.

  3. Then in the inspector panel, click on the Action Name field and select the getTask action we've just created in the previous step.

  4. Also, we recommend to change the action data source ID to tasks.

  5. If configured correctly you should see the tasks item in the Data Explorer panel. When you open it it should have the LOADED state and you should see data returned from the action in the data property.

  6. Now, place the Text Input and Text Area components into the view canvas. Change their IDs as follows: Text Input: fldName; Text Area: fldContent.

3. Link data

So far we've added the action data source and components. Now, let's link them together.

  1. Select the fldName component.

  2. Now let's put there an expression that returns the data from our data source: task.data.name. This tells us that we want to access the name property from our data that has been returned from our tasks data source. You can see this hierarchy in the Data Explorer panel.

  3. Do the same for the fldContent component as well but change name to content in the value expression.

task.data.name
task.data.content

Conclusion

Try to upgrade the form - add a field for a missing ID property.

In the panel, find the Value property and switch it to expression (click the fx button).

Inspector
Form components with data loaded from an action