> For the complete documentation index, see [llms.txt](https://docs.flexmoney.uk/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.flexmoney.uk/documentation/draftbit/submitting-data.md). # Submitting Data You can configure [Buttons](https://docs.draftbit.com/docs/button-1) and [Touchables](https://docs.draftbit.com/docs/touchable-1) 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: * [Text Input](https://docs.draftbit.com/docs/text-input-1) * [Text Area/Text Field](https://docs.draftbit.com/docs/text-areatext-field) * [Checkbox](https://docs.draftbit.com/docs/checkbox-1) * [Slider](https://docs.draftbit.com/docs/slider-1) * [Radio Button Group](https://docs.draftbit.com/docs/radio-button-group) > ## 🚧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](https://example-data.draftbit.com/) service. You can find instructions on how to connect an API to Draftbit [here](https://community.draftbit.com/t/use-send-data-to-add-a-user-to-a-user-list/444). > > 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 Name` prop * a `Button` or `Touchable` * a 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](/documentation/draftbit/rest-services-and-endpoints.md) 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](https://lodash.com/docs/4.17.15#set). 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! ![](https://cdn.readme.io/img/book-icon.svg?1613687634098) Updated 4 months ago ## What's Next If you'd like more help with sending data, check out some of our tutorials. * [Table of Contents](/documentation/draftbit/submitting-data.md) * [Introduction](/documentation/draftbit/submitting-data.md#introduction) * [Setup](/documentation/draftbit/submitting-data.md#setup) * [Configuring your Endpoint and Body](/documentation/draftbit/submitting-data.md#configuring-your-endpoint-and-body) * [Configuring your Button/Touchable](/documentation/draftbit/submitting-data.md#configuring-your-buttontouchable) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.flexmoney.uk/documentation/draftbit/submitting-data.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.