How to update the text or data to a ticket when i click submit button in zendesk App

Answered
image avatar

adil whizmo

Posted Apr 09, 2022

How 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

0

8

8 comments

Date
    Newest
      image avatar

      adil whizmo

      Thank you alot, you saved my day

      0

      image avatar

      Tipene Hughes

      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

      0

      image avatar

      adil whizmo

      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

      0

      image avatar

      adil whizmo

      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.

      0

      image avatar

      Tipene Hughes

      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. 
       
       

      0

      image avatar

      adil whizmo

      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>

      0

      image avatar

      adil whizmo

      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?

      0

      image avatar

      Tipene Hughes

      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

      1

      Sign in to leave a comment.

      Didn't find what you're looking for?

      New post