Building A Product Management Tool Using Appsmith and FaunaDB

In this article, I'll be showing you how to create a product management tool that helps, small business signed up on a mythical e-commerce platform manage products in their catalogue. This tool will allow users to view products and edit them from their catalogues. This article will also help to show how you can integrate Appsmith with other serverless tools like FaunaDB.

Table of Contents

• Setting Up A FaunaDB Database
• Building The Management Tool Using Appsmith
• Conclusion

Fauna is a flexible, developer-friendly, NoSQL database delivered as a secure and scalable cloud API with native GraphQL. It is a serverless solution for hosting data without having to worry about setting up or configuring your backend architecture to host data, as with traditional applications. This allows developers to focus more on building application logic with little to no involvement in database hassles - Fauna handles all that for you.

Setting Up A FaunaDB Database

In order to follow along, you'll need to have a FaunaDB account, if you don't have one you can easily sign up in a few minutes via this link.

Once you're signed up, log in to your Fauna dashboard and use the Create Database button to create a new database, fill in the details as shown below:

Observe the Use demo data option and see that it is checked, this will tell Fauna to help us prepopulate this new database with demo data that we can use to play around, and co-incidentally (or not), this data is related to customers and businesses. Fauna will add collections, documents as well as indexes, and you can find them in the correspoding sections of your database dashboard as shown below:

Generating An API Key

Now that this is done, what we need now is an Api key, which will allow us communicate with our database from other applications, like our appsmith tool for instance. To get this head over to the Security tab of the database dashboard and click on the New key option to generate a new key, you can give the key a name if you want, leave the other options as they are and click the Save button to generate a new key.

Once you get the key, you need to copy it and save it somewhere for later when we need it. That's it for setting up the database, prettu easy as you can see, now lets create the interface for our tool.

Building The Management Tool Using Appsmith

To begin with you want to make sure you've signed up with Appsmith, its super-easy you can sign up here. Once you have that login to your dashboard and create a new application, this should bring you to the development environment like the one shown below:

This environment is where we'd be building our "application" and its mostly a drag and drop environment with widgets and other build tools on the left pane and the wider space to the right is the development area where you drag widgets on.

We'll start by clicking and dragging a table widget unto the right area, this table will display a business's product listings, and the details of each one:

You can resize the table by dragging on the edges, however leave some space so that we can add one more widget - a form. This form will collect information for a new product to be added to the list and will also serve as a means of editing already existing products in the catalogue.

Click and drag the form widget onto the right area so that it fits to the right of the table as shown below, you may need to do some resizing to get it to fit in there:

Populating The Table

In order to populate the table with data from our database, we'll be using the GraphQL api that Fauna automatically created for us when we created the database - again this is courtesy of the option we checked earlier on when we created the database to allow Fauna pre-populate the database with data on our behalf.

In order to see what queries we can run head over to the GraphQL section in the database dashboard to view the queries Fauna created on our behalf:

The link to this graphql api is in the searchbox on this page, copy it and head over to the appsmith dashboard from before, and click on the Datasources option to create a new api.

It should prompt you to enter details about your api on a new page, these includes a name for the API (I called mine FaunaApi), the URL, headers and data or request body to be sent to the Api. Fill the details as shown below:

For the value of Authorization in the headers, its usually in the format of Bearer [Fauna Secret] which is what we got from previous steps, copy that and paste it in, as I have done.

Next we must now write the query that fetches data from our api, so in the body of the request select type JSON and add the following piece of query to fetch all products on our hypothetical platform:

{{
    JSON.stringify(
        {
            variable: null,
            query: `
                {
                    allProducts{
                        data{
                            _id
                            name
                            description
                            price
                            backordered
                            backorderLimit
                            quantity
                            store{
                                name
                            }
                        }
                    }
                }
            `
        }
    )
}}

Observe that we use the JSON.stringify method provided by appsmith (via the moustache syntax) to ignore the line breaks. Inside the query we have the query name - allProducts and is one specified by Fauna on our behalf you can check its doc back at the Fauna dashboard under the GraphQL section to see available queries and mutations.

