You can configure Buttons and Touchables to submit data (ie. make an HTTP POST, PUT or PATCH request) to an API endpoint.

Prerequisites

Submitting data requires the following elements:

• An API endpoint to submit data
• A component that contains a Data Source prop
• A touchable component (either a Button or a Touchable)
• API Request action

You can use any component that contains a Data Source prop to log user input and submit data. This list of components currently includes:

• Text Input
• Text Area/Text Field
• Checkbox
• Slider
• Radio Button Group
• Radio Button

Once you have:

• a Service and Endpoint configured in the Data modal
• a component with a Data Source prop
• a Button or Touchable with an API Request action

You will be ready to set your screen up for submitting data.

You can create a new endpoint that is used to submit POST, PUT, PATCH or DELETE requests by following a recipe below:

Configure the endpoint to submit new data

To create a new data record in the database of your choice, you will have to create an endpoint that submits a POST request. For an example, consider the REST API endpoint below.

https://api.airtable.com/v0/appkLwyequqaR6EWY/todolist

It accepts a JSON body in the request to submit new data from a Draftbit app.

Let's consider the above endpoint example to add a new time to an existing Airtable base. You will add a new endpoint for POST HTTP method by following these steps:

• Click Add endpoint.
• In Step 1: enter the Name for the endpoint. Make sure the Method select is POST.
• Set the Role to Create since the endpoint is creating a new record. Set the Object Type to todos.
• In Step 2: add the base name path and/or any query parameters to the API's base URL. Currently, the endpoint has no query parameters or additional endpoint-specific paths.
• In Step 3: add a valid Body structure to submit a POST request. Add one or many {{variable}} for test values. Click Body Preview to validate the structure of the Body in the request.
• Check back in your API documentation to get an idea of how your request's JSON body is structured when creating a new record. Add the Body Structure in key-value pairs as shown below.
• In Step 5: click the Test button next to the Endpoint input to verify the response coming from the API service.
• The last step is to save the endpoint. Click the Save button.

Once you've successfully tested the endpoint, you can add the action on your Button/Touchable.

Trigger an API Request action to submit a new item

Once your components, API Service, and Endpoint are set up correctly, select the Button or Touchable component in the Components tree and go to the Interactions tab in the Properties panel (last tab on the right-hand side).

1. Click the + button next to Action.
2. From the dropdown select the action API Request.

1. Select the Service name and Endpoint name from the dropdowns.
2. After you've made your selections, a Configuration section will appear and there will be an input for each key/value pair you defined in your Body Structure. The dropdown next to each variable will be pre-populated with all the Data Source props you have set on the screen. Select the corresponding value from the dropdown that matches your variable.

The textInputValue passed in the above example is the value of the Data Source prop on the TextInput component. To find it, go to the component and from the Properties panel, go to the Configs tab:

Here is the complete example of adding a new item to the list.

📘

Importance of Role and Object Type when configuring an endpoint

Using the Role and Object Type lets a Draftbit app cache and re-fetch data under the hood. Read more here.

📘

Note.

Please ignore the Field Name prop in the attached screenshots and videos as this property does not exist anymore. We will update the screenshots and videos soon.

Configure the endpoint to update existing data

To update an existing data record in the database of your choice, you will have to create an endpoint that submits a PUT or PATCH request. For example, let's consider the same endpoint example as done in the previous section when submitting new data. This endpoint will also accept a JSON body in the request to submit new data from a Draftbit app.

Let's consider the above endpoint example to add a new time to an existing Airtable base. You will add a new endpoint for PATCH HTTP method by following these steps:

• Click Add endpoint.
• In Step 1: enter the Name for the endpoint. Make sure the Method select is PATCH.
• Set the Role to Update since the endpoint is creating a new record. Set the Object Type to todos.
• In Step 2: add the base name path and/or any query parameters to the API's base URL. Currently, the endpoint has no query parameters or additional endpoint-specific paths.
• In Step 3: add a valid Body structure to submit a PATCH request. Add one or many {{variable}} for test values. Click Body Preview to validate the structure of the Body in the request.
• Check back in your API documentation to get an idea of how your request's JSON body is structured when updating an existing record. Then, add the Body Structure in key-value pairs as shown below.
• In Step 5: click the Test button next to the Endpoint input to verify the response coming from the API service.
• The last step is to save the endpoint. Click the Save button.

Trigger an API Request action to update an existing item

To update an existing item, it will be done on a Details screen. In the example app, it was created when Configuring an endpoint to fetch a single item record.

Once your components, API Service, and Endpoint are set up correctly, select the Button or Touchable component in the Components tree and go to the Interactions tab in the Properties panel (last tab on the right-hand side).

1. Click the + button next to Action.
2. From the dropdown select the action API Request.

1. Select the Service name and Endpoint name from the dropdowns.
2. After you've made your selections, a Configuration section will appear and there will be an input for each key/value pair you defined in your Body Structure. The dropdown next to each variable will be pre-populated with all the Data Source props you have set on the screen. Select the corresponding value from the dropdown that matches your variable.

The textInputValue passed in the above example is the value of the Data Source prop on the TextInput component. To find it, go to the component and from the Properties panel, go to the Configs tab:

Here is the complete example of updating an existing item in the list.

Configure the endpoint to delete existing data

To delete an existing data record in the database of your choice, you will have to create an endpoint that submits a DELETE request. For example, let's consider the endpoint below:

https://api.airtable.com/v0/appkLwyequqaR6EWY/todolist/{{id}}

It accepts the value of the id of an existing record to delete.

You will add a new endpoint for the DELETE HTTP method by following these steps:

• Click Add endpoint.
• In Step 1: enter the Name for the endpoint. Make sure the Method select is DELETE.
• Set the Role to Delete since the endpoint is creating a new record. Set the Object Type to todos.
• In Step 2: add the base name path and/or any query parameters to the API's base URL. Currently, the endpoint uses a dynamic variable /{{id}} to delete a record based on the value of the id provided.
• Provide an id of the existing record under Path Test Values.
• In Step 4: click the Test button next to the Endpoint input to verify the response coming from the API service.
• The last step is to save the endpoint. Click the Save button.

Trigger an API Request action to submit a new item

Once your components, API Service, and Endpoint are set up correctly, select the Button or Touchable component in the Components tree and go to the Interactions tab in the Properties panel (last tab on the right-hand side).

1. Click the + button next to Action.
2. From the dropdown select the action API Request.

1. Select the Service name and Endpoint name from the dropdowns.
2. After you've made your selections, a Configuration section will appear. It will allow you to define the value of the path variable defined when creating the endpoint. Select the corresponding value from the dropdown that matches your variable.

For this example, the dropdown next to the variable id is pre-populated with all the Data Sources from the List component.

Here is the complete example of deleting an existing item in the list.