Xano - How to connect Xano to Adalo

In this step-by-step guide, we'll show you how to connect your Xano backend to Adalo, a no-code mobile app builder. By following these instructions, you'll be able to create a native mobile app that displays data from your Xano database tables, without writing a single line of code.

Prerequisites

Before we begin, make sure you have:

1. A Xano account with a database schema set up
2. An Adalo account (you can sign up for free)

Step 1: Get the API Base URL from Xano

1. Log in to your Xano account and navigate to the API page.
2. Locate the API group containing the CRUD operators for the database table you want to display in your app (e.g., "Get Merchant, Query All Merchant Records").
3. Hover over the API endpoint and click to copy the URL to your clipboard.

Step 2: Create a New Adalo App and Connect to Xano

1. Log in to your Adalo account and click on "Create New App."
2. Choose "Native Mobile App" and click "Next."
3. Select the "Blank Template" and give your app a name (e.g., "Deals App"). Click "Create."
4. Once your app is loaded, click on the "Database" tab in the left navigation bar.
5. Under "External Collections," click "Add Collection."
6. In the "API Base URL" field, paste the URL you copied from Xano.
7. Give the collection a name (e.g., "Merchant") and click "Next."
8. Adalo will detect that this is a "Get All" endpoint. Click "Run Test" to verify that Adalo and Xano are communicating successfully.
9. Click "Create Collection" to finish setting up the connection.

Step 3: Display Data from Xano in Adalo

1. Click the "+" button in the top-left corner of the Adalo editor and drag a "Simple List" component onto the blank screen.
2. When prompted to select the data source for the list, choose the "Merchant" collection you just created.
3. In the "Title" field, delete the placeholder text and click the "magic T" button to access the schema from your Xano database table.
4. Select the field you want to use as the title (e.g., "name").
5. In the "Subtitle" field, delete the placeholder text and click the "magic T" button again.
6. Select the field you want to use as the subtitle (e.g., "description").
7. Click the "Preview" button to see your Adalo app displaying data from your Xano database table.

Congratulations! You've successfully connected your Xano backend to Adalo and built a mobile app that displays data from your database, without writing any code.

By following this guide, you've experienced the power of Xano and Adalo in action. You can now explore further customizations and integrations to build more complex mobile apps tailored to your specific needs.