Let's build the app

Let's build upon the template app created. Go back to your code editor with the common template app open.

Defining the personality of the app

Let's make the changes in one by one files of the app.

In the manifest.json file, replace the entire content of the file with the following code.

1{
2  "platform-version": "3.0",
3  "modules": {
4    "common": {},
5    "support_ticket": {
6      "location": {
7        "ticket_sidebar": {
8          "url": "index.html",
9          "icon": "styles/images/icon.svg"
10        }
11      }
12    }
13  }
14}

In this code,

  1. We have mentioned ticket_sidebar as the app location that we want to render the app in Freshdesk.
  • Freshworks products are modularised so that the apps can be built for multiple modules at the same time.
  • The respective module in Freshdesk is support_ticket. So we have mentioned the same.

Giving structure to the app with UI design

Let's design the app how it will look like.

In the app/index.html file, add the following code replacing the entire content of the file.

1<!DOCTYPE html>
2
3<html lang="en">
4  <head>
5    <title>Integration with GitHub and Asana using OAuth</title>
6    <meta charset="UTF-8" />
7    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
8    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
9    <link rel="stylesheet" type="text/css" href="styles/style.css" />
10    <!-- Crayons CSS to use Crayons components -->
11    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/css/crayons-min.css">
12
13    <!-- Crayons JavaScript to use Crayons components -->
14    <script type="module" src="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/dist/crayons/crayons.esm.js"></script>
15    <script nomodule src="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/dist/crayons/crayons.js"></script>
16
17    <!-- Mandatory: Freshworks developer platform scripts to render and working of the app -->
18    <script src="{{{appclient}}}"></script>
19  </head>
20  <body>
21    <div class="main">
22      <div class="fw-type-h4">Multi OAuth sample</div>
23
24      <!-- Two input fields and a submit button to get the title for the Asana task and GitHub issue to be created -->
25      <fw-input type="text" label="Asana Task Name" id="inputAsanaTitle" placeholder="Enter Asana task name" required></fw-input>
26      <fw-input type="text" label="GitHub Issue Title" id="inputGithubTitle" placeholder="Enter GitHub issue title" required></fw-input>
27      <fw-button id="btnSubmit" color="primary">Submit</fw-button>
28    </div>
29  </body>
30
31  <!-- Custom JavaScript code for the app functionality -->
32  <script defer src="scripts/app.js"></script>
33</html>

In this file, the app's bones and muscles are defined. This is where the app gets it's structure from and how it will look like.

  1. We have added the Crayons UI components in the header of the HTML file. It's a ready-made UI component library from Freshworks. It will help make an app easier to look like it's part of the Freshworks product and help attract the Freshworks customers.
  2. In the body of the HTML file, we have added two input elements and a button with Crayons UI components to create a GitHub issue and Asana task with an input in a single click.
  3. We have also imported a custom script file, scripts/app.js. It will help split the JavaScript code from the HTML file. All the functionalities can go to this app.js file.

Adding heart and brain to the app with JavaScript

In the app/scripts/app.js file, replace the entire content with the following code:

1init();
2
3async function init() {
4  window.client = await app.initialized();
5  client.events.on('app.activated', setupApp);
6}
7
8async function setupApp() {
9  const btnSubmit = document.getElementById('btnSubmit');
10  btnSubmit.addEventListener('click', async function () {
11    const asanaTitle = document.getElementById('inputAsanaTitle').value;
12    const githubTitle = document.getElementById('inputGithubTitle').value;
13
14    await createAsanaTaskAndGitHubIssue(asanaTitle, githubTitle);
15  });
16}
17
18/**
19 * 
20 * @param {String} asanaTitle - A title for the Asana task
21 * @param {String} githubTitle - A title for the GitHub issue
22 * @returns {Promise<String>}
23 */
24async function createAsanaTaskAndGitHubIssue(asanaTitle, githubTitle) {
25  console.log('asanaTitle', asanaTitle, 'githubTitle' githubTitle);
26}

In this app.js code,

  1. We have changed the function name called when the app is activated from renderText to setupApp. The template app was simplying rendering a text on the UI, we are going to do some basic setup for our app here. So, changed the name appropriately.
  2. We have added the click event listener for the submit button so that we can proceed to create an Asana task and a GitHub issue.
  3. We also get the values of the titles given for Asana task and GitHub issue.
  4. Finally, we call the createAsanaTaskAndGitHubIssue() function with the titles. But, it only prints a log to the browser console for now.

Let's test the app with these functionality and see if we can see the log.

Testing

Checkout the steps to test the app.

Steps to test the app
The app testing involves multiple steps to find the app within Freshworks products and reliably opening them.
  1. After running and seeing the app as per the testing steps, provide some text in both Asana task title and GitHub issue title and click on the submit button.
  2. Open Freshdesk ticket details page and find the app as mentioned in the testing steps as mentioned in the above-mentioned page.
  3. Open the browser console and find the log printed with the titles that you have added. If it doesn't work, it's fine. We can find and fix any issues in the further steps. Go ahead with the next steps.
Previous
What is OAuth?
Next
Configuration