Building a Store Catalogue Management System using Appsmith and GraphQL
8
April
2021
Tutorial

Building a Store Catalogue Management System using Appsmith and GraphQL

Building a Store Catalogue Management System using Appsmith and GraphQL
Vihar Kurama
0
 minutes ↗
#
javascript
#
graphql
#
web-development
#
ecommerce
Tutorial

Catalogue management is hard. But building a catalogue management app for your company is harder. Not only does the application have to connect to multiple tables/API, and pull data on inventory, price and even offers, but the application also needs a robust UI that lets the user manage this catalogue easily.

Not only does this take a lot of time to build and maintain, but direct access to the database or an API endpoint that could return private information could also prove to be a problem. GraphQL helps solve these problems inherently in the way it returns only what it is queried for.

Because of these benefits, GraphQL is a great interface to develop an internal application on and to make development and maintenance easier, a low-code tool like appsmith can be very useful and will help speed up the process of development.

In this tutorial, we'll learn to create an application to manage a games store's catalogue running a GraphQL backend. We'll be using appsmith to build the application and implement CRUD operations on the database. Here's the link to the final application.

Game Catalogue App Screenshot
Appsmith is an open-source framework that lets developers build dashboards, workflows, and CRUD apps with only the necessary code. You can connect to any API or databases like MongoDB, PostgreSQL, or MYSQL and get access to multiple widgets including charts, tables and forms for building a UI really fast.

Initial Setup

To build this application, first, we’ve collected a dataset from Kaggle that has a list of games, their prices, rating, average playtime and genre they’ve belonged to. We’ve created a mock database out of this, hosted it on Hasura and exported them as GraphQL APIs. Below is an image showing some of the attributes of the dataset.

Mock Data hosted on Hasura

Here, as we can see, the response consists of data of games in a JSON format. Next, we’ll use Appsmith to utilise this database and build a Store Manager by writing different GraphQL queries.

Getting started with Appsmith

To begin, we'll need to sign up for Appsmith (it's free!), if we don't already have an account. We can also deploy a Docker image on a server. For this tutorial, we're going to create an application on Appsmith cloud.

  1. Sign in to Appsmith Account
  2. Click Create New to create a new application and name it GraphQL Store Manager. This takes you to an empty workspace with a sidebar.
  3. On the sidebar, you should see items like Pages, API, and DB Queries in a folder-like structure. Under Pages, a new page, Page1, already exists. Rename it as Store Dashboard.

Below is a screenshot of the application:

Initial App Setup

Connecting to the Database and Creating the first UI View

To work with Appsmith, you need a database. This can be in the form of an API or a database. Appsmith supports MongoDB, MySQL, and PostgreSQL, among others. In this case, we’ll be connecting to Hasura, as it'll be our GraphQL backend server. To establish a new connection, follow these steps:

  1. Make a connection to a database by clicking the plus icon near APIs on the sidebar under a page.
  2. Now, rename your API to FetchGames
  3. We’ll write a POST request and use GraphQL query to list down all the games in the database.
  4. Next, use the following URL as the data source to access the mock database hosted on GraphQL: https://mock-as.hasura.app/v1/graphql
  5. We’ll have to set headers in order to access the database. Set content-type to application/json and x-hasura-admin-secret to qpN7KbsgIoKcuuC1sL3xiaIN2eegukvPPweg6MW1RkM8KUkaHAi85U3FOVj0Zkxm
  6. Next, we’ll have to write a GraphQL query in the request body to list all the database games. This will require an object with query as key and the GraphQL query value associated with it to fetch the games.
{
  "query": {{JSON.stringify(`
    query {
        steam_games(limit: 100, order_by: {appid: asc}) {
            name
            appid
            average_playtime
            genres
            price
        }
    }
  `)}}
}

Here, we have the query stringified with moustache syntax to ignore all the line breaks. Inside the query, we have the table name we want to query steam_games with a limit parameter set to 100 and an ordey_by parameter to order all the games by the appid ascending order using the asc keyword. Inside the query, we’ll have to use the fields we want to fetch. Now hit Run to run the query. You should see a list of games in a JSON field in the response tab.

