2. Visualize Data from API

How to easily display data from REST API backend?

The Goal

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

REST API Application

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

View[MainView]

• Data from Action[customers]

• View[MainView]

  • Container[cntRoot]

    • Label[heading]

    • Text Input[fldSearch]

    • Advanced Table[tblCustomers]

      • Column1

        • Text[txtFirstName]

      • Column2

        • Text[txtLastName]

      • Column3

        • Text[txtEmail]

      • Column4

        • Text[txtCompany]

      • Column5

        • Button[btnSendEmail]

Action

• GetCustomers

Integration

• MyRestApi

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

Canvas[MainView]

Current Components

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":"[e-mail]"
        ,"company":"Effertz and Sons"
    }
]

1. Create a new Rest API Integration, name it MyRestApi and configure as follows:

   1. Base URL -> "https://mockapi.adapptio.app/2c932729/rest"

   2. 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

Flow Canvas[GetCustomers]

GetCustomers[REST API / Request]

REST API / Request[q]

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

Outline Panel[Main View]

customers[Properties]

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)

tblCustomers[Items]

txtFirstName[Value ƒ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}

Canvas Event[btnSendEmail[Click]]

btnSendEmail[Navigate]

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.