Lists & Data

Components that can be used to render a list of data from an external REST API.

List

The List component will generally be used inside of the Fetch component to display a list of entries from an API that has been connected to the Draftbit.

📘

If you're using the List component with a Fetch component, make sure you set the List component's Data property to 'array of data' in the Data Tab.

Configuration

Property

Description

Component name

To alter the name of the component. The name is reflected in the Layout tree. Defaults to List.

Horizontal

Enable so that the contents of the list display horizontally.

Number of columns

Define the number of columns the list should display.

Fetch

With the Fetch component, you're able to easily pull live data from a third party RESTful API directly into your apps in Draftbit. You're also able to use this component to store Global Variables and Pass Data using navigation params.

Data

Property

Description

Service

Name of the REST API cloud service you have created inside the Draftbit app.

Endpoint

Name of the API endpoint to fetch data from.

Data-enabled Components

Component

Data to be passed

Text

String

Video

Video URL (non-Youtube)

Image

Image URL

Image Background

Image URL

🚧

Note: There is no built-in validation for Image/Video URLS.

Adding an API to a Fetch component

You can add a new API in the Data tab on the left-hand side of the Builder and connect your API to the Fetch component in the Data Tab of the Properties Panel. Read more on the configuration options in the REST Services & Endpoints article.

Learn how to set up a Fetch component in the Fetching Data article.

Creating a Navigate action

Creating a navigate action by adding navigation params to an endpoint will allow you to Pass Data between your screen.

In the above example, the field title is coming from navigation params.

This is possible because of a property called initial value. On a Text Input component, you will find this property in Data Tabs (of Properties panel). The value for this property is used to initialize with a value from a data source or navigation parameter. In the current example, the initial value is passed as a navigation parameter from a List inside a Fetch component. This means that the value is coming from the REST API.

Here is a complete flow of passing a param using the action on a button when navigating from one screen to another.

Custom Code

Custom Code allows you to import packages into your Draftbit app and use these packages in screens (via functions/hooks) and components.

It's an Advanced Feature. See Custom Code docs under Project Level Settings for more information.


Did this page help you?