The Draftbit Docs

Welcome to the Draftbit documentation. You'll find comprehensive documentation and information to help you start working with Draftbit as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

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.

Connect Xano to Draftbit

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 Cars. It represents the tableName and has the following 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 tab on left-navbar.
  • 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 Base URL input field.
  • Click Save.

Available Xano recipes for Draftbit

Fetch all data from Xano REST API into a List in Draftbit

In a blank screen in Draftbit, add a nested Fetch component, List component, View component, and a Text component so that your Layer Tree looks like this:

Inside of the View component, you can place as many Text you would like to be rendered for each column in a row in your data set. The next step is to create an endpoint. Let's try fetching the data using the GET request:

  • Click Add endpoint.
  • Enter a name for this endpoint and make sure the method is GET.
  • Add the /{{tableName}} in Add Path & Params to fetch all rows from the data table.
  • Click the Test button next to the Endpoint input to make sure you've successfully connected to your Xano API.
  • Once everything looks right, click Save to close the modal.
  • Select the Fetch component in the Layer Tree and select the Service you have created.
  • Select the Endpoint you want to fetch the data from.
  • Here is also a Preview mode is shown on how the data is fetched from the service API.
  • Select the List component in the Layer Tree.
  • Change the value for the Data key to <API-name/Endpoint> from the Data Tab in the Properties panel on the right side.
  • The API-name is the custom service name given by you in the previous section. The Endpoint is the name of the API endpoint that was set up previously.
  • Draftbit iterate over all the fields from the API endpoint such that any individual field's value can be mapped.
  • Now, you can configure the mapped field value on the Text component from the Data tab in the Properties panel.
  • Add the dynamic variable {{varName}} to map values. This dynamic variable requires the actual field value from the API endpoint. In the Variables section, from the drop-down menu, select fieldName (list item).

Fetch single row into Draftbit

In a blank screen in Draftbit, add a nested Fetch component, View component, and a Text component so that your Layer Tree looks like this:

To fetch a single row from the Xano REST API service, you'll have to specify the row's ID to fetch fields from that row.

You'll need to create a new endpoint in your Xano REST API service. In the new endpoint, you'll need to:

  • Enter a name for the Endpoint.
  • Add the /{{tableName}}/{{id}} of the entity to delete in the Add Path & Params input.
  • Add a Test value for the {{id}}.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.
  • Select the Fetch component in the Layer Tree and select the Service you have created.
  • Select the Endpoint you want to fetch the data from.
  • Here is also a Preview mode is shown on how the data is fetched from the service API.
  • Draftbit iterate over all the fields from the API endpoint such that any individual field's value can be mapped.
  • Now, you can configure the mapped field value on the Text component from the Data tab in the Properties panel.
  • Add the {{varName}} as the variable name to map value in the Input Text section. This dynamic variable requires the actual field value from the API endpoint.
  • In the Variables section, from the drop-down menu, select Endpoint name/field name.

Here is how the Data tab for the Text component will look like:

Add new data from Draftbit

You need to use a component that:

  • accepts user input and
  • has a Field Name prop to POST data using Xano REST API.

Examples of these include:

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

In the new endpoint, you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to POST using the drop-down.
  • Add the /{{tableName}} in Add Path & Params to fetch all rows from the data table.
  • In the section Body, click the Body Structure tab and insert the request of the body in JSON format. Each field contains a key and a value. The number of fields will depend on your data table.
  • The value of the key will be the value of the {{variable}} prop. This is generally assigned a default value whenever you add a TextInput component in your Draftbit app. To add it in the Body Structure, it needs to be inside the double curly braces as: {{variable}}. The information regarding this is also given in the Body section.
  • In the Body section, you can provide a {{testKey}} that matches the name of the key (or column name) in your data table. It has to be in double-quotes. For its value, provide a {{testValue}}. A test value is a temporary value that can be used for variables during development.
  • In the Body Preview tab, you verify that the Body Structure has a valid structure.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

Below is a general breakdown of what the request will look like. You're about to add multiple fields to a request, make sure you include a comma after each field ,:

{
  "testKey": {{testValue}}
}

You can add the POST endpoint to submit the data entered in Draftbit using the TextInput component to enter the value and the Touchable or Button component to send the request to the API.

  • On the Touchable component, go to the Interactions tab (the last tab).
  • Click the + to open a drop-down menu in the Action tab and select the option Submit Data.
  • Setup the Submit Data by selecting the Service and the Endpoint.
  • Then add the configuration for body request to be sent by selecting the values for {{firstInputField}} and {{secondInputField}} (depending on how many fields you are updating).

Update data from Draftbit

The POST request is used to update one or many entities in the data table by matching a specific field. It is sent to the Xano REST API with a row's ID. It accepts similar input components as mentioned in the previous section, and the request is triggered using a Touchable component.

You'll need to create a new endpoint in your Xano REST API service to update a value. In the new endpoint, you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to POST using the drop-down.
  • Add the /{{tableName}}/{{id}} in Add Path & Params to fetch all rows from the data table.
  • Add a Test value for the {{id}}.
  • In the section Body, click the Body Structure tab and insert the request of the body in JSON format. Each field contains a key and a value. The number of fields will depend on your data table.
  • The value of the key will be the value of the {{variable}} prop. This is generally assigned a default value whenever you add a TextInput component in your Draftbit app. To add it in the Body Structure, it needs to be inside the double curly braces as: {{variable}}. The information regarding this is also given in the Body section.
  • In the Body section, you can provide a {{testKey}} that matches the name of the key (or column name) in your data table. It has to be in double-quotes. For its value, provide a {{testValue}}. A test value is a temporary value that can be used for variables during development.
  • In the Body Preview tab, you verify that the Body Structure has a valid structure.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

Below is a general breakdown of what the request will look like. You're about to add multiple fields to a request, make sure you include a comma after each field ,:

{
  "testKey": {{newTestValue}}
}

You can add the POST endpoint to submit the new data entered in Draftbit using the TextInput component to enter the value and the Touchable or Button component to send the request to the API. Refer to the steps on setting up a function on a Touchable component in the previous section.

Delete data from Draftbit

The DELETE request is sent to the Xano REST API with a row's ID to remove that particular record from the data table.

You'll need to create a new endpoint in your Xano REST API service. In the new endpoint, you'll need to:

  • Enter a name for the Endpoint.
  • Change the Method to DELETE using the drop-down.
  • Add the /{{tableName}}/{{id}} of the entity to delete in the Add Path & Params input.
  • Add a Test value for the {{id}}.
  • Click the Test next to the Endpoint to test if the endpoint is working correctly.
  • Click Save.

Updated about a month ago


Xano


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.