How to create a ticket support system with Baserow and DronaHQ

Back in 2020, Forrester thought the no-code/low-code market would hit $12 billion by 2023. They were off; instead, it reached $13.2 billion in 2023. That’s a yearly growth of 21% since 2019. Now, Forrester says this market could grow to $30 billion by 2028.

We’ve talked about the business perks of no-code and low-code platforms before. This time, we’re going to show you how to build a custom UI with Baserow data using the DronaHQ platform.

We’ll make a customer ticket support system for our example.

Ticket support systems are key for businesses. They help with communication, sorting tasks, and keeping track of things. They make sure customer questions get answered fast, let you see how your team is doing, and keep helpful info handy.

For example, a software company can sort out support tickets, focus on the big issues, and watch how long it takes to fix them. This keeps customers happy and coming back.

In this tutorial, we’ll learn to build a ticket support system that can show tickets, create new ones, and update existing ones.

What we’ll do:

1. Set up a database for a ticket support system in Baserow.
2. Connect the Baserow database with DronaHQ.
3. Create the ticket support system interface in DronaHQ.

This system will let us do things like:

• Ticket view: See all tickets in one place. This helps support teams manage their work and focus on the most urgent tasks.
• Ticket creation: Users can create tickets for their issues, making sure we don’t miss anything.
• Ticket updates: Keep tickets up to date. This way, users and support staff can easily talk to each other and see how things are going.

Integrating DronaHQ with Baserow

Baserow is the open platform to build databases and applications at scale. It lets teams create databases and applications without coding. Baserow has an easy-to-use interface where you can set up tables, fields, and link tables together.

DronaHQ is a low-code platform for building apps quickly. It’s great for businesses that want to make custom apps fast. It has tools like drag-and-drop builders, ready-made templates, and ways to connect with different data sources and APIs.

Let’s start building our ticket support system.

Prerequisites

Baserow account:

• Ensure that you have a Baserow account.
• Obtain your Baserow Database Token from your pre-stored database in Baserow for integration.

Steps to get your token:

• In the Baserow dashboard, click your profile in the top left, and navigate to Settings.

• Within the popup, go to Database tokens and create a new token by providing a name and workspace.
• Click Create, and next to the token’s name, click the ellipsis button to copy your token.

DronaHQ account:

• Ensure that you have a DronaHQ account.

Steps to integrate

REST API authentication and connector configuration:

Baserow:

1. Visit the “API documentation” section on your Baserow dashboard.

2. Choose the table you wish to interact with and get its table ID, access its APIs, and copy the cURL for the desired integration.

DronaHQ:

1. On your DronaHQ Homepage, navigate to the connectors section.

2. Click on +Connector > Connector > Select Rest API.

3. Copy the Baserow API cURL code. Paste the Baserow API cURL into the Import cURL section.

4. Replace the placeholder for the Baserow database token with the token obtained earlier.

5. Test and save the connector. After that, it’s ready for use in your application.

Required API endpoints for integration:

API endpoints are URLs used by an app to talk to another system or service. They act as doors for sharing data and doing tasks between different software. They tell us what actions we can do and what info we can get.

We’re making a ticket management system that makes it easier to handle user tickets. It has features like:

• Ticket overview: Users can see all tickets and sort them by their status.
• Ticket creation: Users can make new tickets right in the system.
• Ticket updates: Users can change ticket details to keep them current.

We need these API endpoints from Baserow:

• ListRows: Gets detailed ticket info from Baserow and shows it in a table.
• CreateRow: Lets users create new tickets easily.
• UploadFileWithAURL: Helps store attachments in Baserow, making ticket management better.
• UpdateRow: Updates tickets in the system when changes are made.

Creating the frontend with DronaHQ

Required UI screens/components

Management system screen (home screen):

• Table grid control: Shows a list of tickets and allows quick filtering for better usability.
• Collapsible menu: A left-side menu that’s easy to use, displaying all the filter options.

Binding data to table grid

1. Click on Data Queries > Connector Library > Baserow/GetRows. This will enable us to fetch all the details from Baserow in a data query with the keyword GetRows.

You’ll see the raw response could be structured in a JavaScript (JS) object. To do this, write some JS code under the transform response.

For example:

CODE:

data = data.results;
var output = [];

for (var i = 0; i < data.length; i++) {

var attachments = data[i].attachments;

var attachmentUrls = [];

for (var j = 0; j < attachments.length; j++) {

attachmentUrls.push(attachments[j].url);

}

data[i].attachments = attachmentUrls;

output.push(data[i]);

}
data = output;

This code iterates through each result in the ‘data’ array, extracting attachment URLs and restructuring the data to include only these URLs. Finally, it assigns the modified data back to the ‘data’ variable.

