Many companies and organizations rely on internal dashboards or admin panels that are connected with different data sources. In this guide, you’ll learn how to integrate a MongoDB data source with Appsmith and build creative dashboards.
Usually, building an admin interface over MongoDB is a time taking process and a lot of configuration has to be made. Also, for database management, schemas and queries have to be maintained on a different platform. While the UI client would be needing one more server. But with Appsmith, you can have everything under one roof and you can build UI within no time. Let’s see how by connecting to MongoDB on Appsmith. Below is a screenshot of how our dashboard is going to look like:
If you prefer a video tutorial, check out the video here!
Usually, MongoDB clusters are hosted on the cloud. Now let’s connect to one of the example clusters that’s on MongoDB cloud and list out all the data that’s present inside the database.
The database we’ve worked on is a collection of product and sales information. You can find the finished admin panel app here.
You have your data-source connected, and also a query that can fetch all the product items for you. Now, let’s put these on a table and render all the data. To do this, you’ll have to navigate to the Page, find the Table Component under the Widgets section, drag and drop it to the canvas. Next, open the table’s property pane by clicking on the cog-wheel on the table. Now under the Table Data property, add the following snippet:
Here, you’re using the <highlight>get_products<highlight> DB query and rendering the data from it onto a table.
Not just reading data, with Appsith you can perform all CRUD operations on the MongoDB. Now on our dashboard/page let’s create a form that allows us to update any selected value on the table.
To build this form, we’ll need to drag over a form widget, a bunch of text widgets, an input widget, and a date picker widget to the canvas. The form should look like this after setting up the UI:
Once we have the form setup, we would need to link the form to the table so that when a product is clicked on the table, the corresponding information is prefilled on the form.
Appsmith provides us with an easy way to hook into a widget’s state. You can configure the text widget to show the name of the product selected on the table by setting its <highlight>Text<highlight> property to:
You can do the same for the date picker and input widget so that the default text is set based on the item clicked on the products table. For example:
Also, don’t forget to set the <highlight>Data Type<highlight> of the input widget to <highlight>Number<highlight>.
Lastly, you’ll need to write a query that grabs data from the form and updates the product selected on the table when the submit button is clicked. To set this up, click on the cogwheel on the submit button. Then set the <highlight>onClick<highlight> to execute a DB query and then click on create a query:
Let’s call this query <highlight>update_product<highlight> and configure it this way:
The <highlight>update_product<highlight> query shown above updates the item with <highlight>_id<highlight> selected on the table with <highlight>quantity<highlight> and <highlight>expires_at<highlight> gotten from the input and date picker widgets. Clicking the submit button on the form triggers this query.
You’ll now have a functional dashboard that displays product information with a form that allows us to update an individual product.
Additionally, you can display data using charts. We have a <highlight>sales<highlight> collection that lists sales data of a particular product. It’s a good idea to display this data in a chart.
To build this functionality, we need to go back to the table widget and configure the <highlight>onRowSelected<highlight> action to execute a DB query and then, click on create a new query.
Let’s name this query <highlight>get_product_sales<highlight> and configure it like this:
The above query filters sales information on the sales collection for the product with the <highlight>_id<highlight> selected on the table. Also, this query will run whenever a row is selected on the table.
Lastly, we need to display the data from this query in a chart widget. So drag in a chart widget and configure the <highlight>Chart Data<highlight> to be:
And we can see the chart widget re-rendered with the sales data for the selected product on the table. You can go ahead and tweak the widget as you see fit.
To deploy the admin panel, hit the deploy button at the top right corner. You can share the admin panel by clicking the share button and toggling the switch to make it public or only invite people you want to have access to the app (i.e people in your organization) via email.
Kudos! Your admin panel is now up and running!