TUTORIAL: Navigate to an Item View from a Collection View Using Passed Data and Navigation Parameters

When building a mobile app that consumes data from a remote server, you will inevitably need to pass data from one screen to another via navigation parameters. A couple of examples:

  • Navigating to an item’s details from a collection list.
  • Navigating to a list of items that have a specific property.
  • Displaying a list of of items that match a search defined on a Search page.

Draftbit makes constructing these queries really simple. In this tutorial, we’re going to walk through a basic example using our Example Data (specifically, the /sneakers API).

Here’s a preview of what we’ll build:
snippet_sneakerbit-passed-data-share-project-draftbit

We will cover:

  1. Adding a Service and two Endpoints to GET the data we need
  2. Building a Fetch-List screen to display a collection of Sneakers
  3. Adding a Navigate Action to a list item’s Touchable that passes data via Navigation Parameters
  4. Building an Item Detail screen that accepts the passed data via Navigation Parameters

What you’ll need:

Add Data Service & Endpoints

We will be using the Sneakers API from Draftbit’s free Example Data Service. All of these lorem ipsum APIs function the same way, so if you’d rather do this tutorial with Restaurants, Properties, Books, Team, etc. feel free — it’s easy!

To add the API Service, open Data & Services by clicking the Data tab on the left-hand side of the builder. Then:

  • Click ✚ on the Rest API card to add a new Service
  • Name your new Service (e.g. “Sneakers”) and copy-paste your base URL into the Base URL field (https://example-data.draftbit.com/sneakers)
  • When using Draftbit’s Example Data Service, you don’t need to further configure the API. (For full documentation of the Configuration and Headers, visit our docs)
  • Save the API

For this tutorial, we will create two (2) endpoints:

  1. GET Sneaker List — returns a list of 10 sneakers from the Sneakers API
  2. GET Sneaker Item — accepts a sneaker {{id}} variable and returns the details for that specific sneaker

To add the first Endpoint (Get Sneaker List), open the Sneakers API Service that you just set up. Then:

  • Select Create New Endpoint
  • Name the endpoint (e.g. “GET Sneaker List”)
  • To Add Path & Params add /?_limit=10. This ensures only 10 results are returned.
  • Test the Endpoint to confirm the Query Results match the API.

To add the second Endpoint (Get Sneaker Item):

  • Select Create New Endpoint again
  • Name the endpoint (e.g. “GET Sneaker Item”)
  • To Add Path & Params add /{{id}}. If you entered the {{handlebar notation}} correctly, a Test Values field should display.
  • Open https://example-data.draftbit.com/sneakers in a new tab, go to any of the sneakers in the list and copy its id string to the clipboard (IMPORTANT: leave out the quotation marks, e.g. copy abcd to the clipboard, NOT "abcd").
  • Paste the id from your clipboard into the Test Values field for id.
  • Test the Endpoint to confirm the Query Results match the API. You should see only one result returned: the details for the one Sneaker you chose in the API.

Build the List Screen

As previously mentioned, this tutorial won’t dive deeply into laying out the screens in Draftbit. If you aren’t comfortable with layout in Draftbit yet, I encourage you to review this tutorial on Layout styles or add a few good screen examples from the Examples Gallery.

If you’re starting from a Blank screen, here is the bare-bones layout you’ll need:

  • Fetch
    • List
      • View
        • Touchable
          • 1 image component
          • At least 1 text component (for Sneaker Name, Colorway, Price, etc.)

Note: In my app, I named this screen “List of Sneakers.”

To connect the Get Sneakers List’s API response to this screen:

  • Select the Fetch component from the Layout tree
  • Navigate to the Fetch component’s Data tab (third tab on the right-hand side Properties Panel)
  • Select the Sneakers (REST) service from the Service dropdown
  • Select the GET Sneakers List (GET) endpoint from the Endpoint dropdown
  • Select the List component from the Layout tree, then make sure data is selected from the Mapped Data Value property in the Data tab on the right-hand side
  • Map the API’s imageURL to the Image component’s Mapped Data Value, Map the API’s title to one of your Text components’ Mapped Data Value, … repeat for every Text component on your screen (In my example, I mapped title, colorway, and retailPrice to Text components).

When you’re done, you should have a scrolling list of 10 sneaker items on your screen. If not, try hard-refreshing your browser screen, double-checking all the settings above, or just holler in the comments and we’ll help you out!

Start Building the Sneaker Item Screen

As a reminder, this tutorial won’t dive deeply into laying out the screens in Draftbit. If you aren’t comfortable with layout in Draftbit yet, I encourage you to review this tutorial on Layout styles or add a few good screen examples from the Examples Gallery.

If you’re starting from a Blank screen, here is the bare-bones layout you’ll need:

  • View
    • 1 image component
    • At least 3 text components (for Sneaker Name, Colorway, Price, Brand, Release Date, Gender, etc.)

A few important notes:

  • I named this screen Sneaker Item in the screen name dialog. I reference this screen’s name in the following section.
  • Make sure both this screen (Sneaker Item) as well as the other screen (Sneaker List) are inside the same Navigator at this point. If they aren’t in the same Navigator, you won’t be able to perform the next steps in this tutorial.

Set up the Passed Data Action

In this section, we will:

  1. Create a Navigate Action to go from the Sneaker List screen to the Sneaker Item screen when the user taps the Touchable that was created in the previous step
  2. Configure the Navigate Action to pass that specific sneaker’s ID to the Sneaker Item screen

Go back to your Sneaker List screen. To build the Navigate Action with passed data, simply:

  • Select the Touchable from the Layer tree
  • Navigate to the Touchable component’s Interactions tab (fourth & final tab on the right-hand side Properties Panel)
  • With the </> On Tap Trigger selected, click the ✚ next to Actions to add a new Action
  • Select the Navigate Action from the dropdown
  • From the Destinations dropdown, select Sneaker Item (Screen).
  • Click the ✚ next to Pass Data to add a new variable.
  • Type “id” into the key field, and select id as the value from the dropdown .

You only need to pass the Sneaker’s id with this action, not all of the data you wish to call in the following screen.

Finish building the Sneaker Item Screen

Let’s head back over to the Sneaker Item screen. At this point, we have a Navigate Action passing the sneaker’s ID via navigation parameter from the List of Sneakers screen to the Sneaker Item screen.

On the Sneaker Item screen, add a new Fetch component, and then drag-and-drop the parent View component (the one that contains your Image & Text components) to nest inside the Fetch. Your basic layout now becomes:

  • Fetch
    • View
      • 1 image component
      • At least 3 text components (for Sneaker Name, Colorway, Price, Brand, Release Date, Gender, etc.)

Now we just need to configure the API response on the Sneaker Item screen. The passed navigation parameter for the individual sneaker’s id fills in the variable blank for {{id}} in the API request. The API responds with that sneaker id’s properties, which we’ll map to components on this screen.

passed-data-navigation-params-sneakerbit-draftbit

To configure the Get Sneaker Item’s API response on this screen:

  • Select the Fetch component from the Layout tree.
  • Navigate to the Fetch component’s Data tab (third tab on the right-hand side Properties Panel)
  • Select the Sneakers (REST) service from the Service dropdown
  • Select the GET Sneaker Item (GET) endpoint from the Endpoint dropdown
  • From the Configuration section, under URL Structure, next to the id label select id (Navigation Param) from the dropdown.
  • Map the API’s media.imageURL to the Image component’s Mapped Data Value, Map the API’s title to one of your Text components’ Mapped Data Value, … repeat for every Text component on your screen (In my example, I mapped title, colorway, retailPrice, releaseDate, and gender to Text components).

Your Sneaker Item screen should display the remote server result for your “test value” that you selected in the Endpoint Setup stage. This is always the case for Web Preview (in the browser), and is the case for Live Preview (on your device) unless the Sneaker Item screen is navigated-to from List of Sneakers.

So how do you test that your setup works?

Test your App

There are a few ways to test that you’ve set everything up correctly:

Using Live Preview :arrow_forward::

  1. Run :arrow_forward:Live Preview on your device
  2. Open the List of Sneakers screen in your browser
  3. On your mobile device, scroll to one of the list-items and tap it
  4. If your setup is correct, you should navigate (on the device) to the Sneaker Item screen displaying the selected sneaker’s item details. You should also be able to navigate back, select a different sneaker from the list, and display that sneaker’s item details.

Important: For the following setups, make sure that List of Sneakers is set as the Initial Route in your app’s navigator.

snippet_sneakerbit-passed-data-share-project-draftbit

Using Share Project:

  1. Use the Share Project feature to publish your app to your unique landing page
  2. Run the simulator on your Share Project page (both iOS and Android)
  3. On the simulated mobile device, scroll to one of the list-items and tap it
  4. If your setup is correct, you should navigate (on the simulated device) to the Sneaker Item screen displaying the selected sneaker’s item details. You should also be able to navigate back, select a different sneaker from the list, and display that sneaker’s item details.

Using Publish :rocket::

  1. :rocket:Publish your app as a PWA, wait for publishing to finish, then navigate to your app’s unique URL
  2. From your PWA in the browser (on desktop or on your mobile device), scroll to one of the list-items and tap it
  3. If your setup is correct, you should navigate (on the simulated device) to the Sneaker Item screen displaying the selected sneaker’s item details. You should also be able to navigate back, select a different sneaker from the list, and display that sneaker’s item details.

Questions? Comments? Need help with your app’s setup? Post your thoughts in the Draftbit Community and we’ll help you out!

1 Like