How to connect data to your app in Draftbit

We recently released the first set of Data features in Draftbit! With the new Fetch component and improved List component you’re able to connect a REST API endpoint to your apps in straight from the Builder.

For this tutorial we’ll use the Default App Rentbit to test out the Data and List capabilities.

Setting up the Screen

To get started, copy the Rentbit app into your personal workspace so you’re able to edit it. Once you’ve copied the app, open the project and select the Explore - List screen. Scroll down the Layer Tree and delete the two containers named card row at the bottom.

deletecontainers%20(1)

Build the Query

Let’s start off by pulling our data into the builder!
Select the ScrollView in the Layer Tree and add a Fetch component inside of it.

rentbitfetch%20(1)

Next, select the Fetch component in the Layer Tree and click + Build Query in the Data section at the top of the Config Panel on the right.

Insert: https://s3.amazonaws.com/static.draftbit.com/datasets/rentals.json into the Request URL field of the modal. Click Test to ensure the JSON is coming through properly. Once you see the JSON is rendering, click the Save button to return to the builder.

build_query_rentbit

Create the Card component using Bits

In the current state of Rentbit, variations of the Card component are used throughout the app to display the property listings. For now, data can only be passed through to Text and Image components so we’ll recreate the cards on our own!

Inside of the Fetch component add a List , a View a Touchable and a Container . Inside the Container, add an Image and a View . Inside the View , add 2 lines of Text . The Layer Tree should look like this:

Additionally, you should see entry in the List automatically generated in the Builder for each entry in the dataset.

Link Data to Component

Now that you have data flowing and the Bits you need to recreate your card, let’s get everything hooked up!

Select the Image in the Fetch component in Layer Tree. In the Data section of the top of the Config Panel use the dropdown to change its Field to ImageUrl . Next change the first Text component’s field to shortTitle and change the second Text component’s field to location . You’ll data will automatically populate the components as seen below.

rentbitconfig%20(1)

Style and Configure

At this point we have all the content we need so the only thing that’s left now is to make it look good!

  1. On the List :

    1. Change the Number of Columns to 2
    2. Add 16 padding on the Left and Right
  2. On the View below the List:

    1. Add 16 Padding to the Top, Left, and Right
    2. Add 8 Margin on the Right
    3. Set Flex Shrink to 1
  3. On the Container below the View:

    1. Set the Elevation to 2
    2. Set the Background Color to Surface
    3. Set the Border Radius to Global
    4. Disable the Use Gutter Padding switch
  4. On the Image inside of the Container:

    1. Set the Height to 100
  5. On the View inside of the Container:

    1. Add 16 padding to the Top, Left, and Right
  6. On the First line of Text:

    1. Change the Style to Body 2
    2. Add 8 Margin on the Bottom
  7. On the Second line of Text:

    1. Change the Text Color to Medium
    2. Change the Style to Subtitle 2

Once you’ve made all the changes, the screen in the Builder should look like this:

Conclusion

Now that you’ve seen what you’re capable of building with Data and Lists in Rentbit it’s time to see what you can what else you can build on your own! Don’t have a set of data in mind and need some inspiration? Check out a comprehensive list of public APIs here.

If you ever need to revisit how the feature works, you can take a look at the Data page on our documentation site where you can also read about how to connect an Airtable API to the Fetch component.

We hope you enjoy this first set of Data features. Stay tuned as we continue to develop this feature and support POST, PUT, PATCH and DELETE methods. If you have questions or identify any bugs while using Lists and Data (or anywhere else in the platform) please do not hesitate to reach out to our team — we’re always here to help!

3 Likes

After hitting test, view json and click on Save in Fetch, I currently have when I open the List Component :
Configure a schema in the parent Fetch component to map a field to this component

I had to remove Fetch component (with all above), add it again, put List, View and Text inside Fetch, then add the url.
Now, it’s working again.