# Displaying Petfinder Data

## Creating the "Get Pet by Location" Data Flow

In Part II, we added a Zipcode Text Input field into our Home Web Page so that users can adopt a pet based on their location. Now we're going to build out a Data Flow that returns a list of pets based on the user's location.

1. Go to **Connections** Builder and create a new, blank Data Flow. We’ll call it “Get Pet by Location”.
2. Add the following type Text Inputs under the **Start** section of the Inspector, and give them plausible values of dummy values in the **Start** section of the Stage:

* `pet_type`
  * example value: "dog"
* `gender`
  * example value: "Female"
* `zipcode`
  * example value: "90210"

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-45ad01d5fba605144869d748225f97109b168da7%2Fdisplaying-petfinder-data-v184-0.png?alt=media)

3. Add an HTTP Request Data Operation under the **Start** section. Select the Petfinder Integration as the Source and GET as the Method. Enter https://api.petfinder.com/v2/animals as the URL.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-234534d21322d051f1f6bb1634ed0f92ef7672dd%2Fdisplaying-petfinder-data-v184-1.png?alt=media)

4. Complete **Query Parameters > HTTP Parameters** as follows:

* Field name: “type”
  * Value: `pet_type`
* Field name: “gender”
  * Value: `gender`
* Field name: “location”
  * Value: `zipcode`

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-ea7d179a60949eca115c687e86e4e869b9d0a2f6%2Fdisplaying-petfinder-data-v184-2.png?alt=media)

5. Under **Run Results**, press **Run** for the Data Flow to retrieve the list of relevant pets based on the dummy data given in the **Start** section.
6. Add a Transform Data Operation by clicking on the ‘+’ icon below the HTTP Request. In the Transform Expression, enter:

```javascript
result.animals
```

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-1551052d2e9b1b881fd17371794332e92a0dafbf%2Fdisplaying-petfinder-data-v184-3.png?alt=media)

7. In the **End** section, pass `transform` as the output.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-26d58b13b6f5ab7722a7a2cb8788c4f203ec62bf%2Fdisplaying-petfinder-data-v184-4.png?alt=media)

8. Save the app.

## Connecting the "Get Pets by Location" Data Flow

Now let’s run the "Get Pets by Location Data Flow" following these steps:

1. Toggle back to the Web Flows Builder. Go to the Home Web Page and select the Next button. Go to the Inspector and, in **Actions**, add a Run Data Flow Action. Then pass the values for the **pet\_type**, **gender** and **zipcode** Variables:

* `activityGroup.pet_type_selected`
* `activityGroup.pet_gender_selected`
* `zipcode`

2. For the Output Binding, enter `activityGroup.pets`

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-6c33e396f3cf9995c36a27464612ce814eb89113%2Fdisplaying-petfinder-data-v184-5.png?alt=media)

This way, when the Next button is pressed, the Data Flow will run as the user is taken to the next Web Page.

## Building the Display Pets Web Page

In Chapter II, we added a second Web Page to the app. This Web Page will list all adoptable pets and allow the user to check the information on each one of them before adopting.

1. In **Web Flows** Builder, rename the second Web Page to “Display Pets Web Page”. Add a Label to this Web Page, change its contents to “Adoptable Pets”, and select a header Variant.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-e3bccd628a6e01186776ffffda5d96e00f995d41%2Fdisplaying-petfinder-data-v184-6.png?alt=media)

2. Then add a Container List Web Control. This Control will allow you to loop through a List of available pets and display relevant information on each one.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-c455782a91d3c27a75858cb9c4de64ab16d83229%2Fdisplaying-petfinder-data-v184-7.png?alt=media)

### Uploading media to standardize UI

Many of the pets pulled from the Petfinder API have associated pictures, which we're going to display in the Repeater. However, not all pets will have associated pictures, and in such cases, we're going to display a generic filler image of a paw print:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-4d6fdd176b4a392458e06deb1ee0f47d7486c3e0%2Fdisplaying-petfinder-data-v184-8.png?alt=media)