FetchGames API Response

Awesome! You now have your store catalogue with all the games and their prices. Let’s now build a UI to display all these games on a beautiful table.

  1. Navigate to Page1 and click on the plus icon next to the widgets.
  2. Now drag and drop a table widget onto the canvas; we'll see a new table with some pre-populated data.
  3. Next, we’ll have to open the table’s property pane to update the table data by clicking on the cog icon.
  4. Inside the property pane, we’ll find a Table Data property, and here we’ll have to bind the FetchGames API. Use the moustache syntax and add the below code snippet:
{
{FetchGames.data.data.steam_games}
}

This will pull data from the FetchGames API we’ve set up in the previous section.

Beautiful! We now have our catalogue displayed on a table. Next, we’ll create a form where we can add new games to the database.

Implementing Create Operation on Database

In this section, let’s look at how we can add new values to the database by building a simple UI. For this, let’s create a new Form on Appsmith that takes in all necessary fields to post in our game store database.

  1. Now, go back to the page, and drag and drop a form widget. Inside the form widget, we’ll add some Input widgets that accept necessary fields to add a new game to the database.
  2. We’ll also have to name the input fields so that we’ll have to reference them while posting values from the GraphQL query.
  3. Additionally, we’ll also have some text widgets that’ll look like labels for the Input widgets. Below is how we’ll have to name the text widgets and associated input widgets.

Name : nameInput

AppId : appIdInput

Average Play Time : avgPlayTimeInput

Genres : genresInput

Price : priceInput

You can simply do this by going to the input widget’s property pane and double-clicking on the existing widget name.

Below is a screenshot how the form should look like,

Game Post Form

Perfect, we now have our UI ready; let’s create a GraphQl API to post data into the Database.

  1. Create a new API by clicking on the plus icon next to the APIs, rename the API to InsertGame.
  2. Set the content-type andx-hasura-admin-secretheader to access the database on Hasura from the previousFetchGames` API.
  3. Now we’ll have to write a GraphQL query inside the request body, paste the below code snippet inside the Body:
{
    "query": {{JSON.stringify(`
    mutation ($object: steam_games_insert_input!) {
        insert_steam_games_one(object: $object) {
            appid
            name
            average_playtime
            price
            genres
        }
    }
    `)}},
    "variables": {
        "object": {{JSON.stringify({
            appid: appIdInput.text,
            name: nameInput.text,
            average_playtime: avgPlayTimeInput.text,
            price: priceInput.text,
            genres: genresInput.text,
        })}}
    }
}

Here, we have an object consisting of a query key that holds the GraphQL query and a variables key with all the variables that need to be posted to the database.

Now, in the query, we have a mutation that lets us modify the server-side data. Inside the mutation, we’ll send the object that references the data we will be querying. The insert_steam_games_one allows us to post one object to the database. Inside this query, we can add the attributes we need to post. Next, we’ve associated the variables to the object from the created UI input widgets. The .text on the input widget name helps us get the text written inside the input.

One last thing now that you’re API is ready, we’ll have to call the API when we submit values from the Form. Now go back to the form, open the property pane of the submit button and set the onclick action to call an API. You’ll now find the list of APIs we’ve created, select the InsertGame API. Below is the GIF explaining the same.

Awesome, now that we have our POST request ready, we can try adding a new game to the store using the form we’ve created.

Updating the Store Item on Database

In this section, let’s look at how we can update the database’s values by building a simple Modal. For this, let’s create a new column consisting of a button in the table; once the button is clicked, we should see the modal with existing values and modify it after submitting it.

  1. Open the Table Property Pane, and click on the Add New Column option.
  2. Now set the column type to Button and the label to Edit.
  3. We’ll have to open a new modal when the Edit button is clicked, hence under the actions, select Open a New Modal and create a new modal and name it to editItemModal.
  4. Now add necessary inputs widgets and text widgets to edit the store item.
  5. Name the input widgets and their default text to the following:

Name Input: nameEditInput

Default Text: {{Table1.selectedRow.name}}

Average Playtime Input : avgPlayTimeEditInput

Default Text: {{Table1.selectedRow.average_playtime}}

Genre Input : genresEditInput

Default Text: {{Table1.selectedRow.genres}}

Price Input: priceEditInput

Default Text: {{Table1.selectedRow.price}}

The default text will allow us to display the selected row data on the table.

Now, let’s create an API that performs update operations on the data.

  1. Create a new API by clicking on the plus icon next to the APIs, rename the API to EditGame.
  2. Set the content-type andx-hasura-admin-secretheader to access the database on Hasura from the previousFetchGames` API.
  3. Now we’ll have to write a GraphQL query inside the request body, paste the below code snippet inside the Body:
{
 "query": {{JSON.stringify(`
     mutation ($object: steam_games_set_input!) {
         update_steam_games(where: {appid: {_eq: "${Table1.selectedRow.appid}"} }, _set: $object) {
             affected_rows
         }
     }
 `)}},
 "variables": {
     "object": {{JSON.stringify({
         name: nameEditInput.text,
         average_playtime: avgPlayTimeEditInput.text,
         price: priceEditInput.text,
         genres: genresEditInput.text,
     })}}
 }
}

