Submitting Data
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:
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 totodos
. - 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).
- Click the
+
button next to Action. - From the dropdown select the action API Request.
- Select the Service name and Endpoint name from the dropdowns.
- 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
andObject 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 totodos
. - 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).
- Click the
+
button next to Action. - From the dropdown select the action API Request.
- Select the Service name and Endpoint name from the dropdowns.
- 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 totodos
. - 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 theid
provided. - Provide an
id
of the existing record under Path Test Values or include in the Body section. - 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).
- Click the
+
button next to Action. - From the dropdown select the action API Request.
- Select the Service name and Endpoint name from the dropdowns.
- 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.
Updated 4 months ago
If you'd like more help with sending data, check out some of our tutorials.