What is Xano?

Xano gives a scalable backend that is frontend agnostic, with a PostgreSQL database, a ready-to-use API, and a No Code business logic builder to transform data to and from any source.

Integrating Draftbit & Xano

Setup steps in Xano

If you do not have a Xano account, create one here. The initial steps to create a new database are:

• After logging in, you will be welcomed by the Dashboard screen.
• Go to the Database tab from the left menu bar and click the button Add Table.
• Enter the table's name under table_name, add a description under Description. Make sure to check Add Basic CRUD Endpoints to allow Xano to generate API endpoints for CRUD operations.
• Click the button Add Table to generate the table.

We are using a custom data table for this documentation in a database called Groceries. It represents the table_name and has some pre-populated data fields and values:

To utilize the data from the Xano into the Draftbit app, let's use the REST API service it gives access to. To connect the API in the Draftbit app, a Base URL is required. The Base URL of the REST API is of the format: https://<your-project-reference>.n7.xano.io/api:<your-api-param>.

You can find the Base URL in the API tab under the section Base Request URL.

Setup steps in Draftbit

To add the Xano API Base URL in your Draftbit app:

• Open the Data modal from the left menu bar
• From the Add your custom API menu, click on Rest API.
• Enter a name for your REST API service.
• Paste your Base URL (from the previous section) into the Dev URL or Prod URL input field.
• Click Save.

📘

Dev & Prod URLS

The Base URL parameter has been updated to give you the ability to set separate base URLs for Development and Production. When you publish your app, you can set which base URL to use, Dev or Prod. Read more about Environments

Using Xano with Draftbit

GET request to fetch all records

In this section, let's populate a Fetch component with all the data from the Xano data table and then display the data fetched from the Xano in a List component.

For reference, here is a how the Components tree looks like for this screen:

The next step is to create an endpoint. Let's try fetching the data using a GET HTTP request. Open the API & Cloud services modal, select Xano service, and then:

• Click Add endpoint.
• In Step 1: enter the name for the endpoint. Make sure the Method select is GET.
• Set the Role to Get Many as the endpoint is fetching a list of items. Set the Object Type to groceries for this example.
• In Step 2: add the base name path: /your-base-name. For the example below, it's /groceries.
• In Step 4: click the Test button next to the Endpoint input to verify the response coming from Xano.
• Click Save.

On app screen:

• Select the Fetch component in the Components tree and go to the Data tab from Properties Panel.
• For Service, select the name of the Xano Service.
• For Endpoint, select the endpoint you want to fetch the data from.
• Select the List component in the Components tree and go to the Data tab from Properties Panel.
• In Data, select Top-level response from the dropdown menu.
• Then, select the Text component in the Components tree and then go to the Data tab from the Properties Panel.
• Add a {{varName}} value (inside the curly braces) to represent a data field from the Xano. For example, we add {{name}} to represent the column name from the Xano.

GET request to fetch a single record

In this section, let's populate a Fetch component with a single record from Xano. For reference, here is a how the Components tree looks like for this screen:

Also, from the List screen, we are sending the id of each list item as a navigation parameter when an action is triggered on the Touchable/Button component. This action will let you navigate to the screen where a single record is fetched and its details are shown.

To fetch a single post from Xano, you'll have to specify a record id that is coming from the navigation parameters.

Data is fetched using a GET HTTP request. Open the API & Cloud Services modal from the top navbar, select the Xano service, and then:

• Click Add endpoint.
• In Step 1: enter the Name for the endpoint and set the Method to GET.
• Set the Role to Get One as the endpoint is fetching a single item. Set the Object Type to groceries for this example.
• In Step 2: add the /your-base-name/{{id}} variable. For the example below, it's /groceries/{{id}}. Then, add a Test value for the {{id}}.
• In Step 4: click the Test button next to the Endpoint input to verify the response coming from Xano.
• Click Save.

On app screen:

• Select the Fetch component in the Components tree and go to the Data tab from Properties Panel.
• For Service, select the name of Xano.
• For endpoint, select the endpoint you want to fetch the data from.
• Set the value for the id in the Configuration > URL Structure section to Navigation > id.
• Then, select the Text component in the Components tree and then go to the Data tab from the Properties Panel.
• Add a {{varName}} value (inside the curly braces) to represent the data field from Xano. For example, we add {{title}} to represent the field and value from the Xano data table.
• Under Variables, you will see the variable name defined in the previous step. From the dropdown menu, select the appropriate field that represents the data field.

POST request to submit new data

Submitting new Data from the Draftbit app to a REST API requires the request to be sent using HTTP POST method.

Your component needs to have:

• accepts user input
• has a Data Source prop

You can use any component that contains a Data Source prop to log user input and submit data. This list of components currently includes:

• Text Input
• Text Area
• Styled Text Field
• Checkbox
• Slider
• Radio Button Group
• Radio Button

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Xano service:

• Click Add endpoint.
• In Step 1: enter a name for the endpoint and select the Method to POST.
• Set the Role to Create as the endpoint is used to create a new record. Set the Object Type to groceries for this example.
• In Step 2: enter the base name as path: /your-base-name. For the example below, it's /groceries.
• 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.
• An example of how Body in a request will look like:

{
  "key": {{textInputValue}}
}

• In Step 5: click the Test button next to the Endpoint input to verify the response coming from the Xano.
• Click Save.

Using a Touchable/Button component, you can trigger the action API Request to submit the data to the endpoint.

The textInputValue passed in the above example is the value of the Data Source property on the Text Input component:

POST request to update data

The POST request is used to update the single entry in the Xano record. It accepts similar input components as mentioned in the previous section and the API Request is triggered using a Touchable/Button component.

Your component needs to have:

• accepts user input
• has a Data Source prop to update data using an API Request

You can use any component that contains a Data Source prop to log user input and submit data. This list of components currently includes:

• Text Input
• Text Area
• Styled Text Field
• Checkbox
• Slider
• Radio Button Group
• Radio Button

Once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your service:

• Click Add endpoint.
• In Step 1: enter a name for the endpoint and select the Method to POST.
• Set the Role to Update. Set the Object Type to groceries for this example.
• In Step 2: enter the base name as path: /your-base-name/{{id}}. For the example below, it's /groceries/{{id}}.
• 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.
• An example of how Body in a request will look like:

{
  "key": {{textInputValue}}
}

• In Step 5: click the Test button next to the Endpoint input to verify the response coming from Xano.
• Click Save.

Using a Touchable/Button component, you can trigger the action API Request to update the data to the endpoint.

DELETE request to delete data

The DELETE request is sent to the Xano data table with an item's id to remove that particular record from the table.

For example, once you have the necessary component(s) on your screen, you'll need to create a new endpoint in your Xano REST API service. In the new endpoint you'll need to:

• Click Add endpoint.
• In Step 1: enter a name for the endpoint and select the Method to DELETE.
• Set the Role to Delete. Set the Object Type to groceries for this example.
• In Step 2: add /your-base-name/{{id}} where id is provided as a test value of an existing record when testing the endpoint. In your app, you will have to pass the id of a single record.
• In Step 4: click the Test button next to the Endpoint input to verify the response from Xano.
• Click Save.

Using a Touchable/Button component or an Icon Button, you can add the API Request action to trigger the DELETE request.

Additional Resources

For Authentication with Xano and Draftbit, please refer to the guide here.