DronaHQ

Welcome to this tutorial on building applications using the new DronaHQ integration with Xano! DronaHQ is a powerful no-code platform that allows you to build custom applications quickly and easily, leveraging Xano's backend capabilities. In this guide, we'll walk you through the process of setting up the integration, accessing your Xano data, and creating a Customer Relationship Management (CRM) application using DronaHQ's intuitive visual interface.

Getting Started

Before we dive in, let's quickly understand what DronaHQ is and how it integrates with Xano. DronaHQ is a no-code application builder that provides a range of UI building blocks, workflow actions, and a robust table function, making it simple to create professional-looking applications. The best part? DronaHQ has built a custom connector that allows seamless integration with Xano's Metadata API, giving you access to all your Xano data and functionality.

Setting Up the Integration

To get started, follow these steps:

1. Create a Metadata API Access Token: In your Xano instance, navigate to the "Accounts" section and create a new Metadata API access token. Make sure to provide the required scopes (create, read, update, and delete) for the token to have full access. Copy this token securely, as you'll need it later.
2. Start a New Application in DronaHQ: Log in to your DronaHQ account and start a new application. You can work from a template (e.g., the CRM template) or start from scratch.
3. Add the Xano Connector: In DronaHQ, add the Xano connector by searching for it in the connector library. Create a new connection and paste the Metadata API access token you copied earlier.

Now that you've set up the integration, you're ready to start building your application!

Building a CRM Application

Let's walk through the process of building a simple CRM application using the DronaHQ template and the Xano integration.

Displaying Data from Xano

1. Create a Data Query: In DronaHQ, navigate to the "Data Queries" section and add a new data query. From the connector library, select the "Get Table Contents" method to retrieve data from your Xano instance.
2. Select Your Data Source: Choose the appropriate environment, workspace, and table (e.g., the "Contacts" table) from which you want to fetch data.
3. Test the Query: Test the data query to ensure you're receiving the correct data from Xano.
4. Display Data in the Table: Remove any dummy data from the table grid and add your data query response to populate the table with your Xano contacts.
5. Transform the Response (Optional): If needed, you can use JavaScript to transform the response data into the required format for the table.
6. Preview and Search: Preview the application, and you'll see that the table is now populated with data from your Xano instance. You can even search and filter the data directly in the table!

Adding and Updating Contacts

1. Configure the "Add Contact" Action: When a user clicks the "Add Contact" button, DronaHQ will open a slide-out panel (Screen 9 in the template) to capture the new contact details.
2. Map Form Fields to the Request: In the slide-out panel's workflow, map each form field (e.g., "Contact Name," "Email") to the corresponding fields in the "Create an Item in Table" action from the Xano connector.
3. Test the "Add Contact" Functionality: Preview the application and try adding a new contact. Refresh the table to see the new entry.
4. Configure the "Update Status" Action: When a user selects a contact and clicks the "Update Status" button, you'll want to update the "Lead Status" field for that contact.
5. Map Fields and Refresh Data: In the workflow, use the "Update Table" action from the Xano connector, mapping the existing contact details and the new "Lead Status" value. After updating the table, refresh the data query to reflect the changes in the table.
6. Test the "Update Status" Functionality: Preview the application, select a contact, update the status, and verify that the changes are reflected in the table.

Accessing Custom APIs

In addition to the Metadata API, you can also securely access your custom APIs built in Xano from within DronaHQ. Here's how:

1. Set Up Single Sign-On (SSO): Configure SSO in DronaHQ using a JWT token exchange API in Xano. This will ensure that users are authenticated securely when accessing your custom APIs.
2. Create a Custom Connector: In DronaHQ, create a new custom connector using the REST API connector type. Enable multi-step authentication and configure the connector to pass the user's auth token from Xano in the headers.
3. Test and Use Custom APIs: Test the custom connector by making a request to one of your Xano APIs. If successful, you can now integrate your custom APIs into your DronaHQ application workflows.

Congratulations! You've successfully integrated Xano with DronaHQ and built a functional CRM application. This is just the beginning – with the power of Xano's backend and DronaHQ's no-code capabilities, you can create a wide range of custom applications tailored to your specific needs.