Now head back to the table widget and we'll ask the table to fetch data from this api instead of the hard-coded data in it. Click on the table widget and its context manager should pop-up right beside it, and under the field that reads - Table Data, you want to clear out the hard-coded data in it and add the following instead:

{{FaunaApi.data.data.allProducts.data}}

This will populate the table with results from the api instead.

The store column seems to come as an object, as opposed to a simple string. This is because stores are independent documents in the database too, and have other attributes as well, however in this query we only fetch their name but the result comes in an object format regardless.

Appsmith allows us the flexibility of editing columns too, so we can click on the settings icon on the store column in the Columns section and in the computed value option from the menu that shows up, we change the value to

{{currentRow.store.name}}

We also want to set the Column Type on the price, backorderLimit and quantity columns to a type of Number so that Appsmith can properly handle the data.

Building The Form

To create a form, we'll need the Text and Input widgets which will help us to name and create the input fields for the form. For this form we need fields that correspond to the title of each column except of course the _id and store column, those should be immutable ideally.

So drag and drop the widget and position them so that the form looks like the one shown below:

Observe that for the backordered column, we drag a Switch widget to the form as opposed to an input widget because it's values are boolean and that corresponds to a switch or a checkbox widget which can represent both states as checked or unchecked.

Now we want to be able to prefill these fields when any product is selected on the table so that we can edit them on the form. To do this we leverage on the Default value property of the input widget and add moustache syntax to fetch data on the selected row and add it to the field.

Add the following to the Default value entry on the Product name field to prefill it with the name of the product on a selected row.

{{Table1.selectedRow.name}}

If you don't see the details of the input widget, click on the settings icon beside it to bring up the properties of the widegt, as shown below:

Do this for the other fields adding in the corresponding column name for each one. Also set the Data type property for the input fields: quantity, backorderLimit, and price to type of Number.

For the "backordered" switch use the Default Selected option to add the moustache syntax as with the other fields, as shown below, this will automatically change the state of the switch depending on what value on the "backordered" column is for the selected row.

Updating A Product

Once this is done, we need to write a query that helps to update the document in the database when we change something in the form and hit the submit button. This query will be tethered to the Submit button widget, which was automatically added when the form was created.

We will now create a new Api to handle this, using the same steps as we have done for the first one, give this a name, and use the same headers from before. In the body of the request, we want to add the following to pick data from the input fields and send them to the graphQL api:

{{
    JSON.stringify(
    {
        query: `mutation ($object: ProductInput!){
                            updateProduct(
                                id: "${Table1.selectedRow._id}",
                                data: $object
                            )
                            {
                                name
                            }
                        }`,
        variables: {
            "object": {
                    name: Input1.text,
                    description: Input2.text,
                    price: Input3.text,                        
                    quantity: Input4.text,
                    backorderLimit: Input6.text,
                    backordered: Switch1.isSwitchedOn
                }
        }
    }
)}}

This query fetches the ID of the currently selected row, and uses the data from the pre-filled and or edited form to update the details of the produt on the Fauna database.

Let's now tie this with the submit button so that when we edit the form and click submit the this api is called. Head over to the submit widget and bring up the settings pane, and under the Actions section choose the option to Execute a query and then select the updateProduct api from the list of options showed.

We also want the table to refresh its data onSuccess of the api query, and we do this by specifying an onSuccess action right beneath the onClick action of the submit button, this also Executes a query via the FaunaApi which we created first - remember this api is responsible for populating the table with data from the database. You can now select any row from the table, edit it in the form and send the request to update the database, which in turn updates the table accordingly.

Conclusion

In this article, we have seen a brief introduction to Fauna, and the kind of flexibility it offers, we created a FaunaDB database, and generated data automatically with the help of Fauna including a full fledged GraphQL API, which helped us to intereact with Appsmith later on, lastly we worked with Appsmith to build a simple product management tool for business owners, and connected it to our Fauna API, using datasources from Appsmith. Hopefully this tutorial has further shown you what is possible with serverless technologies like Appsmith and Fauna. Thanks for sticking with me till the end, happy coding!.