Zendesk Apps tutorial - Sending data to an external application Follow

Comments

6 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.

Please sign in to leave a comment.

Powered by Zendesk