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.
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.
'✚ 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
To build a Query for your Fetch component:
- Select your Fetch component in the Layer Tree
- Open the Data tab (3rd from the left) in the Properties Panel
- Select New Service from the Service dropdown
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.
To populate our list of components with the external data:
- Select the List in the Layer Tree, go to the Data tab, and select 'data' from the Mapped Data Value dropdown.
- Select the Text in the Layer Tree and select 'name' from the Mapped Data Value dropdown.
- Select the Image in the Layer Tree and select 'image_urll' from the Mapped Data Value dropdown.
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"
You've successfully connected data to your app in Draftbit!
Having trouble using this feature? Come meet us in the Draftbit Community↗️