Let us be clear on what content the UI should render.
Use the UI real-estate provided by the ticket sidebar placeholder to render a button. That makes a API request to Freshservice to create a ticket in the same Freshservice account.
Open the app/index.html file, You will see sample text, “Utilize this template code to build your App” within the <body> section, replace the content within the body section with the following code,
<body>
<div class="main">
<span class="text-with-margin" id="agentName"></span>
<fw-button class="text-with-margin" id="btnSayHello" color="primary"> Say
Hello
👋 </fw-button>
<p>to Freshservice!</p>
<fw-label class="text-with-margin" id="newTicketBanner" value=""
color="blue">
</fw-label>
</div>
</body>To view this user interface on the ticket details page of Freshservice, we have to configure the appropriate app location for this app in the manifest.
- Open the manifest.json file of the app.
- Change the module name from common to service_ticket. This is the module name of the ticket page in Freshservice product.
- Change the app location from full_page_app to ticket_sidebar. This is the app location that renders in the app in the sidebar in the right in the ticket details page of Freshservice.
- Remove the entire line of “support_ticket”: {} statement that makes the app to render in another module also. It’s not required for this tutorial.
Now run the app with the fdk run command and it will be visible on the ticket details page of Freshservice.
We have made a button visible on the app UI. Now, it has to create a ticket that says “Hello World”. How do we create a ticket and how will we get the information required to make an API to our Freshservice account. Let’s jump to the next section to add some configuration for the app.