Building a Full-Page App on Freshdesk

We recently announced support for full-page apps on Freshdesk and now developers can take advantage of the additional real estate to build powerful features, such as reports or dashboards, for our customers.

This tutorial teaches you how to build a full-page app. The app renders a bar graph of ticket counts by status. Clicking the graph displays a list of tickets which are linked to the Ticket Details page.

To develop the app and test it, follow the steps below.

1. Setup

To begin with, you need to install Node.js and the Freshworks CLI. Also, create an app with the your_first_app template and test it.

2. Configure the Manifest

Next, change the app location in the manifest file to full_page_app and execute the fdk run command to view the default icon on the global sidebar; clicking the icon loads the app on the entire page.

manifest.json

3. Fetch the Ticket List

To fetch the ticket list through API, we need the API key and domain name which has to be whitelisted.

a. First, fetch the domain name of the current account using Global Data APIs.

app/app.js

To whitelist the domain, add the following in the manifest file.

manifest.json

b. Next, obtain the api_key as a secure installation parameter by adding it to the config/iparams.json file.

config/iparams.json

c. Use the Request API and Filter Tickets API to get the ticket list along with the total count. For this, loop through the built-in ticket status codes and make an API call for each, combine the responses using Promise.all, and then call the render function to display the list in the UI.

app/app.js

4. Render the Bar Chart

a. As built-in ticket status codes are used, write the markup for the chart with placeholders for the ticket count.

app/template.html

b. To render the bar chart, parse the response, do a simple ratio calculation, and render the bar chart by setting the height of the appropriate element. The value of the ticket count is also displayed.

app/app.js

c. You can use CSS to style and animate the chart.

Bar graph of the ticket counts based on the status.

5. Render the Ticket List

a. Add an empty div placeholder for the ticket list as it is dynamic and later loaded using JS.

app/template.html

b. Use theonClick() method to minimize the chart and render the ticket list as a <table>.

app/app.js

c. Use Navigate Interface API to redirect the ticket click to the Ticket Details page.

Ticket list with priority based on the status selected

6. Test the App

a. Navigate to your project folder and execute the fdk run command.

b. Append ?dev=true to any Freshdesk URL in the address bar and the icon for your full-page app should be displayed in the global sidebar. For more information, see how to test your apps.

All Done

To summarize, we used Global Data API, Request APIs, and Interface APIs, to build a full-page app. You can download the sample app here. Feel free to send us your ideas or technical glitches you had.
Happy hacking! 😊