Submitting Data

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

Prerequisities

Submitting data requires the following elements:

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

You can use any component that contains a Field Name 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 Field Name prop
  • a Button or Touchable with an API Request action

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

Configure the Endpoint

Once you've created a Service in the Data modal, you'll be prompted to create a new endpoint.

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

  • In Step 1: enter the Name for the endpoint and select the Method to POST or PATCH depending on the endpoint. If you are creating an endpoint to submit new data from the app, select the POST method. If you are creating an endpoint to update an existing data the API, select the PUT or PATCH (it depends on the API service on what method it accepts to update the data).
  • In Step 2: you can use an additional base name to the API's Base URL. For example: /your-base-name.
  • In Step 3: add a valid Body structure to submit a POST, PUT or PATCH request. Add one or many {{variable}} for test values. Click Body Preview to validate the structure of the Body in the request. The structure of the data depends on the API service you are using. It is always a good practice to check API service documentation to know more about how to structure data.
  • In Step 4 (optional): if your API service requires you to add an extra header when submitting data, you can add the header in this step.
  • In Step 5: click the Test button next to the Endpoint input to verify the response from the API service.
  • The last step is to save the endpoint. Click the Save button.

Here is an example of a POST request endpoint:

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

Trigger API Request action on Button/Touchable

Once your components, API Service, and Endpoint are set up correctly, select the Button or Touchable component in the Layout 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. Two dropdowns will appear for you to select your API Service name and the Endpoint.
  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 Field Name props you have set on the screen. Select the corresponding dropdown that matches your variable.

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

🚧

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.


Did this page help you?