How to Build an Issue Tracker with Appsmith
Tags: javascript, appsmith, react, issuetracker
Published: 2021-02-06 10:07:42

An Issue Tracker is a tool that is used by tech support teams in any organization to track and resolve complains and issues as raised by customers or users of a particular software product. Below are images of the finished tracker:
![Issue Tracker 1](https://files.fm/thumb_show.php?i=m3cjp2pmf "Issue Tracker Dashboard")
![Issue Tracker 1](https://files.fm/thumb_show.php?i=wars4kzef "Issue Tracker Dashboard")
Finished version of the [Issue Tracker Dashboard](https://app.appsmith.com/applications/6006e8c15b452f525458dd7c/pages/6006e8c15b452f525458dd7e) on Appsmith

**NOTE**: *If you prefer videos to reading, scroll down to the bottom for links to the video tutorial*

The Tracker will be created using **Appsmith** and **Airtable**. Appsmith is a JavaScript based development platform used for building internal tools swiftly while Airtable is a cloud database service.
## First Things First:
Before you start building, first do the following;
* Visit this [link](https://app.appsmith.com/user/signup?) to Sign Up for a free Appsmith account (if you already have one, feel free to skip this step)
* Visit this [link](https://airtable.com/signup) to Sign Up for the free version of an Airtable account
* Sign into your airtable account after confirming your e-mail and click on **Add a base** from the **My First Workspace** section of your account. Create a database that has the same structure like the one in the image below;
![Issue Tracker Airtable Database](https://files.fm/thumb_show.php?i=uezjkzgzx "Issue Tracker Database")

Now that we have done the necessary basics, let's start building our Issue Tracker tool.

**STEP 1:** Sign into your Appsmith account and click on **Create New** under your personal organization.

You will be re-directed to a new page for the new app

**STEP 2:** The new app is created with the default name **Untitled Application 1**. Rename it to **Issue Tracker Dashboard**.

The new app by default comes with new directories as seen in the image below:
![Appsmith Environment](https://files.fm/thumb_show.php?i=fngeuamdp "Appsmith Environment")

**Pages** is the container for all the pages of your app. **Page1** is the container holding the following entities;

**Widgets**, a container for all the widgets that will be used on **Page1**,

**APIs**, a container for all APIs that Page1 connects to,

**DB Queries**, a container for all databases and their queries used by Page1 to read and write data.

**The Issue Tracker** app will contain **2** pages. The **first page** will list all the **issues** that have been submitted and the **second page** will contain the add **issue form** for submitting **new issues**.

**STEP 3**: Rename **Page1** to **IssuesListPage**.

**STEP 4**: Set up the required API for connecting to the Airtable database which allows for connection using REST API. Go to [Airtable API](https://airtable.com/api) to view the API documentation on how to setup a GET request to the **Issues** table in the Issues Tracker database endpoint. In appsmith, Click on **+** to the right of **APIs**. Then click **Create new** (**IssuesListPage > APIs > Create new**).

**STEP 5**: Rename your API to **AirtableGET**, copy and paste the **URL** from Airtable API documentation and enter **Authorization** and **Bearer API_KEY** under **Headers** as shown in the image below:
![API GET Request](https://files.fm/thumb_show.php?i=jfk84zva4 "API GET Request")

**STEP 6**: Click on **+** to the right of **Widgets**, to add a **TABLE** widget (**IssuesListPage > Widgets**). Drag and drop the TABLE widget to the canvas on your right. This will create a new table.

**STEP 7**: Click on **Table1** in the left panel to open the property-pane of the table widget. In the property-pane, click on **Table1** to change its name to **IssuesTable**.

**STEP 8**: Select and delete all the content of Table Data in the table’s property-pane and write in the below JavaScript code:
`{{AirtableGET.data.records.map(item => item.fields)}}`

Write the code with the double braces.

This will link up your table to the API data pulled in from Airtable. 

If you have followed the steps correctly up to this point, you should be able to see the records from airtable displayed in the **IssuesTable** like in the image below:
![Issues Table](https://files.fm/thumb_show.php?i=bzucwb8mj "Issues Table")

**STEP 9**: Next, we add the second page of our application that will contain the add issue form. Click on **IssuesListPage** to minimize it.

**STEP 10**: Click on **+** beside **Pages** to add a new page to the app.

**STEP 11**: Rename the new page to **AddIssuesPage**.

**STEP 12**: Click on **+** beside **Widgets** to add a new widget.

**STEP 13**: Drag and Drop the **FORM** widget unto the canvas.

**STEP 14**: On the left panel click **Form1** to open its property-pane.

**STEP 15**: In the property-pane, rename **Form1** to **IssuesForm**, change Background Color from **white** to **#D9D9D9**

**STEP 16**: Click on **Form** at the top of the form and rename it to **Add Isssue**.

**STEP 17**: Drag and drop the **RICH TEXT EDITOR** widget unto the form and, inside its property-pane, rename it to **DescriptionInput**.  Drag and drop the **TEXT** widget above the **DescriptionInput** field and rename it to **Description**: 

**STEP 18**: Drag and drop the **DROPDOWN** widget unto the form (below **DescriptionInput**) and, inside its property-pane, rename it to **SeverityDropdown**.  Drag and drop the **TEXT** widget above **SeverityDropdown** field and rename it to **Severity**: 

**STEP 19**: Drag and drop the **INPUT** widget unto the form (below **SeverityDropdown**) and, inside its property-pane, rename it to **AssignToInput**.  Drag and drop the **TEXT** widget above **AssignToInput** field and rename it to **Assign To:**

**STEP 20**: Delete the **RESET** button and rename the text value of the **SUBMIT** button (in its property-pane) to **Add Issue**.

If you followed up to this stage without missing a step, you should have a form similar to the one in the image below;
![Issues Form](https://files.fm/thumb_show.php?i=235veer6r "Issues Form")

**STEP 21**: Next, Click on **+** beside **APIs** under the **AddIssuesPage** (**AddIssuesPage > APIs > Create new**) to set up a **POST** request to update the airtable database whenever the form is filled and submitted.

**STEP 22**: Go to [Airtable API](https://airtable.com/api), click the database name (**Issue Tracker**) and navigate to the **Issues Table** section to view the **API documentation** on how to make a POST request to the **Issues endpoint**;
![POST Request](https://files.fm/thumb_show.php?i=brsysahby "POST Request")

**STEP 23**: Rename the **API** to **AirtablePOST** and fill in the **URL**, **Headers and body** as shown in the images below;
![POST Request](https://files.fm/thumb_show.php?i=46wauw5jw "POST Request")
![POST Request body](https://files.fm/thumb_show.php?i=fcmnba99v "POST Request body")

**STEP 24**: On the **AddIssuesForm** open the property-pane of the **Add Issue** button and do the following for each of the fields;

* Click inside the **onClick** field, click **Call An API** and click **AirtablePOST**
 
* Click inside **onSuccess** field (**onSuccess > Show Message**) and type **Success! Issue was Added** in the message field

* Click inside **onError** field (**onError > Show Message**) and type **Fail! Issue was not Added** in the message field

What we’ve done above is to bind the form to the **AirtablePOST** so that each time the fields in **AddIssuesForm** are filled and submitted (by clicking the **Add Issue button**), the **AirtablePOST** runs, creating and setting a new record on the **airtable** database. Then we added **success and error messages** to alert us if the issue was added successfully or not.

Now the **Issue Tracker tool** is functional. Deploy it and try adding an issue. Then open the **IssuesListPage** to verify it was added. Also open the **Airtable** database to confirm the record has been added there too.

[Video Tutorial - Part 1](https://www.hippovideo.io/video/play/cNCvqnsXnu8_enu8XoBv3yt-iN4B6ZObFGIXjMzJtIQ?org_tok=8UBh-shvQ3u95GXcAiiZAw&utm_source=hv-campaigns&hreferer=private&_=1612604686841&
Watch Video)

[Video Tutorial - Part 2](https://www.hippovideo.io/video/play/uaMp2ArBWUqM3vinWulDscmbrqBQFikTXu46DXrJgiA?org_tok=8UBh-shvQ3u95GXcAiiZAw&utm_source=hv-campaigns&hreferer=private&_=1612604947763&
Watch Video)

Thank you for learning with me. If you have any questions, feel free to ask in the comments section.