# 2. Visualize Data from API

### The Goal

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

![REST API Application](/files/B2dsTjz9L7IGi0Nfq57w)

### 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

{% tabs %}
{% tab title="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`]
          {% endtab %}

{% tab title="Action" %}

* [ ] `GetCustomers`
  {% endtab %}

{% tab title="Integration" %}

* [ ] `MyRestApi`
  {% endtab %}
  {% endtabs %}

### 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`

{% tabs %}
{% tab title="Canvas\[MainView]" %}
![](/files/bsnLz5XmPuvQiCOnH3PY)
{% endtab %}

{% tab title="Current Components" %}
![](/files/KUsQlG59L2lYuy1rZECK)
{% endtab %}
{% endtabs %}

### 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*.

{% hint style="info" %}
Keep in mind that targeted data must be in a valid JSON format.
{% endhint %}

```json
[
    {
        "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. *Base URL* -> "[`https://mockapi.adapptio.app/2c932729/rest`](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*.

{% hint style="info" %}
If additional *Query parameters* are required, it has to be solved on the side of the input parameter.
{% endhint %}

```
// 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`

{% tabs %}
{% tab title="Flow Canvas\[GetCustomers]" %}
![](/files/MQXzRqpMPbUxlGw12n6W)
{% endtab %}

{% tab title="GetCustomers\[REST API / Request]" %}
![](/files/XiyL0h57lwUjTq22RAFT)
{% endtab %}

{% tab title="REST API / Request\[q]" %}
![](/files/71Dfbko5vaCeYf78DU23)
{% endtab %}
{% endtabs %}

### 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`

{% tabs %}
{% tab title="Outline Panel\[Main View]" %}
![](/files/oziKMi2g4qOtwqoJI7tI)
{% endtab %}

{% tab title="customers\[Properties]" %}
![](/files/AwxyYzBiqQ6Mb2rcDQM5)
{% endtab %}
{% endtabs %}

### 5. Associate `customers` Datasource with `tblCustomers` Table

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

{% hint style="info" %}
Watch the difference between annotation in binding `items` *Datasource* and *Values* of included components, where its *Value* is `item`.
{% endhint %}

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)*

{% tabs %}
{% tab title="tblCustomers\[Items]" %}
![](/files/J5ICPe6yWo3OFmbSEBm5)
{% endtab %}

{% tab title="txtFirstName\[Value ƒx]" %}
![](/files/gDcvWrgTx8lnDyukdfPK)
{% endtab %}
{% endtabs %}

### 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}`

{% tabs %}
{% tab title="Canvas Event\[btnSendEmail\[Click]]" %}
![](/files/o3JB1q2URZRt7h62EUyj)
{% endtab %}

{% tab title="btnSendEmail\[Navigate]" %}
![](/files/fzmuo7awXbOAYVTzK1W3)
{% endtab %}
{% endtabs %}

### 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*.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.adapptio.com/working-with-adapptio/tutorials/2.-visualize-data-from-api.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.