Zendesk Apps tutorial - Sending data to an external application Follow

Comments

5 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 (Edited )

    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 (Edited )

    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 (Edited )

    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}}

     

     

Please sign in to leave a comment.

Powered by Zendesk