ūüíĺ

Connect External Data

Getting Started with External Data

You can pull data from any REST API directly into your app with the Fetch component. In this tutorial, we'll populate a list of components with data from a JSON object.

image

Before we get started, make sure you're on a new, blank screen!

To add a new screen, click the 'Screens' button in the left-hand column, and then the '+' button in the Screens header.

Also¬†make sure you have Live Preview open on your phone. You can launch the QR code by clicking the ‚Ė∂ÔłŹ button at the top of the Builder.

image

'‚úö Add' the following components to your screen, and then drag-and-drop to rearrange them according to the below photo:

  • Fetch
  • List
  • View
  • Text
  • Image
image

To build a Query for your Fetch component:

  1. Select your Fetch component in the Layer Tree
  2. Open the Data tab (3rd from the left) in the Properties Panel
  3. Select New Service from the Service dropdown
image

Give your service a name, and paste the following URL into the Base URL input: https://example-data.draftbit.com, and click 'Save'.

Next, create a new endpoint, give it a name and paste products?_limit=10 into the 'Add Path & Params' input. Click 'Test' to make sure your data is pulling through correctly then click 'Save'.

Once finished, select the Service you've just created from the Service dropdown.

image

To populate our list of components with the external data:

  1. Select the List in the Layer Tree, go to the Data tab, and select 'data' from the Mapped Data Value dropdown.
  2. Select the Text in the Layer Tree and select 'name' from the Mapped Data Value dropdown.
  3. Select the Image in the Layer Tree and select 'image_urll' from the Mapped Data Value dropdown.
image

Let's add a little bit of styling to the list items try adding:

  • On the¬†View: 16pt Padding on the top, left and right & change¬†Align Items¬†to 'Center'
  • On the¬†Text: 8pt Padding on the top,¬†Align¬†center & change¬†Font¬†to Headline6

ūüí°Extra credit: Try adding more components to the list item and pulling more data from the JSON endpoint (such as 'price') to mimic a realistic "listings page"

image

You've successfully connected data to your app in Draftbit!

image

Having trouble using this feature? Come meet us in the¬†Draftbit Community‚ÜóÔłŹ