Here, we have an object consisting of a query key that holds the GraphQL query and a variables key with all the variables that need to be posted to the database.

Now, in the query, we have a mutation that lets us modify the server-side data. Inside the mutation, we’ll send the object that references the data we will be querying. The steam_games_set_input allows us to update an object in the database. Next, we’ve associated the variables to the object from the created UI input widgets from the Edit Modal. The .text on the input widget name helps us get the text written inside the input.

Now we’ll have to call the EditGame API after the modal is submitted, hence open the button’s property pane and add the following code snippet under the onclick action:

{{
    EditGame.run(() => {
        FetchGames.run();
        closeModal('EditModal');
    })
}}

This will update the item on the store and refresh the table, by re-running the FetchGames query.

Deleting the Store Item on Database

This section looks at how we can delete the database’s values by building a simple button on the table. For this, let’s create a new column consisting of a button in the table; if clicked, the selected item should be deleted.

Open the Table Property Pane, and click on the Add New Column option. Now set the column type to Button and the label to Delete.

Now let’s write a Delete API and link it to the created button.

  1. Create a new API by clicking on the plus icon next to the APIs, rename the API to DeleteGame.
  2. Set the content-type andx-hasura-admin-secretheader to access the database on Hasura from the previousFetchGames` API.
  3. Now we’ll have to write a GraphQL query inside the request body, paste the below code snippet inside the Body:
{
    "query": {{JSON.stringify(`
    mutation {
        delete_steam_games(where: {appid: {_eq: "${this.params.appid}"} }) {
            affected_rows
        }
    }
    `)}}
}

Now, in the query, we have a mutation that lets us modify the server-side data. The delete_steam_games allows us to delete an object in the database based on the selected appid. The appid from the table is referenced using this.params.appid.

Lastly, let’s call this API, after we click the delete button, go to the delete button property pane and select the Call an API action in the actions and select the DeleteGame API.

To refresh the table, after deleting an object, you can add custom JS in the button's onclick property:

{{
DeleteGame.run(() => FetchGames.run(), () => {}, {appid: currentRow.appid})
}}

This code snippet will first, delete the Game and then fetches the data again and updated it on the table.

Conclusion

You've seen how easy it is to build an application on Appsmith, specifically a catalogue dashboard. This guide covered how to create an application and connect it to a GraphQL, as well as how to create, read, update and delete data. You learned how to build interactive pages, work with widgets, and customize them for your purposes.

Building a dashboard with Appsmith is a fast way to build admin tools. Check it out if you’d like to save your developers time and get internal tools launched faster.

Cover Image: Photo by Charisse Kenion on Unsplash

Building an Internal Leave Management Dashboard using Google Sheets
17
June
2021
Tutorial

Building an Internal Leave Management Dashboard using Google Sheets

Building an Internal Leave Management Dashboard using Google Sheets
Vihar Kurama
0
 minutes ↗
#
startups
#
open-source
#
javascript
#
applications
#
web-development
Tutorial

Managing leaves is hard. But sudden issues can arise with anyone, anytime, and organisations must keep a clear record of all the employees leaves to maintain proper working with constant efficiency month-by-month. But there's no time to really set a system in place for accountability, and they were forced to use Google Sheets to maintain these.

But not everyone are comfortable using Google Sheets, anyone can make edit’s to it once given access, and the process of approving and rejecting leaves by founders or managers is out of context. Hence, we at Appsmith came up with an internal app for leave management. It’s minimal and super easy to use.

Here’s a quick sneak peek of what the app looks like. This is forkable, customisable and can be shared across organisations and teams. This tutorial will walk you through building this application with Appsmith and its Google Sheet Integration.

Appsmith is an open-source framework that lets developers build dashboards, workflows, and CRUD apps with only the necessary code. You can connect to any API or databases like MongoDB, PostgreSQL, or MYSQL and get access to multiple widgets, including charts, tables and forms, for building a UI fast.

Following are the table of contents:

  • Getting Started with Appsmith and Gsheets
  • Creating and listing all the leaves user has requested
  • Building an admin page to accept or reject the leaves
  • Listing down all the leaves that are approved and rejected
  • Conclusion

Let's dive in!

Getting Started with Appsmith and Gsheets

In this tutorial, we’ll be using the community edition of Appsmith Cloud to build the application. However, if you want to build this on a local instance and deploy it on your server, you could set up Appsmith’s on-prem version by following through with this documentation here.

Now let’s follow the below steps to setup Appsmith Cloud and GSheets:

  • Firstly, you will need to create a new account on Appsmith (it’s free)! If you’re already an existing user, you can sign in to your account.
  • Create a new application under any organisation by clicking on the Create New button, and you can rename the application by simply double-clicking on the existing name. In our case, let’s name this as Leave Management Dashboard.
  • Next, on the left navigation, we should see three options under your Page: Widget’s, APIs and DB Queries. Here, we can connect to data sources and build UI for these data sources using different widgets.
  • Now, let’s create a new API by clicking on the + button next to the APIs section. Next, choose Google Sheets and select New Datasource.
The Google Sheets integration on Appsmith helps us use Google Sheets as a backend or data source and perform multiple operations without writing any piece of code.
  • Rename the data source name to Leave Management Data Source and set the scope to Read and Write, and hit continue. It will redirect for authorising your Google account, choose the email you want to connect with and authorise it.

Awesome, we now have access to all your google sheets from your Google account. Now let’s create a new Google Sheet and add the necessary fields to build our leave management dashboard.

Here’s a mock Google Sheet that we used to build the application. Feel free to copy the same google sheet to your account and try it out, or you could create a new one instead.

Following are the Sheets and fields that we used to build the application:

Sheet One: Users

This Sheet has all the information about the company’s employees and their roles. Following are the fields:

NameEmailAvailable LeavesLeaves AppliedTotal Leaves

Sheet Two: Leave Requests

This Sheet has information about leave requests requested by the employees and their status if they are approved. Following are the fields:

NameStart DateEnd DateTotal DaysReasonOther ContactStatus

We’ll connect to this particular Google Sheet and build a UI to create and list our leave requests in the next section.

Creating and listing all the leaves user has requested

Firstly, let’s build a Google Sheet API using the GSheet integration Appsmith. To do this, click on the Leave Management Data Source you’ve created in the previous section and hit NEW API. We should see the following screenshot:

CleanShot 2021-06-17 at 20.48.03@2x.png

Follow the below steps to list down all our leave requests:

  1. Rename the API as getLeavesRequested and copy-paste the Google Sheets URL you're working on; in this case, we'll be using the duplicated mock-sheet. (Make sure you copy it to your account cause you'll need to authorise it to perform all the operations on it).
  2. Now set the following properties:
 Sheet Name: Leave Requests
 Table Heading Row Index: 1
 Query Format: Query Rows
 Row Offset: 0
 Row limit: 100

3.Lastly, hit the Run button on the top right. We should see the data that's inside the Leave Requests sheet. Now let's create a new table and display the data.

4. Click the + icon next to Widget's, drag and drop a new Table widget onto the canvas. We can configure the Table Widget by opening its property pane by clicking on the cog icon on the top right of the table widget.

5.Now, copy-paste the following JS code snippet into the Table Data property inside the table's property pane:

{{
getLeavesRequested.data.filter(
  (item) => (item.name = appsmith.user.name && item.Status === "REQUESTED")
);
}}

Awesome! Here, we call the getLeavesRequested API and use the filter method to filter the object's based on the user_name and the leave status. In my case, the name inside the GSheet is Iron Man, and I'm matching the same with my username on Appsmith. We can do that by using Appsmit's internal store. Here, appsmith.user.name returns the user name Iron Man in my case. Similarly, say your profile name is Bat Man. Then, you should filter all the leaves that are named after Bat Man in the Google Sheet.

Now let's add an option to create a new leave request and post it to the GSheets. Follow the below steps:

  • Firstly, drag and drop a new button widget on top of the table. Next, open the Button's property pane and set the onClick property to open a Modal. In the dropdown's we'll see an option to create a new Modal directly there; let's choose it.
  • Name the modal as leaveApplyModal, and its property pane sets the modal type to Form Modal.

Now drag and drop the following Widget's on the modal to create a form:

  1. Firstly a text widget and an input widget to display the name of who's applying for the leave. We'll add the label to the text widget as Name and rename the input widget as appliedBy. Cause we'll be referring to this when we're making an API call to the Google Sheet. Also, set the Default Text of appliedBy input widget to {{appsmith.user.name}} and disable property. So that Users can't create leaves on other's names. Cool right!
  2. Next, add another text and input widget to add a Leave Note and rename the input widget to leaveNote.
  3. Now, let's add two more text widgets and date-picker widgets to add the start date and end date. Set the default date's date picker widget to {{moment.now()}}. This will add today's date as a placeholder to the date picker widget.
  4. We'll also add one more field that'll show us the number of day's we're applying for leave. We'll set the default value of the input to

{{moment(DatePicker2.selectedDate).diff(DatePicker1.selectedDate, "days") +1}}

  1. Lastly, add a select widget that set's the alternate contact. Then, we'll pull the name's of our employees from the Users sheet. For now, let's set the options property to the following:
{{
getUserDetails.data.map((item) => {
  return {
    label: item.Name,
    value: item.Name,
  };
});
}}

Our form is now ready; let's create a new API from the Gsheets data source that lets us post values from this form to the Leave Requests Sheet:

Follow the below steps to list down all our leave requests:

  1. Click on the Leave Management Data Source and hit NEW API.
  2. Rename the API as requestLeave and copy-paste the Google Sheets URL you're working on.
  3. Now set the following properties:
 Method: Insert sheet row
 Sheet Name: Leave Requests
 Table Heading Row Index: 1

4.Add the following snippet in the Row Object property:

{
    "Name":"{{appliedBy.text}}",
    "Start Date":"{{DatePicker1.formattedDate}}",
    "End Date":"{{DatePicker2.formattedDate}}",
    "Total Days":"{{totalDays.text}}",
    "Reason":"{{leaveNote.text}}",
    "Other Contact":"{{alternateContact.selectedOptionValue}}",
    "Status": "REQUESTED"
    }

As you can see, we're setting the Status of requested leave as REQUESTED. We'll be changing this to APPROVED or REJECTED based on the actions from the leave manager admin page in the following sections.

Fantastic, now, when we add details on the form and submit it, we should see a new entry on the Gsheet. But we have one problem here, and the leaves on the table are not updated. So, for this, let's create a workflow that submits the data and refreshes the table data when the leave is requested.

Now open the modal and set the onClick property of the submit button to the following:

{{
requestLeave.run(
  () => {
    getLeavesRequested.run();
    closeModal("leaveApplyModal");
  },
  () => showAlert("Leave Status updated!")
);
}}

Here, we create a workflow that does the following:

  1. First, call the requestLeave API and submit the form.
  2. Run's the getLeavesRequested API and updates the data in the Table.
  3. Closes the leaveApplyModal Modal
  4. Finally, it shows an alert saying, "Leave Status updated!"

We'll also create a new API from the Sheets data source getUserDetails that fetches the names in the Users sheet. For this, just copy the getLeavesRequested API to the same page and change the Sheet Name to Users. This will get all the User's that are there in our org.

Building an admin page to accept or reject the leaves

In the previous section, we created a table and form to create and display all the leave requests. Now let’s build an admin dashboard where we could look at all the leaves requested by the team and accept or reject them. Let’s follow the below steps:

  1. Create a new Page by clicking on the + icon next to the pages option in the side navigation. Name it as Leave Manager Admin
  2. Now drag and drop a new Table widget onto the canvas.
  3. Now copy the getLeavesRequested from Page1 to the Leave Manager Admin page.
  4. Now add the following code snippet to the Table Data property:
{{
getLeavesRequested.data.filter(item=> item.Status==="REQUESTED")
}}

With this, we should be filtering all the row’s from the Leave Requests sheet that has leave status set to REQUESTED. Now let’s add two buttons that will allow us to update the status to Approved or rejected. Follow the below steps:

  1. Open the table’s property pane and click on the ADD A NEW COLUMN option. This will create a new column in your table. Now set the Column type to Button and set the label as APPROVED.
  2. Similarly, add one more column and set the label to Reject.
  3. To make it more intuitive, add the background colour to the buttons. In my case, I set the background colour of the Approve button to green and the background colour of the rejected colour to red.
  4. Awesome, let’s add an onClick property to both these buttons. For this, let’s create two new API’s that will handle the leave status.
  5. Now, create the new API from the GSheets data source and name it as approveLeaveStatus; the method will be Update sheet row as we update the google sheet.
  6. Set the Sheet Name as Leave Requests and Table Heading Row Index as 1
  7. Lastly, set the Row Object to the following:
{
    "rowIndex":{{Table1.selectedRow.rowIndex}},
    "Status":"APPROVED"
}

Similarly, create one more API named rejectLeaveStatus and set the Row Object as following to reject the leave:

{
    "rowIndex":{{Table1.selectedRow.rowIndex}},
    "Status":"APPROVED"
}

Let’s set the Approve to button onClick property to call the approveLeaveStatus API and the reject button to call the approveLeaveStatus. Additionally, onSubmit, you can call the getLeavesRequested API to refresh the Table data. Below is the GIF showing the same:

Listing down all the leaves that are approved and rejected

This section will notify the user if the leave he applied for is accepted or rejected. For this, we’ll be using the List Widget and display all the leaves that are approved and rejected. Follow the below steps:

  1. Now head back to Page1 and drag and drop a new List Widget onto the canvas.
  2. We already have the getLeavesRequested API that has all the data of the leaves. So all we need to do is filter them based on the username and the leave status.
  3. Now, let’s bind this API onto the list widget. First, open theList Widget’s property pane and add the following code snippet under the Items property:
{{
getLeavesRequested.data.filter(
  (item) =>
    (item.name =
      (appsmith.user.name && item.Status === "APPROVED") ||
      item.Status === "REJECTED")
);
}}

Next, drag and drop a few text widget’s and bind the list widget data using the currentItem property.

Leave Notes: {{currentItem.Reason}}
Leave Start Date: {{currentItem["Start Date"] }}
Leave End Date: {{currentItem["End Date"] }}
Leave Status: {{currentItem.Status}}

Finally, this is how the List widget should look like:

CleanShot 2021-06-17 at 08.51.41@2x.png

Finally, we've added some container's and added some additional information to make the app UI more beautiful. This is how the final look's like:

CleanShot 2021-06-17 at 20.59.19@2x.png

Conclusion

Deploy your application on the cloud and share it with others, and that's it. We're done!

You've seen how easy it is to build CRUD Apps and Workflows on Appsmith. Similarly, we can integrate the number of APIs and data sources and build customised dashboards.

If you like this tutorial, drop us a star on our GitHub repository here.