Displaying Petfinder Data

Part III - Building the Display Pets Web Page

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"
  1. 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/types as the URL.
  1. Complete Query Parameters > HTTP Parameters as follows:
  • Field name: “type”
    • Value: pet_type
  • Field name: “gender”
    • Value: gender
  • Field name: “location”
    • Value: zipcode
  1. 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.
  2. Add a Transform Data Operation by clicking on the ‘+’ icon below the HTTP Request. In the Transform Expression, enter:
result.animals
  1. In the End section, pass transform as the output.
  1. 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
  1. For the Output Binding, enter activityGroup.pets

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

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:
  1. Paste them in the Data Binding section of the Container List.

This way, we have data to display in the Stage while designing our UI.

  1. 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".

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 a pair of Labels to broadcast the name and breed of the pet. Under Control Properties > Text, designate the first Label "Name" and the second Label item.breeds.primary.
  1. In order to make some room for the Web Controls in the Image Container, select the Container List from the Tree, 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.
  1. 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:
What is **borderSecondary** and where is it defined?

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.

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.
  1. 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.
  1. Now, at the Image Container level, add another Container. Inside of it, add a Hyperlink control. Rename the Container to Select Container and the Hyperlink to Select Hyperlink. Then with the Hyperlink selected, turn your attention to the Inspector and set Control Properties > Href as item.url. Nest a Button Web Control underneath the Hyperlink.
  1. Inspect the Image Container and change the Variant to page, for spacing:
  1. Under Distribute Children, select Stack Vertical and Center:

Using Live Data

Now that the Web Page is ready, we can remove the sample data we were using to test the appearance of the UI in the Stage. It will be replaced with live data.

  1. Select the Container List in the Tree and remove the sample data we have previously added in Data Binding.

  2. Add the pets Variable and save the app.

Bear in mind that when changing the content in Data Binding, the Web Page in Web Builder will go blank as all sample data will be erased. This is expected behavior: you will be able to see live data when previewing the app.

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.

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


Did this page help you?