# Set up an API POST request - Xano {% hint style="info" %} [Upgrade your free account](https://docs.bravostudio.app/get-started/unlock-power-features-to-create-interactive-apps) to the **Bravo Solo plan** to use this feature. {% endhint %} The **Data Collections** feature enables you to create API requests to any database or tool with an available REST API. In this guide, we'll show you how to set up a **POST request** to create new data in an external database from your app. {% hint style="info" %} You can use other API verbs (i.e. **PUT** or **POST**) to create data if your API specifies otherwise. Simply change the verb type of the request URL. {% endhint %} #### :point\_right: **Example** **Figma file** If you don't have a design yet, import it to Bravo. You can also duplicate this [Figma file](https://www.figma.com/design/mNyTDu2CK9wsVLRGUCmecH/Edit-your-profile?node-id=0-1\&t=LOqUc58FSodnzyIz-0). #### :point\_right: **Database** In this guide, we're using Xano database to manage our app's backend. The Xano platform offers a powerful and flexible solution to handle data efficiently.\ \ Our focus will be in the user table, which is a critical component in most apps as it stores user related information.

To facilitate various operations on this table, Xano has auto-generated CRUD (Create, Read, Update, Delete) operations. These operations are essential for managing the data lifecycle in our application. The CRUD operations provided by Xano enable us to: * **Create**: Add new user entries to the database. * **Read**: Retrieve user information stored in the database. * **Update**: Modify existing user data. * **Delete**: Remove user entries from the database. If you are using a different backend tool, refer to its API documentation to understand how to construct the request, including both the URL and the body.

User CRUD endpoints autogenerated in Xano

To set up the POST request in the backend, follow [Xano's API documentation.](https://docs.xano.com/api/the-basics/crud-operations) This example also demonstrates how to use the required **JSON body** to edit a record in the table. ## How to set up a PATCH request 1\. In **Data Library**, click **Create a New Collection** and choose **Start from scratch**. If you already have a collection, select the desired API collection. {% hint style="success" %} You can also import your API collection using the Xano Wizard, Open API, Postman or Swagger. {% endhint %}

2. Provide a name and description for the new collection. If this step is already completed, you can skip it. 3. The API documentation specifies any **Headers**, **Parameters**, and/or **Body** value needed in order to make the POST request. In this example, Xano uses the [bearer token method](https://www.oauth.com/oauth2-servers/differences-between-oauth-1-2/bearer-tokens/) to authenticate the request. In **Collection settings**, set the **Authentication type** to **Bearer** and leave the **Token** field empty. If this step is already completed, you can skip it.

4. To create a new request, click the **+** button in your collection and enter a name, such as "Add new item". 5. To add a new item to the table in Xano, use a POST API request and copy the autogenerated endpoint URL.

The typical Xano endpoint structure is: ```plaintext https://api.xano.com/your-endpoint/scores ``` 6. Return to Bravo, choose `POST` as the request type, and paste the endpoint URL. 7. As this is a POST request, we need a JSON body. Go back to Xano, click on the **Run & Debug** button, and copy the existing JSON body. 8. Paste the JSON copied from Xano into the JSON section of the API request body in Bravo.

9. We will replace the values in the example request body with variables while keeping the same key names ("name", "score"), as these match the Xano column names.

To define a [**variable**](https://docs.bravostudio.app/connect-api/request-url-variables), we'll use this notation: `${input}`. In our case, we'll define the variables `${name}` ,`${score}` but you can use any variable name you prefer. {% hint style="info" %} **Permitted characters:** lowercase a-z, uppercase A-Z, 0 to 9, underscore (\_) and dash (-). **No spacing**. {% endhint %} Later on, when binding the UI elements of our app to the API requests, we'll specify which elements are bound to which variables. For instance, if we have a [form](https://www.figma.com/community/file/981976861747536392) connected to this POST request, we'll bind each input field to one of the variables we defined in the JSON body. ``` { "name": "${name}", "score": ${score} } ``` {% hint style="warning" %} For **text** input, include the quotation marks, like `"``${input}``".` For **number** input, do not include the quotations, like `${input}` {% endhint %} {% hint style="info" %} You can use a [JSON validator](http://json-validator.com/) to make sure the JSON snippet you copied is syntactically correct, and avoid getting errors later on. {% endhint %} 10. Send a test request to the database to ensure it is correctly constructed. Navigate to the **Input Variables & Test Values** tab within the API request and provide sample data for the previously defined variables in the JSON body. In this example: `Mary` for `${name}` and `42` for `${score}`. {% hint style="info" %} The key name for the **Test Value** must match the defined Variable Name exactly, including case sensitivity. {% endhint %}

If the POST request is configured correctly, the example content will be stored in your database.\ \ 11\. In step 2, we set the **Authentication type** to **Bearer** and left the **Token field** **empty.** To authenticate the request, go to the "**Input Variables & Test Values**" tab, add "`_authorization`" as variable and enter the `token` in the value field.

12. Once the values are set and the request is authenticated, click **Send**.

scores database after sending a post request

13. If the request is successful, you'll receive a Response message containing data from the API endpoint. This data will depend on the backend configuration. In this example, you'll get data corresponding to the new record created.

Selected data in the Received data tab of an API request

Also a new record will be created with the provided test data in your database.

14. To verify the HTTP response body, go to the **Debug & Inspect Response** tab. A `Status Code: 200 - OK` indicates successful data retrieval.

On the other hand, if the request was not successful, you will get an [HTTP error](https://docs.bravostudio.app/good-to-know/troubleshoot/errors-in-api-requests) as a response. In this case, r**eview and double check your JSON body and URL to be correct**. 15. Finally, rename the variables in the **Output Variables** section to align with the user table API request names for proper data binding. More about [Variables](https://docs.bravostudio.app/connect-api/request-url-variables).

After setting up the API request, bind the form using the guide below: {% embed url="" %}