Download the image [here](https://files.readme.io/68f6338-f4a33b2-empty-paw-print.png).

1. Once you have your desired filler image saved to your computer, toggle over to the **Media** Library. Click on the **Upload** button and select the relevant file:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-5a390696d0857db7566221fbe01a3cccd9673ece%2Fdisplaying-petfinder-data-v184-9.png?alt=media)

2. Once the file is finished uploading, click on the checkbox that appears to the left of the newly-uploaded asset to access the asset details in the Inspector. Under **Asset Details > URI**, you'll find the URI that can be used to reference this asset within your application. For instance, in the following example, the URI is "asset://global:8e52c37f-4071-4dbb-8a98-d9096d9b69d2:35cbbeaf-a313-4058-81cb-bbdf978ae5db:bde49ba3-fc92-4bf8-8bc8-86c48620869f:0":

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-5dfa393d2192b5f521094890823ed4b2d63b6d98%2Fdisplaying-petfinder-data-v184-10.png?alt=media)

Save the URI of the image you just uploaded so that you'll be able to access it later. In code snippets, we will refer to this URL as `{{FILLER_IMAGE_URI}}`.

3. Save your progress.

### Configuring the Repeater

In order to test the Repeater as we build the UI, let’s add some sample data. We can get this sample data from the **Get Pets by Location** Data Flow in **Connections** Builder.

1. Copy the transform results of the Transform Data Operation:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-fc53dd8c5a8cb07e35e7c2e9894b68efb8a3ef57%2Fdisplaying-petfinder-data-v184-11.png?alt=media)

2. In the Variable Tree, examine the Activity Group Variable `pets`. The input box that appears to the right allows you to assign a dummy value to the associated variable. Paste the results of the Transform Data Operation here:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-b30692de9eda93d3a276e3edbd3355cd40a54630%2Fdisplaying-petfinder-data-v184-12.png?alt=media)

This will not influence the way the application will behave, either in production or while [Previewing](../../studio/studio/app-preview), but it will provide sample data to display in the Stage while we design our UI.

3. Inspect the Container List. Under **Data Binding > Data** enter `pets`.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-c3cb80ed19c9e58326f290e1e2d12d7e7eeb8741%2Fdisplaying-petfinder-data-v184-13.png?alt=media)

4. Add a Container to the Container List and then nest two other Containers inside of it. The first Container will broadcast data, so let’s name it "Data Container". The second Container will show the pictures of the pets, so rename it "Image Container".

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-f46e8bd8920d91caf4c5548009930304190716a6%2Fdisplaying-petfinder-data-v184-14.png?alt=media)

#### Data Container

In this Container, we will add a block of details about each pet. The blocks will replicate for all the pets in the list.

1. Add 4 pair of Labels to the Name Container. Under **Control Properties > Text**, designate the first Label "Name", the second Label `item.name`, the third Label "Breed",and the fourth Label `item.breeds.primary`.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-7710635dc021db1efc05336c3042444165e67a7a%2Fdisplaying-petfinder-data-v184-15.png?alt=media)

Note that some of the names pulled by the Petfinder API might only consist of identification sequences rather than full names.

2. In order to make some room for the Web Controls in the Image Container, select Container nested immediately under the Container List, then turn your attention to the Inspector. Select **Stack Horizontal** in **Distribute Children**. This way, the Data Container and the Image Container will sit side by side.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-529d9988ff676ef0e3c680eb0100f7f4c79c452e%2Fdisplaying-petfinder-data-v184-16.png?alt=media)

3. Under **Override Styles > Border**, create a separator by selecting a solid bottom border of 1 pixel. For a subtle gray color, choose **borderSecondary** from the Dropdown list of colors:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-112e8a5796c6ad4d43efc4461324115785078466%2Fdisplaying-petfinder-data-v184-17.png?alt=media)

<details>

<summary>What is borderSecondary and where is it defined?</summary>

