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.
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.
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.
To whitelist the domain, add the following in the manifest file.
b. Next, obtain the
api_key as a secure installation parameter by adding it to the
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.
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.
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.
c. You can use CSS to style and animate the chart.
5. Render the Ticket List
a. Add an empty
div placeholder for the ticket list as it is dynamic and later loaded using JS.
b. Use the
onClick() method to minimize the chart and render the ticket list as a
c. Use Navigate Interface API to redirect the ticket click to the Ticket Details page.
6. Test the App
a. Navigate to your project folder and execute the
fdk run command.
?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.
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! 😊