2. Go to the Data Bind Section of Table Grid Control and simply provide the data query name in between {{}}.

Ticket Details (tray screen):

• Detail View Control: We’ve added this to a tray screen so you can see ticket details. At the bottom, there are buttons for ‘Reply’ and ‘Update’. (Just so you know, the ‘Reply’ button is just for show right now. We can make it work like other buttons later.)

To link data to the Detail View is easy. Just use the keyword from the selected row in the table grid where data shows up. Use this: {{tablegrid.PROPERTIES.SELECTEDROWS}}.

Screen used for ticket creation:

• Form: Designed for creating new tickets with multiple dropdowns for type, category, and priority.
• File upload control: Allows users to attach multiple files to the ticket.

To explore more about screens and other UI components, visit DronaHQ MultiScreen Apps Documentation.

Baserow API calls in DronaHQ: Action integration

Action flow for creating tickets

To start the ticket creation process, click the button control. On the ticket creation screen, click the button to create a new ticket. On the right, in the actions section, find the on_click event trigger. Select it, and an action flow screen will open. Here, you’ll insert various on-screen and client-side action blocks.

Tip: Double-click the control to open its action flow builder.

Uploading files with URL

1. Iterate Task (Attachments):

Use an Iterate Task action to handle multiple attachments by iterating over the file upload control. Pass {{attachments}} as the keyword.

Note: Keywords in DronaHQ refer to unique identifiers or names assigned to components like controls and outputs. They let you reference values within the platform. For more details, check this link.

2. JSCODE Block

Use JSCODE within Iterate Tasks to store values for each iteration and create output variables. Access data from each iteration using ITERATETASK.VALUE.

Code used:

output = url;

Click Continue and create an output variable named attachmentURL to store the blob URL of that iteration.

3. Baserow (Custom API connector block)

Next, add the Baserow connector to upload files using the UploadFileWithURL API endpoint. It takes a blob URL from the file upload control and stores a public link in the Baserow table.

Info: The {{JSCODE.attachmentURL}} keyword is the output from the JS code block, used to pass the saved URL for each iteration.

Click continue and save the response in an output variable named uploadedFiles.

4. JS Code Block

Add another JS Code to store responses from the uploadedFiles variable for each iteration.

Inside the JSCODE, we want two input parameters:

• attachmentObjs - Variable created in the Data Query section. It acts as a global variable.

• uploadedFileObj - Output from the BASEROW_UPLOADFILE API, basically the uploadedFiles

Code used:

if(typeof attachmentObjs === 'string'){
attachmentObjs = [];

}

attachmentObjs.push(uploadedFileObj)

output = attachmentObjs;

This code turns attachmentObjs into an array if it’s a string and adds uploadedFileObj to it. The array is then set as output.

We will save the output of this action block too, in a variable named output.

5. Set the variable block

Update the global variable attachmentObjs with the new values using the set variable data action.

Creating tickets from form details

Continue the action flow after the ITERATE TASK block to define the logic for creating a ticket with form data.

1. JS Code Block

   This block gathers input values from form controls. Extract references from all controls on the Create Ticket page to construct an object and save it as a variable named output.

   

2. Baserow (Custom API connector block)

Use the Baserow connector to create a new row with the CreateRow API endpoint.

3. Toast block

Show a toast message for success or error during ticket creation.

4. Run data query block

Refresh the table to show the latest tickets.

5. Navigate to block

Redirect to the Home screen on success.

Action flow for ticket update

The Update Ticket screen resembles the Create Ticket screen, featuring multiple dropdowns for modifying ticket status, type, and category. Values are automatically populated based on the selected ticket in the detail view.

Double-click the update button to open the action flow builder and add action blocks.

1. JS CODE Block

Prepare an object with ticket changes and create an output variable for the API call.

Make sure to save its response as a variable.

2. Baserow (Custom API connector Block)

Use Baserow to update a row with the Update_a_row API endpoint.

3. Toast block

Display a toast message for success or error during ticket update.

4. Run data query block

Refresh the table to show updated tickets.

5. Navigate back to the Home screen.

Final look at the ticket support system

See the live demo of the ticket support system application here.

Summary

To wrap things up, getting the hang of combining Baserow with DronaHQ to craft a custom tool, like our ticket support system, is a key move for making your company’s internal support smoother and more agile.

Baserow and DronaHQ stand out for their flexibility and user-friendliness. They let you build lots of apps, from project management tools and employee directories for your team to customer portals and feedback systems for your users.

Now that you’ve got these skills, think of all the creative ways you can use these tools to fix issues and make your organization run better.