\


**borderSecondary** is a color Variant. Color Variants are used to establish a consistent color palette throughout an application flow.

Airkit comes out of the box with several color Variants (**borderSecondary** among them) pre-configured, though these pre-configured settings can be changed in the Theme Builder. Upon making such changes, all instances of that color Variant will change to reflect them. For more on how color Variants (and all other Variants) are defined, see [Theme Builder](../../studio/studio/builder-bar/theme-builder).

</details>

#### Image Container

This Container will present the pictures of the pets and a button that will take the user to the selected pet’s Petfinder profile.

1. Add a Hyperlink Text control to the Image Container.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-797b304c8cab63f9367b5c2c5ef4556acac4b51b%2Fdisplaying-petfinder-data-v184-18.png?alt=media)

2. With the Hyperlink selected, turn your attention to the Inspector and set **Control Properties > Href** as `item.url`. Nest an Image Web Control underneath the Hyperlink, and make sure you use the thumbnail Variant.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-b71841a11270690ff99f06c2945dffef46d279bd%2Fdisplaying-petfinder-data-v184-19.png?alt=media)

Inspect the Image. Under **Control Properties > URL**, define the image URL as follows, where `{{FILLER_IMAGE_URI}}` refers to the URI associated with the filler image you previously uploaded to the Media Library.

```json
IF(
  ISEMPTY(
    item.photos[0]
  ),
  {{FILLER_IMAGE_URI}},
  item.photos[1].small
)
```

In the case of our example, the code appears as follows:

```json
IF(
  ISEMPTY(
    item.photos[0]
  ),
  "asset://global:8e52c37f-4071-4dbb-8a98-d9096d9b69d2:35cbbeaf-a313-4058-81cb-bbdf978ae5db:bde49ba3-fc92-4bf8-8bc8-86c48620869f:0",
  item.photos[1].small
)
```

This Airscript expression uses the [IF](../../airscript-expressions/conditional-functions/if) function in tandem with the [ISEMPTY](../../airscript-expressions/conditional-functions/isempty) function to display pictures of each pet if applicable and the filler image in cases where no pictures of the pet are available.

3. Add another Container to the Image Container. Inside of it, add a Hyperlink control. Rename the Container to **Select Container**. Nest a Hyperlink underneath it and rename it **Select Hyperlink**.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-742f735764d23b7f1009cd341a1e60a3b808442f%2Fdisplaying-petfinder-data-v184-20.png?alt=media)

Then with the Select Hyperlink selected, turn your attention to the Inspector and set **Control Properties > Href** as `item.url`.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-ba35daae1ef1aaeb6f7261754e6d9409564d19f8%2Fdisplaying-petfinder-data-v184-21.png?alt=media)

Nest a Button Web Control underneath the Hyperlink, and change the text in the button to "Select".

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-457c44d57660335d4701b6051f27e0db5cf8d2d0%2Fdisplaying-petfinder-data-v184-22.png?alt=media)

4. Inspect the Image Container and change the Variant to **page**, for spacing:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-491cffe58a3fd4286bf08c3f0848b8e98e0841a9%2Fdisplaying-petfinder-data-v184-23.png?alt=media)

5. Under **Distribute Children**, select **Stack Vertical** and **Center**:

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-e5422c7cc0a263bf21f8bc56e4f6290ce0a08b18%2Fdisplaying-petfinder-data-v184-24.png?alt=media)

## Previewing the Display Pets Web Page

Click the **Preview** Button to check that the Display Pets Web Page of your app is running smoothly. Scroll down to see all adoptable pets and click on Select to move forward.

![](https://2599974655-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIRF6etABDVMr59RdpyGw%2Fuploads%2Fgit-blob-98b74a503d9096495f7096df66928362b788e0f7%2Fdisplaying-petfinder-data-v184-25.png?alt=media)

Congratulations! You have now completed building an app that facilitates pet adoption through a custom Petfinder integration.
