How to update the text or data to a ticket when i click submit button in zendesk App
AnsweredHow to update the text or data to a ticket when i click submit button in zendesk App
i have a small app build using html and javascript, i want the text to get update in the ticket.( please note ticket needs to be updated not the comment box
-
Hey, Adil!
Here's an example code snippet of one possible approach using the ticket.save hook event:
client.on('ticket.save', async () => {
const ticketData = await client.get('ticket.id')
const ticketId = ticketData["ticket.id"];
const settings = {
url: `/api/v2/tickets/${ticketId}`,
type: "PUT",
contentType: "application/json",
data: JSON.stringify({
"ticket": {
"comment": {
"body": "Thanks for choosing Acme Jet Motors.",
"public": true
},
}
})
};
client.request(settings);
return true;
})
You will need to update the payload body depending on the text content you want saved as a comment on the ticket.
I hope this helps! Feel free to reach out with any questions.
Tipene
-
Thank you so much for the code, but i want the ticket to be updated when i click a button on my app. is that possible?
-
The code in iframe.html is this-
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>
<script type="text/javascript">
var client = ZAFClient.init();
client.invoke('resize', { width: '100%', height: '200px' });
this.QText = new Array(20); // The questions
// OK, set the questions
this.QText[0] = "What is the capital of Norway";
this.QText[1] = "What is the capital of Hungary";
this.QText[2] = "What is the capital of Cyprus";
this.QText[3] = "What is the capital of Libya";
this.QText[4] = "What is the capital of Kenya";
this.QText[5] = "What is the capital of Nigeria";
this.QText[6] = "What is the capital of Columbia";
this.QText[7] = "What is the capital of Barbados";
this.QText[8] = "What is the capital of Australia";
this.QText[9] = "What is the capital of Pakistan";
this.QText[10] = "What is the capital of Spain";
this.QText[11] = "What is the capital of England";
this.QText[12] = "What is the capital of Ireland";
this.QText[13] = "What is the capital of Sweden";
this.QText[14] = "What is the capital of Denmark";
this.QText[15] = "What is the capital of Poland";
this.QText[16] = "What is the capital of Italy";
this.QText[17] = "What is the capital of India";
this.QText[18] = "What is the capital of Canada";
this.QText[19] = "What is the capital of Portugal";
var arr = [];
var score = 0;
function showDiv() {
document.getElementById('start').style.display = "block";
while(arr.length < 3){
var r = Math.floor(Math.random() * 20);
if(arr.indexOf(r) === -1) arr.push(r);
}
document.getElementById('Q1').innerHTML = this.QText[arr[0]];
document.getElementById('Q2').innerHTML = this.QText[arr[1]];
document.getElementById('Q3').innerHTML = this.QText[arr[2]];
}
function showDivc2() {
document.getElementById('start2').style.display = "block";
client.invoke('comment.appendText', 'Correct');
client.invoke({ 'ticket.comment.appendText': [this.QText[arr[1]]], 'ticketFields:priority.hide': []});
document.getElementById("q1c").disabled = true;
document.getElementById("q1r").disabled = true;
score++;
}
function showDivr2() {
document.getElementById('start2').style.display = "block";
client.invoke('comment.appendText', 'Incorrect');
client.invoke({ 'ticket.comment.appendText': [this.QText[arr[1]]], 'ticketFields:priority.hide': []});
document.getElementById("q1c").disabled = true;
document.getElementById("q1r").disabled = true;
}
function showDivc3() {
document.getElementById('start3').style.display = "block";
client.invoke('comment.appendText', 'Correct');
client.invoke({ 'ticket.comment.appendText': [this.QText[arr[2]]], 'ticketFields:priority.hide': []});
document.getElementById("q2c").disabled = true;
document.getElementById("q2r").disabled = true;
score++;
}
function showDivcr3() {
document.getElementById('start3').style.display = "block";
client.invoke('comment.appendText', 'Incorrect');
client.invoke({ 'ticket.comment.appendText': [this.QText[arr[2]]], 'ticketFields:priority.hide': []});
document.getElementById("q2c").disabled = true;
document.getElementById("q2r").disabled = true;
}
function showDivc4() {
client.invoke('comment.appendText', 'Correct');
document.getElementById("q3c").disabled = true;
document.getElementById("q3r").disabled = true;
score++;
client.invoke( 'comment.appendText' , score);
}
function showDivr4() {
client.invoke('comment.appendText', 'Incorrect');
document.getElementById("q3c").disabled = true;
document.getElementById("q3r").disabled = true;
client.invoke( 'comment.appendText' , score);
}
</script></head>
<body><!--script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>
<script>
// Initialise Apps framework client. See also:
// https://developer.zendesk.com/apps/docs/developer-guide/getting_started
//var client = ZAFClient.init();
//client.invoke('resize', { width: '100%', height: '200px' });
//client.invoke('comment.appendText', 'My printer is Adil Test');
//client.set('ticket.subject', 'Test subject');
//client.set('comment.text', 'Test subject');
//client.invoke({ 'ticket.comment.appendText': ['My printer is on fire'], 'ticketFields:priority.hide': []});
//client.invoke('ticket.comment.appendText', 'Help!').then(function() { console.log('text has been appended');});
</script--><input id="s1" type="button" name="answer" value="Start" onclick="showDiv()" />
<div id="start" style="display:none;" class="answer_list" >
<label id="Q1">Question 1</label>
<br>
<input id="q1c" type="button" name="q1c" value="Correct" onclick="showDivc2()" />
<input id="q1r" type="button" name="q1r" value="Incorrect" onclick="showDivr2()" />
</div>
<div id="start2" style="display:none;" class="answer_list" >
<label id="Q2">Question 2</label>
<br>
<input id="q2c" type="button" name="q2c" value="Correct" onclick="showDivc3()" />
<input id="q2r" type="button" name="q2r" value="Incorrect" onclick="showDivr3()" />
</div>
<div id="start3" style="display:none;" class="answer_list" >
<label id="Q3">Question 3</label>
<br>
<input id="q3c" type="button" name="q3c" value="Correct" onclick="showDivc4()" />
<input id="q3r" type="button" name="q3r" value="Incorrect" onclick="showDivr4()" />
</div>
</body>
</html> -
Hi Adil,
Yes, you should be able to take the code from within the client.on method and add that to a function which you can attach to your button as an onclick event.
-
Thanks for the update, but i dont want the event to occur when i save or submit the ticket from zendesk, i just need it to update the ticket when i click the button from my APP, can u share a sample code for the button click please.
-
Hi @Tipene Hughes I tried to make it on click but is not working can u please help me on this, it would be a great help from you
-
Hi Adil,
Here's an example of how it could look using a button and onclick event:
<h2 class="u-semibold u-fs-xl">Hello, World!</h2>
<button onclick="updateComment()">Add comment</button>
<script src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"></script>
<script type="text/javascript">
var client = ZAFClient.init();
client.invoke("resize", { width: "100%", height: "200px" });
const updateComment = async () => {
const ticketData = await client.get("ticket.id");
const ticketId = ticketData["ticket.id"];
const settings = {
url: `/api/v2/tickets/${ticketId}`,
type: "PUT",
contentType: "application/json",
data: JSON.stringify({
ticket: {
comment: {
body: "Example comment",
public: true,
},
},
}),
};
client.request(settings);
};
</script>
You will need to add this code within the<body>tag in your iframe.html file.
I hope this helps!
Tipene
-
Thank you alot, you saved my day
Please sign in to leave a comment.
8 Comments