DEV Community: PJ Mantoss

How to Build an Issue Tracker with Appsmith

PJ Mantoss — Sat, 06 Feb 2021 10:07:42 +0000

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:

Finished version of the Issue Tracker Dashboard 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 to Sign Up for a free Appsmith account (if you already have one, feel free to skip this step)
Visit this link 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;

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:

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 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:

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:

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;

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, 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;

STEP 23: Rename the API to AirtablePOST and fill in the URL, Headers and body as shown in the images below;

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

Video Tutorial - Part 2

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

How can I make this React Project Pass some Tests?

PJ Mantoss — Wed, 25 Mar 2020 13:18:56 +0000

Hello everyone! I just concluded the first project in the ‘Front End Libraries course’ on FreeCodeCamp - The Random Quote Machine, using React JS. The app is working, but it’s failing almost all the tests in the test suite. How can I make it to pass all the tests?

The project - https://codesandbox.io/s/charming-hill-fvi4f

The Test Requirements - https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine

The test suite - https://codepen.io/freeCodeCamp/pen/MJjpwO

Thank you for your help.

Returning an object using reduce()

PJ Mantoss — Fri, 06 Mar 2020 09:33:12 +0000

Hi good people! I need help with some JavaScript challenge:

QUESTION: Write a function called getSongCountByArtist which takes in an array of songs and returns an object. The keys in the object should be artist names, and the values should be the number of songs by that artist in the original array.

My code Solution:

function getSongCountByArtist(arr){

return arr.reduce(function(acc,val){
    let artistSong = val.name;
    let songNo = artistSong.length;

    return acc[val.artist] + songNo;

}, {})

}

getSongCountByArtist(songs); //NaN

data source https://github.com/PJMantoss/iterators2/blob/master/data.js

PROBLEM EXPLANATION: The function is supposed to return an object with artist names as keys and number of songs by the artist as values. But On running getSongCountByArtist(songs) it returns NaN. How can I refactor my code to work? Thank you

Returning part of a string data using map()

PJ Mantoss — Fri, 28 Feb 2020 17:14:19 +0000

Hi good people! I'm trying to solve a JavaScript challenge, but my code is not working as expected
/*
PROBLEM: Write a function called getMainArtists which takes in an array of songs
and returns an array of the primary artists on the recordings.
If there's only one artist, that artist should be returned;
if there are featured artists, they should be ignored
(so only the artist to the left of "featuring" is kept.)
*/

//My Code Solution...

function getMainArtists(arr){
return arr.map(function(val){
if ((val.artist).includes("featuring")){
return null;
} else {
return val.artist;
}
})
}

getMainArtists(songs);

/*
The data I'm using can be found here https://github.com/PJMantoss/iterators2/blob/master/data.js
*/

PROBLEM STATEMENT: When I run getMainArtists(songs) it returns an array of artist names excluding names that contain 'featuring'. It's suppose to also return artist names that have 'featuring', but should only leave out all the words starting from 'featuring'. Any ideas how I can refactor my code to work? Thank you for your help

Need some Help on React and ChatKit

PJ Mantoss — Mon, 30 Sep 2019 10:04:06 +0000

Hi fellow devs! I need some help. I'm trying to create a chat app with React and ChatKit API. The app is not working as it should. I created 2 users and 6 rooms in Chatkit. I then entered and saved some messages(in the chatkit) but on running the app the messages don't show on the screen(MessageList). Also, after typing a message and hitting ENTER on the UI again nothing shows on the screen (MessageList area). Please how can I fix this?

Website... https://toss-chat.netlify.com/
Github Repo... https://github.com/PJMantoss/toss_chat

Thank you