# Querying the Petfinder API

## Building the Home Web Page’s UI

It's time to start building the pet adoption app’s UI. In this section, we will focus on the first Web Page.

1. Toggle over to **Web Flows** Builder, and double click on the recently-added Web Flow to rename it to “Adopt a Pet”.
2. Add a Web Page to the Web Flow by clicking on the ‘+’ icon to its right and selecting **Web Page**.

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-b18bb86bce4e67d29e0f817d8432e34e3043f7ed%2Fquerying-the-petfinder-api-v182-0.png?alt=media)

3. Rename that first Web Page to "Home Web Page" and click on the ‘+’ icon next to it to add new Web Controls. First, we're going add a Label.

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-7686176d7a7e1ca3ea586b3bc6ac229d1f49bd74%2Fquerying-the-petfinder-api-v182-1.png?alt=media)

4. Since the first Label will be for the title, let’s change its text to “Adopt a Pet”. In the Inspector, go to **General > Control Properties > Text** and change the text in the associated string.

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-c329f4749f04ba6fb9f33c9d1e1333b9e797dbe5%2Fquerying-the-petfinder-api-v182-2.png?alt=media)

You can also change the Variant of the Label under **Style > Variant**.

5. This Web Page will include three prompts:

* The first one will be used to ask users what type of pet they're looking to adopt, so:
  * Add a Label and change the text to “What type of pet do you want to adopt?”.
  * Add a Dropdown List Web Control underneath.
* The second one will be used to choose the pet’s gender, so:
  * Add a Label and change the text to “Select gender”.
  * Add a Dropdown List Web Control underneath.
* The last one will ask users for their zipcode, so:
  * Add a Label and change it to “Enter zipcode”.
  * Add a Text Input Web Control underneath.

6. Add a Button that reads "Next". Your Home Web Page will look something like this:

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-181fb6aebf0e21a97c9f946985f0ba4c531152a4%2Fquerying-the-petfinder-api-v182-3.png?alt=media)

You can change the Variant of each Web Control by Inspecting the Control and selecting one of the Variant under **Style > Variant**.

The dropdown lists will be later populated with information from the Petfinder API.

## Creating a Data Flow that Queries the Petfinder API

In this section, we will create a Data Flow that returns the data we want to use to populate the Dropdown List Controls. It will do so by querying the Petfinder API.

1. Toggle over to to **Connections** Builder and click on **Data Flow** to create your first Data Flow. Then select **Create Blank** and rename it to “Get Pet Types”.

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-81c9f40b12134afa925581d90e4eac6cecd4ef88%2Fquerying-the-petfinder-api-v182-4.png?alt=media)

2. Click on the ‘+’ icon between the **Start** and **End** sections of the Stage. From the Data Operation options that appear, select the **HTTP Request** Data Operation.

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-408ee206932a27850d0df29219881f7f984997cd%2Fquerying-the-petfinder-api-v182-5.png?alt=media)

3. Select the Petfinder Integration as the Source and GET as the method. Then designate "https://api.petfinder.com/v2/types" as the URL.

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-d19d6759322c9c22928a2ae42dc3b1b28bbd32bd%2Fquerying-the-petfinder-api-v182-6.png?alt=media)

4. Under **Run Results**, press the **Run** button. The Data Operation should retrieve a list of pet details:

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-5f427bf4af9395410e35c465e0f841713235c3b2%2Fquerying-the-petfinder-api-v182-7.png?alt=media)

5. Follow the HTTP Request Data Operation with a a Transform Data Operation by clicking on the ‘+’ icon directly below. In the Transform Expression, enter:

```javascript
result.types
```

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-b21c07a8707532ee91c034ba6f56da923e5d941b%2Fquerying-the-petfinder-api-v182-8.png?alt=media)

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

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-26d58b13b6f5ab7722a7a2cb8788c4f203ec62bf%2Fquerying-the-petfinder-api-v182-9.png?alt=media)

## Creating the Variables

The **Variable Tree** is accessible in all parts of the Studio, regardless of which Builder you're in. We're going to use it now to add six Variables to our application.

1. Open the Variable Tree by clicking on the **Variables** button at the bottom of the Studio, to the right of the Builder Bar.
2. Click on **Activity Group Variables** and then on the ‘+’ icon.
3. Then select the corresponding variable type and Web Flow for each of them.

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-74478d9b126ec8118f50864f1394abbd3864f796%2Fquerying-the-petfinder-api-v182-10.png?alt=media)

Rename them as follows:

Three Variables of type **Text** to be renamed as:

* pet\_type\_selected
* pet\_gender\_selected
* zipcode

Three Variables of type **Any** to be renamed as:

* pet\_types
* pet\_gender
* pets

<details>

<summary>What is an Activity Group Variable?</summary>

\


An Activity Group is a container of smaller Activities. A Web Page is a type of Activity, and a Web Flow is a type of Activity Group.

An Activity Group Variable is a variable that is only accessible within a particular Activity Group. An Activity Group Variable that's associated with a particular Web Flow, for instance, can only be referenced within that Web Flow. This contrasts with, for instance, global variables, which can be referenced at any point throughout a Journey.

