Zendesk Apps tutorial - Sending data to an external application Follow

Comments

10 comments

  • Avatar
    David Bishop

    I built this app and added it to an application that got data from an external application (created based on the instructions found here: https://help.zendesk.com/hc/en-us/articles/229489168-Zendesk-Apps-tutorial-Getting-data-from-an-external-application).  It works beautifully on my local.  After following the security steps and uploading the app I get 401 errors when I try to view or create tasks.

  • Avatar
    Charles Nadeau

    Hi David,


    401s are authorization errors. In step 3 of the "Secure sensitive information" section above, I just noticed a problem with the example. The step says to add secure: true in the settings object, but it's not included in the example. It should read:


    var settings = {
    
    url: 'https://app.asana.com/api/1.0/tasks',
    headers: {"Authorization": "Bearer {{setting.token}}"},
    secure: true,
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify(task)
    };

    Could this be the problem?


    Note: I updated the example in the step. 

  • Avatar
    David Bishop

    Hi, yes that was actually the problem.  Thank you very much for your help.

  • Avatar
    Mesut Tekin

    Hello,


    First of all, thank you very much for this article. I have a problem with form submit. I have developed an app as you instructed. But I need to write requester info to the iframe up the form. To do this, I used client object to get data, and I passed the data to showForm function. The problem is that when I added below code, button's click event didn't trigger, instead the iframe reloaded and  the first line of main.js (var client = ZAFClient.init();) was executed, and it gave an error (client  object didn't load). If I remove below code, It works perfectly. Do you know what the problem could be? Thank you very much.



    client.get('ticket.requester').then(function (data) {
    showForm(data)
    });

  • Avatar
    Charles Nadeau

    Working with promises gets a little tricky. I got your use case to work with the following steps.





      1. In the self-invoking function at the top of the js file, replace showForm(); with your snippet if you haven't done it already:


        $(function() {
        
        var client = ZAFClient.init();
        client.invoke('resize', { width: '100%', height: '400px' });

        client.get('ticket.requester').then(function (data) {
        showForm(data)
        });

        $("#add-btn").click(function(event) {
        ...
        });

        });




      2. Move the entire $("#add-btn") event handler into the get() function's success block, after showForm(data):


        client.get('ticket.requester').then(function (data) {
        
        showForm(data);
        $("#add-btn").click(function(event) {
        event.preventDefault();
        if ($("#name").val().length == 0) {
        client.invoke('notify', 'Name can\'t be blank.', 'error');
        } else { // good to go
        var task = {
        data: {
        name: $("#name").val(),
        notes: $("#notes").val(),
        projects: [parseInt($("#project-id").val())]
        }
        };
        sendTaskData(task, client);
        }
        });

        });



      3. Update the showForm() function definition to accept the requester data, then pass it to the "#add_task-hdbs" template (edits in bold):


        function showForm(data) {
        
        var requester = data['ticket.requester'];
        var source = $("#add_task-hdbs").html();
        var template = Handlebars.compile(source);
        var html = template(requester);
        $("#content").html(html);
        }



      4. Finally, use a template expression in the form to display the requester data. Example:


        Notes for {{name}}




     


     

  • Avatar
    Mesut Tekin

    Thank you very much for your response. It works fine.

  • Avatar
    David Bishop

    Hi, I have another question.  Is it possible to attach the contents of the Zendesk Ticket to the newly created Asana task automatically?  I know the placeholder is {{ticket.comments_formatted}} but I can not figure out how to get those contents from the ticket to the Asana task.

  • Avatar
    Bryan Flynn

    Hi David. This article is more about how to integrate with a third-party, using Asana as the example. If there are others with Asana expertise, please jump in.

    In the meantime I would check out Asana's API documentation to see if their API can get you what you're looking for. Basically if you can pull it out of Zendesk, you can push it into another service if their API supports it.

  • Avatar
    David Bishop

    Hi Bryan,

    Thank you for the response but it was not exactly what I was looking for.  I might have not worded my question correctly, hence the confusion.  I know how to put stuff into the description part of an asana task, what I don't know and can't figure out is how to get the contents of a Zendesk ticket (all the comments) to be automatically included in the newly created Asana task without copying and pasting them.  I have tried this: client.get('ticket.comments').then(function(data) { ... } and while it does show me the contents of the Zendesk ticket, it does not put it in an easily readable format and I have been unable to figure out a way to save the result into a variable that can then be appended to the information being sent to Asana.

    Any suggestions that you or others might have would be greatly appreciated.

  • Avatar
    Joseph May

    Hi David-

    Sounds like you are looking for the JSON.parse() method. There are a lot of resources for working with JSON; I recommend starting with MDN. Additionally I suggest reading up on arrays, if needed, as ticket.comments returns values within nested arrays.

Please sign in to leave a comment.

Powered by Zendesk