Skip to content

Instantly share code, notes, and snippets.

@bryan-flynn-zd

bryan-flynn-zd/example_handlebar.html

Last active August 29, 2019 14:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bryan-flynn-zd/845539390ce7edeb9c2ee9387db52284 to your computer and use it in GitHub Desktop.
Save bryan-flynn-zd/845539390ce7edeb9c2ee9387db52284 to your computer and use it in GitHub Desktop.
Download ZIP
Example of getting more than one Zendesk ticket object and populating Handlebar templates with that information
Raw
example_handlebar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
</head>
<body>
<h2>Test Populating Tables</h2>
<button onClick="populateTables()">Populate Tables</button>
<script src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
<div id="content"></div>
<script>
let client = ZAFClient.init();
client.invoke('resize', { width: '100%', height: '200px' });
function populateTables() {
return client.get('ticket.requester').then((requesterResult) => {
console.log("requester:", requesterResult)
return client.get('currentUser').then((agentResult) => {
console.log("agentResult:", agentResult)
let userinfo_data = {
'requesterID': `${requesterResult["ticket.requester"].id}`,
'requesterName': `${requesterResult["ticket.requester"].name}`,
'requesterEmail': `${requesterResult["ticket.requester"].email}`,
'agentID': `${agentResult["currentUser"].id}`,
'agentName': `${agentResult["currentUser"].name}`,
'agentEmail': `${agentResult["currentUser"].email}`
};
let source = $("#userinfo-template").html();
let template = Handlebars.compile(source);
let html = template(userinfo_data);
$("#content").html(html);
})
})
}
</script>
<script id="userinfo-template" type="text/x-handlebars-template">
</br>
Requester:
</br>
<table style="width:100%">
<tr>
<td>Rqstr Name</td>
<td>{{requesterName}}</td>
</tr>
<tr>
<td>Rqstr ID</td>
<td>{{requesterID}}</td>
</tr>
<tr>
<td>Rqstr email</td>
<td>{{requesterEmail}}</td>
</tr>
</table>
</br>
Agent:
</br>
<table style="width:100%">
<tr>
<td>Agent ID</td>
<td>{{agentID}}</td>
</tr>
<tr>
<td>Agent Name</td>
<td>{{agentName}}</td>
</tr>
<tr>
<td>Agent email</td>
<td>{{agentEmail}}</td>
</tr>
</table>
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment