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.
To alter the name of the component. The name is reflected in the Layout tree. Defaults to List.
Enable so that the contents of the list display horizontally.
Number of columns
Define the number of columns the list should display.
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.
Name of the REST API cloud service you have created inside the Draftbit app.
Name of the API endpoint to fetch data from.
Data to be passed
Video URL (non-Youtube)
Note: There is no built-in validation for Image/Video URLS.
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 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 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.
Updated 18 days ago