I’m having issues developing my first app.
I’m trying to get it to pull data from the ticket and display it in the side bar.
I will use that information along with a form to submit billing to stripe as a final goal of the app.
Right now it is not displaying the information in the ticket side pane.
Here is the code:
manifest.json:
{
"platform-version": "2.3",
"product": {
"freshdesk": {
"location": {
"ticket_sidebar": {
"url": "index.html",
"icon": "styles/images/icon.svg"
}
}
}
},
"engines": {
"node": "18.16.0",
"fdk": "9.0.1"
}
}
app.js:
init();
async function init() {
client = await app.initialized();
client.events.on('app.activated', renderText);
}
async function renderText() {
const ticketIdElement = document.getElementById('displayTicketId');
const technicianNameElement = document.getElementById('displayTechnicianName');
const contactNameElement = document.getElementById('displayContactName');
const companyNameElement = document.getElementById('displayInfo');
// Get ticket data
const ticketData = await client.data.get('ticket');
const { ticket: { id: ticketId, assignee_id: assigneeId } } = ticketData;
// Get contact data
const contactData = await client.data.get('contact');
const { contact: { name, company_id: companyId } } = contactData;
// Get assignee (technician) data
const assigneeData = await client.data.get(`user:${assigneeId}`);
const { user: { name: technicianName } } = assigneeData;
// Get company data
const companyData = await client.data.get(`company:${companyId}`);
const { company: { name: companyName } } = companyData;
ticketIdElement.innerHTML = `Ticket ID: ${ticketId}`;
technicianNameElement.innerHTML = `Technician: ${technicianName}`;
contactNameElement.innerHTML = `Contact: ${name}`;
companyNameElement.innerHTML = `Company: ${companyName}`;
}
Index.html:
<html lang="en">
<head>
<title>Time Entry</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script async src="{{{appclient}}}"></script>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
</head>
<body>
<div class="main">
<p id="displayInfo"></p>
<p id="displayTicketId"></p>
<p id="displayTechnicianName"></p>
<p id="displayContactName"></p>
</div>
</body>
<script defer src="scripts/app.js"></script>
<script async type="module" src="https://unpkg.com/@freshworks/crayons@3/dist/crayons/crayons.esm.js"></script>
<script async nomodule src="https://unpkg.com/@freshworks/crayons@3/dist/crayons/crayons.js"></script>
</html>```