Technically, Activity Group Variables can be accessed under the `activityGroup` namespace, but this is the presumed namespace by default. An Activity Group Variable designated `pets` can be accessed both as `activityGroup.pets` or simply `pets`, provided it's been referenced within the appropriate Activity Group.

</details>

\[block:callout] { "type": "info", "body": "This application flow consists of only a single Web Flow, \\"Adopt a Pet\\", and so this is the Web Flow that all these Activity Group variables will be associated with." } \[/block] When you're done, Variable Tree should appear approximately as follows:

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-afe618a0075dacc152cdeb3c603ae375c2bee7ae%2Fquerying-the-petfinder-api-v182-11.png?alt=media)

## Binding Data

1. Toggle back to **Web Flows** Builder. Select the “Adopt a Pet” Web Flow and click on the **Actions** Tab in the Inspector.
2. Click on the ‘+’ icon next to **Web Flow Added** and select **Run Data Flow** from the Action options. This will run the data flow when the Web Flow is navigated to.

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-8ff40d24d67422f27d64f8003bc2d6f922925105%2Fquerying-the-petfinder-api-v182-12.png?alt=media)

3. Then choose the **Get Pet Types** Data Flow you created previously and bind the output to:

```javascript
activityGroup.pet_types
```

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-ccb451b722dbde19d6cc8a906abff32a648247e4%2Fquerying-the-petfinder-api-v182-13.png?alt=media)

The output of the Data Flow will now be stored to the `pet_types` Activity Group Variable as soon as the user navigates to this Web Page.

## Configuring the Home Web Page Controls

The next step is to configure the Dropdown List, Text Input, and Button Controls.

### Pet type Dropdown List

1. Either on the Stage or Tree section, click on the **Pet Type List** Dropdown List.
2. Go to the **General** tab in the Inspector and in **Data Binding > Value**, select `activityGroup.pet_type_selected`.
3. Then change the **Type of List** to **Custom Expression** and, under **Data**, add the following syntax:

```javascript
FROM
  pet
IN
  activityGroup.pet_types
SELECT
  pet.name
```

4. Then for both **Display Text** and **Value Text**, enter the variable `item`.

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-bb7f17d0aa70dc58413762ee314285d318b7b045%2Fquerying-the-petfinder-api-v182-14.png?alt=media)

5. Now go to the **Actions** tab and click on the ‘+’ icon next to **Value Change** to add the **Set Variable** action from the Data options. Then, enter `activityGroup.pet_gender` as the **Variable** and add the **Value** as follows:

```javascript
FROM
  pet
IN
  activityGroup.pet_types
WHERE
  pet.name = pet_type_selected
SELECT
  pet.genders
```

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-20be8894c8d4de25366dd5c4a90a94c6553f124a%2Fquerying-the-petfinder-api-v182-15.png?alt=media)

### Gender Dropdown List

1. Either on the Stage or Tree, click on the Gender List Dropdown List.
2. Go to the **General** tab in the Inspector and, under **Data Binding** , select the value `activityGroup.pet_gender_selected`.
3. Then change the **Type of List** to **Custom Expression** and, in **Data**, add the following syntax:

```javascript
FLAT(
  activityGroup.pet_gender
)
```

4. Then for both **Display Text** and **Value Text**, enter the variable `item`.

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-bd309260b65fb6eeb4b664385bd1da3b199eebe1%2Fquerying-the-petfinder-api-v182-16.png?alt=media)

### Zipcode Text Input

1. Either on the Stage or Tree, click on the Zipcode Text Input.
2. Go to the **General** tab in the Inspector and in **Data Binding** add:

```javascript
activityGroup.zipcode
```

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-96367232209d9332e209e30cdc3a56a5d3973473%2Fquerying-the-petfinder-api-v182-17.png?alt=media)

### Next Button

1. Either on the Stage or Tree, click on the "Next" Button.
2. Go to the **Actions** tab and click on the ‘+’ icon next to **Clicked**. Select the **Navigate to Web Page** Action.

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-dc8c25cfea2efe47100fb4d8a6981f7a9c27d0e3%2Fquerying-the-petfinder-api-v182-18.png?alt=media)

3. Choose **Add Web Page**. A new Web Page will appear under the Home Web Page for you to continue building.

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-53c1e506c7b19ecd8ba21db29fea941140375a08%2Fquerying-the-petfinder-api-v182-19.png?alt=media)

## Previewing the Home Web Page

Save your progress and click on the **Preview** to check that the Home Web Page of your app is running smoothly. Click on the website icon and check what options are available for selection from the Dropdown menus.

![](https://3088276961-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FC6qMwMGWBgxnN70QsDuH%2Fuploads%2Fgit-blob-4ba2e07cb3a2cd2ff64d0e9ed227b359876bbdc9%2Fquerying-the-petfinder-api-v182-20.png?alt=media)

You've now built out a homepage that behaves dynamically based on the data provided by an external system! Next, we're going to build a second page that displays pets of interest based on the information users provide in the homepage.
