How to build an interactive MongoDB Admin Panel

This article walks us through the process of creating a MongoDB Admin Panel on DronaHQ. We will be integrating with the customer database present in MongoDB to notify the admin or sales managers on Slack every time a new customer is added to the database.

The Admin Panel is the fundamental tool that allows for easy access and manipulation of data within the user interface. Using the admin panel, you can manage products and orders, offer discounts, interact with your customers, and do much more.

Here is a quick video tutorial for you to follow along:

An admin panel can be turned into a Sales Dashboard to display business metrics and get your sales insights. It can also be used to export weekly/monthly/yearly data to create reports. Say you run an ecommerce business and need a solution to manage return orders. The customer database sits in a MongoDB database, support tickets being raised on a platform like Zendesk and payments managed through payment gateway tool like Stripe – you can stitch together these sources of truth to an admin panel that looks up the order details, allowing the admin to perform actions like approve return, refund amount, notify the customer.

| Start designing MongoDB Admin Panel along with us. Sign up for FREE

Building a MongoDB Admin Panel in under 10 minutes

For this example, you need to be signed in to your DronaHQ Studio accounts. If you are DronaHQ user, you can follow along with us here.

1. Adding the MongoDB integration on DronaHQ

First, head over to the panel menu on the left and click on “ + Connectors.” A list of connectors will pop up. Under the connectors menu, and then select “MongoDB.”

Step 1: Entering Basic Details for the Database Connector

Enter a name for the connector that you would like to use. This will be used to refer to the connector while you are building the app.

After you are done adding a name and description for the connector (I chose to write the purpose of this connector as my description), click on “Continue.”

Step 2: Adding the Connection String from MongoDB

Under the Connection Strings Section, click on “Continue.” It will prompt you to “Test your Connection.” Click on “Test.” You will be asked to select the “Environment” in which the Connector should be available. You can choose between Dev, Beta, and Prod. 

I will select Prod as I will need the connector to work in the live app that the customer support team will use. 

To get the Connection String, head back to your MongoDB database. In my app, I am using MongoDB Atlas. Head over to Clusters > then click on Connect. 

Step 3: Configuring the Database and Testing

Click on Connect your Application to get the Configuration link in the next step.

Here’s the process by MongoDB on how to get the configuration link and use it in your apps. 

Once you have this link, head back to DronaHQ and enter the copied link into the box. The subsequent field will auto-populate. Click on “Submit” and proceed to 

Once these configurations are done, you need to Test the request and connection. If the authentication is successful, you will get the response accordingly. You can now click Continue to Finish and Save your configuration. You will notice the connector is added to the list. 

Step 4: Adding query to the database 

This is an important step. 

Here you configure the various actions MongoDB supports. For example, if your action is Find the parameters would be Filter, projection, sort, limit, and skip, and you can use this to read the data. If you choose InsertOne as an action, the parameter will change to Insert as Key: Value string to write to the database. Once you have assigned the necessary values, you can Run the query. The response can be seen as per the parameters given.

Next, you need to Enter a service name, the collection, and the action. 

Let’s name it “FindData.” For our customer portal use case, I will select the “Find” action. Under the Collection dropdown menu, you will be able to see the databases in your cluster. Pick the one you want to use in your app.

Once you are done, click on RUN on the top right corner. You will be able to see the first 10 rows. 

Note: Only the last row will be saved. If the final row has Name, Email, Contact, Address, Company fields, only those will reflect in your app later (jump to see)

Click on “Save” to proceed to the next step. 

You can now view the queries you saved and use in your apps later under your specific connector under Custom Database connectors.

Building Admin Panel

Step 1: Building an admin panel from scratch

On the left menu, click on “Apps,” and then click on the “ + “ sign to start building your app from scratch.

Note: At this step, you are very likely to find a relevant app template (like Customer Support Tool, Sales Dashboard, Customer Feedback, Refund Tool, and so on) under the “TEMPLATES” heading, but in this article, we will be making the app from scratch. If you already have an app on DronaHQ, you can use the connectors we just configured in those apps too. 

Let’s give our app a name and a description.

Step 2: Creating the Screens/UI 

The app will open up in a new tab like in the image below. To make things faster, I will pick a template screen from the Screen Marketplace. To select an app screen, click on the “ + Add.” 

You can browse through a list of Screens, Menus, Pop-ups, Trays. For this app, let’s go with the Two Column with Tabs screen.

You will see the screen is added to your app: 

Step 3: Using MongoDB connectors in App

For this, I can use the table grid control. 

To do that, we click on the Table Grid Control, then click on the database icon as shown below in the image. 

This will pop open a menu on the right of the screen that displays the various methods you can bind your data to the Table Grid control.

Click on the Database icon and head over to add the Custom Function. Here is what the formula should look like: 

BINDAPI([MongoDB.result.rows.Name,MongoDB.result.rows.Email,MongoDB.result.rows.Phone,MongoDB.result.rows.Company,MongoDB.result.rows.Address,MongoDB.result.rows.City,MongoDB.result.rows.ZIP,MongoDB.result.rows.Country])

You can use a similar formula for all other databases like orders list, payment details, etc.

This brings us to the end of part 1 of the app-building process. In part 2, I will be 

1. Adding and updating data from the MongoDB GUI 
2. Delete record in the MongoDB Database

DronaHQ has a growing library of native integrations to let you pull in and combine data from different sources, including your databases and APIs.  So if you want to enrich your MongoDB data with some data from another source, you can do so with a ready connector. For this use case, we will use MongoDB and Slack.

Let us know what you would like us to cover in this tutorial next. Start building your MongoDB Admin Panel.

• [Edit Note] June 2021 – Connectors have a new look and feel. While the configuration process remains the same, the  UI has been enhanced improved experience. Learn more about it here.