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
    image avatar

    Tipene Hughes

    Zendesk Developer Advocacy

    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

    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

    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

    Tipene Hughes

    Zendesk Developer Advocacy

    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

    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

    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

    Tipene Hughes

    Zendesk Developer Advocacy

    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

    Thank you alot, you saved my day

    0

    Please sign in to leave a comment.

    Didn't find what you're looking for?

    New post