# 2. Visualize Data from API

### The Goal

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

![REST API Application](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FeTNR1X4ibukxtb6qGXpL%2Fimage.png?alt=media\&token=bf527c06-6ea0-4a0c-a4a2-d4c0cf5059fc)

### 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]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FqoNskfmPSAk90K2eyMWx%2Fimage.png?alt=media\&token=b54a9a09-58e4-423d-8723-a46748c0b956)
{% endtab %}

{% tab title="Current Components" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2F0LXzJe7FncxYLMBExHCo%2Fimage.png?alt=media\&token=e4d1d060-fcda-4cc3-9f8e-24a5e695aee7)
{% 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]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FATDxPAdGA5iPXKXBSrr3%2Fimage.png?alt=media\&token=2f56c10f-31ea-4bc2-82f1-1e231d9af6bd)
{% endtab %}

{% tab title="GetCustomers\[REST API / Request]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2Fi2oyfBSMs5TzwGShrLoV%2Fimage.png?alt=media\&token=ca055f2e-935c-4cc0-bc23-b787d98a0f21)
{% endtab %}

{% tab title="REST API / Request\[q]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FnEP1E9JVifr3bJcZiBdQ%2Fimage.png?alt=media\&token=95092a69-70ca-4133-a863-d8e0d2b2e501)
{% 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]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FZuwHIAvgIjjvbr0NMTYv%2Fimage.png?alt=media\&token=fa4c04fa-8def-4913-bd09-3aaf963fd8ea)
{% endtab %}

{% tab title="customers\[Properties]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FDnPgQAl43mUje08Wdydh%2Fimage.png?alt=media\&token=863cd9c7-e34d-4a8a-bafd-72f129e1b616)
{% 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]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FjVGDuVgtMhtoI0xDnTlr%2Fimage.png?alt=media\&token=9d29748b-05a0-4ffb-8faf-e08e1297d7b4)
{% endtab %}

{% tab title="txtFirstName\[Value ƒx]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FYgwLdzluwyUWnJ7oZglW%2Fimage.png?alt=media\&token=2e052ad3-01a6-4ed4-ab05-ae0185230cae)
{% 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]]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FPe4XteyJXKMBTtry5gkc%2Fimage.png?alt=media\&token=a5ba2fb0-9aa7-4fc0-af51-4a09f3260c8a)
{% endtab %}

{% tab title="btnSendEmail\[Navigate]" %}
![](https://4190342052-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MjiITn8B0C9eJvihABh%2Fuploads%2FEDawZHQqP7yQprIwIWZk%2Fimage.png?alt=media\&token=9c9e5ed0-60fb-4a3b-9b0b-253564dea947)
{% 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*.