Submitting Data
You can configure Buttons and Touchables to submit data (ie. make a POST request). This configuration will be completed in the Interactions Tab.
You can use any component that contains a Field Name prop to log user input and submit data. This list of components currently includes:
🚧Make sure that the you have the API you'd like to submit data to set up in the APIs/Services menu.For documentation purposes, we'll be using Draftbit's Example Data service. You can find instructions on how to connect an API to Draftbit here.
When configuring the Base URL make sure you leave out the exact endpoint. You will add the endpoint later inside of the Configure Data Submission modal.
Once you have:
a component with a
Field Namepropa
ButtonorTouchablea Service and Endpoint configured in the Data tab
you will be ready to set your screen up for submitting data.
Once you've created a Service in the Data tab, you'll be prompted to create a new endpoint. When you create your endpoint, make sure to select POST from the Method dropdown next to the Endpoint input.
After selecting the POST method, you'll see 3 new headers appear on the right-hand side of the modal: Body Structure, Body Preview, and Test Response. Configure your body directly in the Body Structure section in {{variable}} notation. If you select the Body header on the left-hand side of the modal, you'll see an area for you to enter a test value for each key/value pair.
Once you've entered all your key/value pairs, select the Body Preview tab to see what your response will look like populated with the test values you entered, and make sure your Body Structure is valid.
Last, you can Test your request in the Test Response tab at the end. Once you've successfully tested the request, you can attach the action to your Button/Touchable.
Once your components, Service, and Endpoint are set up correctly, you can select the Button/Touchable you would like to handle data submission and select the Submit Data option from the Actions dropdown in the Interactions tab.
Two dropdowns will appear for you to select your Service and Endpoint. 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 Field Names you have set on the screen. Select the corresponding dropdown that matches your variable.
🚧Please note: We utilize lodash to handle generating the proper body for submitting data. For more information on this syntax, check out the documentation here.
Test the feature out by entering some data in an input, and then submit the data to the Example Data API (You can do this in either the browser or on your phone in Live Preview).
📘Remember that any data submitted in a POST request to the Example Data API will eventually disappear from the dataset. This service is meant to be used for testing purposes only!
Updated 4 months ago
What's Next
If you'd like more help with sending data, check out some of our tutorials.
Last updated