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. Connect the Rest API Integration
  • 3. Create a GetCustomers Action
  • 4. Bind the GetCustomer Action with customers Datasource
  • 5. Associate customers Datasource with tblCustomers Table
  • 6. Add on Click Event to Send Email
  • The Conclusion

Was this helpful?

  1. Working with Adapptio
  2. Tutorials

2. Visualize Data from API

How to easily display data from REST API backend?

Previous1. Hello WorldNext3. Advanced Layout Application

Last updated 2 years ago

Was this helpful?

The Goal

Prepare a basic Customer Search application connecting data using REST API Integration.

The Description

Typical usage of the REST API Integration can be loading data from a JSON server, in our case, Mock API. We will connect to customer data which content would be a part of the Advanced Table filtered by a dynamic search field. Additionally, each Table record has its icon triggering the e-mail client.

The Knowledge You Will Get

  1. How to use the REST API Integration.

  2. Working with an Advanced Table.

  3. Triggering an E-mail client.

The Project Structure

1. Prepare a Basic Layout

As usual, let's start with a Layout preparation. The Main Container will contain a Header, Search Field, and Advanced Table.

  1. Place in MainView a Container, name its ID -> cntRoot, and configure it as follows:

    1. Flow -> Under each Other; Horizontal Alignment -> Stretch; Padding -> X-Wide; Spacing -> Medium;

  2. As a Header, we will simply use a Label with the ID -> heading.

    1. Set up heading properties: Value -> "Customers"; Font Size -> XLARGE;

    2. Icon -> Name -> "mdi/briefcase-account"; Size -> Large; Flow -> Icon left

    3. Style -> Horizontal Alignment -> Left; Vertical Alignment -> Middle

  3. Put in a Text Input component, serving as Search Field. Name its ID -> fldSearch, and it's Placeholder -> "Search..."

  4. The last component will be an Advanced Table carrying ID -> tblCustomers; Spacing -> Medium;

    1. Add five Columns and simply name them as follows: First Name; Last Name; Email; Company; #5

    2. Set up Column #5 Width -> 36px

    3. Place to each of the Columns the following components:

      1. Text -> ID -> txtFirstName

      2. Text -> ID -> txtLastName

      3. Text -> ID -> txtEmail

      4. Text -> ID -> txtCompany

      5. Button -> ID -> btnSendEmail; Value -> ""; Icon -> Name -> "mdi/email-edit"; Size -> Medium

        1. Style -> Button Style -> Custom; Background -> Transparent; Foreground -> Secondary; Border Color -> LIGHT_GRAY; Border Width -> 1px

        2. Custom hover state -> Background -> Transparent; Foreground -> PRIMARY; Border Color -> PRIMARY

2. Connect the Rest API Integration

Don't hesitate to use our JSON Server or use your own. The Base URL of the Server configuration has to exclude the customer data subdirectory, which would be targeted further by an Action.

Keep in mind that targeted data must be in a valid JSON format.

[
    {
        "id":0,
        "first_name":"Douglas",
        "last_name":"Brakus",
        "email":"Gutmann_Preston@yahoo.com"
        ,"company":"Effertz and Sons"
    }
]
  1. Create a new Rest API Integration, name it MyRestApi and configure as follows:

    1. API Timeout -> 10000

  2. Save it and continue with the next steps.

3. Create a GetCustomers Action

The GetCustomers Action provides a bridge between MyRestApi Integration and Datasource bound in the MainView, which we will configure in the upcoming step. Input search parameter equals GET Query String.

If additional Query parameters are required, it has to be solved on the side of the input parameter.

// Example: $QueryParam + "?limit=5"
  1. Create a Action and name it GetCustomers.

  2. Add a Parameter with ID -> search; String

  3. On Start ->Place a REST API / Request from Functions / Integrations Panel and configure it as follows:

    1. ID -> apiReq; Parameters URL -> "/customers"

    2. Add a new Query, name it q and set up its Value as Æ’x Function -> params.search

  4. Wire together a new Output and set up its Return value -> apiReq.data

4. Bind the GetCustomer Action with customers Datasource

Somehow we have to bind our REST API data with MainView. We have to Add Data from Action in Outline Panel for such a reason.

  1. Click on Add Data from Action and name it customers

  2. Select by clicking on Action Name -> GetCustomers

  3. Bind Search field Value with Input parameter by Æ’x Function on search -> fldSearch.value

5. Associate customers Datasource with tblCustomers Table

Associating customers Datasource with our Advanced Table items is the last step in making our application live.

Watch the difference between annotation in binding items Datasource and Values of included components, where its Value is item.

  1. Switch on tblCustomers Properties and edit Items -> customers.data (Æ’x)

  2. Associate all Columns components, except Button, with the following Functions:

    1. txtFirstName -> Value -> item.first_name (Æ’x)

    2. txtLastName -> Value -> item.last_name (Æ’x)

    3. txtEmail -> Value -> item.email (Æ’x)

    4. txtCompany -> Value -> item.company (Æ’x)

6. Add on Click Event to Send Email

The last step in our application process is to associate an Event on Click btnSendEmail Button.

  1. Switch on btnSendEmail and create a new Event by clicking on Click in Inspector Panel.

  2. On Event -> Add a Navigate function, wire it together and set it up as follows:

    1. Options -> Link Type -> URL; URL Address -> mailto:${item.email}

The Conclusion

REST API belongs with Databases in one of the most used Integrations in the Adapptio. Try to bind another free online JSON Servers.

Base URL -> ""

https://mockapi.adapptio.app/2c932729/rest
REST API Application