App development tutorials are not relevant or... Need help

[Kateryna_Babenko]

Hi amazing team,

Recently, we began exploring and going through tutorials listed on the page - Tutorials: Freshworks Developer Platform Tutorials.

We attempted to do this for both Freshdesk and Freshservice, but encountered some issues.

1. When we tried to recreate and test this app How to build a Freshworks App - Say Hello for Freshdesk 👋, the button appeared in the ticket sidebar, but it was unresponsive and did not create a ticket. Yes, we completed all of the steps.

2. For Freshservice, none of the suggested apps appeared in the ticket sidebar.

So, I wonder what went wrong and why the suggested apps are not responsive or do not appear at all.

[Raviraj (Raviraj Subramanian)]

Hi @Kateryna_Babenko,

For the Freshdesk app, could you try some of the self-troubleshooting steps by referring to this troubleshooting 101 guide?
Follow these steps in troubleshooting:

1. You can see if the button click is triggering an event with a console log in the respective event handler function.
2. If the function is triggered, further operation can be checked step-by-step.
3. Check all the variables in each point and if there are any responses from the client.request.post() method.

For Freshservice app, could you check if you have the app location captured rightly by referring to the documentation? Please share the contents of the manifest.json file and your file structure so we can help you troubleshoot the issue.

[Kateryna_Babenko]

@Raviraj ,

Thank you for your reply!

Basically, as I mentioned, we go through the tutorial, and as you may know, the tutorial provides the correct pieces of code you just need to update the sample app with. However, it just does not work…

Please see the manifest file below:

{
 "platform-version": "2.3",
 "product": {
   "freshservice": {
     "location": {
       "ticket_sidebar": {
         "url": "index.html",
         "icon": "styles/images/icon.svg"
       }
     },
     "requests": {
       "createTicket": {}
     }
   }
 },
 "engines": {
   "node": "18.14.2",
   "fdk": "9.0.0"
 }
}

And for example app.js:

/**
* Show a notification toast with the given type and message
*
* @param {String} type - type of the notification
* @param {String} message - content to be shown in the notification
**/
function showNotification(type, message) {
 return client.interface.trigger("showNotify", {
   type: type,
   message: message
 });
}

/**
* Show a banner with the given text within the app
*
* @param {String} text - Text to be shown in the banner
*/
function showBanner(text) {
 document.getElementById("newTicketBanner").value = text;
}


/**
* Create a ticket to say hello
*
* @param {String} agentName - The name of the logged in agent
*/
async function createTicket(agentName) {
  const ticketDetails = JSON.stringify({
    email: 'puppycat@email.com',
    subject: 'Hello',
    priority: 1,
    description: `Hey ${agentName} 👋, First HELLO always inspires!`,
    status: 2
  });
  // Send request
  await client.request.invokeTemplate("createTicket", {
    body: ticketDetails
  });
}

/**
* To let Freshservice say hello through ticket
*
* @param {String} agentName - The name of the logged in agent
*/
async function sayHello(agentName) {
  try {
    // Try creating a ticket
    await createTicket(agentName);

    // If successful...
    console.info("Successfully created ticket in Freshservice");
    showNotification("success", "Successfully created a ticket to say hello");
    showBanner("Freshservice talks in tickets, check for new ticket.");
  } catch (error) {
    // If failed...
    console.error("Error: Failed to create a ticket");
    console.error(error);
    showNotification("danger", "Failed to create a ticket.");
  }
}

function onAppActivate() {
 client.data.get("loggedInUser").then(function (data) {
    document.getElementById("agentName").textContent = `Hello ${data.loggedInUser.contact.name},`;
    document.getElementById('btnSayHello').removeEventListener('fwClick');
    document.getElementById("btnSayHello").addEventListener("fwClick", function () {
      sayHello(data.loggedInUser.contact.name);
    });
  },
    function (error) {
      console.error("Error: Failed to fetch loggedInUser details");
      console.error(error);
    }
  );
}

document.onreadystatechange = function () {
 if (document.readyState === 'interactive') renderApp();

 function renderApp() {
    var onInit = app.initialized();

    onInit.then(function (_client) {
      window.client = _client;
      client.events.on("app.activated", onAppActivate);
    }).catch(function (error) {
      console.error('Error: Failed to initialise the app');
      console.error(error);
    });
  }
};