Modal contents are not populating when two (2) Zendesk tickets are open simultaneously

3 댓글

  • Christopher Kennedy
    Zendesk Developer Advocacy
    Hi Benessa,
     
    Which API's are you fetching the modal data from?  Are you seeing a response from the endpoint on cases where the modal has no data?
     
    Also, when are you fetching the modal data?  Before the click and creation of the modal?  On click/creation?  From the modal itself after creation?
    0
  • Benessa Dumol

    Hi Christopher Kennedy, thank you for your response.

    To answer your questions, it's a custom API that fetches the data of the Ivanti incident from Ivanti (third-party provider) and yes, I am seeing the response from calling the API endpoint. The API endpoint is called on the load of the ticket/app so the data are already in the div even before the modal is called.

    Below are parts of the codes that are used for the modal:

    1. Function to populate div with the data from the API response (on load of the ticket/app)

    //
    // Show Ivanti incident Task/s
    //
    function showIvantiIncidentTasks(data, ivantiIncidentId) {
    // Retrieve Ivanti incident task/s details
      var tasks;

    if (data.tasks !== null ) {
      tasks = Object.values(data.tasks);
      }

      console.log("  Ivanti Incident tasks OK");

    // Display Ivanti incident task/s
    var source = $('#view-ivanti-incident-tasks').html();
    var template = Handlebars.compile(source);
      var newHTML = template({tasks});

    $('#tasks-' + ivantiIncidentId).append(newHTML);
    }

    2. The div that contains the data

    <script id="view-ivanti-incident-tasks" type="text/x-handlebars-template">
      <p class="data">Ivanti Incident Tasks:</p>
      <br/>
      {{#if tasks}}
          {{#each tasks}}
              <div class="task-details">
                  <p>Status: <span class="data">{{status}}</span></p>
                  <p>Created on: <span class="data dateTime">{{createdDateTime}}</span></p>
                  <p>Owner Team: <span class="data">{{ownerTeam}}</span></p>
                  <p>Owner: <span class="data">{{owner}}</span></p>
                  <p>Subject: <span class="data">{{subject}}</span></p>
                  <p>Details: <span class="data">{{{details}}}</span></p>
              </div>
          {{/each}}
      {{else}}
          <p>No tasks available</p>
      {{/if}}
    </script>

    3. The button that is used to call the modal

    <a href="#" id="viewTasks" onclick="viewTasks('{{incidentId}}')">View Tasks</a>

    4. The function that is called by the button

    //
    // Display Ivanti Incident Tasks
    //
    function viewTasks(incidentId) {
    convertDateTime();
    var html = $("#tasks-" + incidentId).html();
    client.invoke('instances.create', {
      location: 'modal',
      url: 'assets/modal.html',
      size: { // optional
        width: '80vw',
        height: '70vh'
      }
    }).then(function(modalContext) {
      // The modal is on the screen now!
      var modalClient = client.instance(modalContext['instances.create'][0].instanceGuid);
      client.on('modalReady', function setHtml(){
        modalClient.trigger('drawData', html);
        client.off("modalReady", setHtml);
      });
      modalClient.on('modal.close', function() {
      // The modal has been closed.
        console.log('The modal has been closed');
      });
    });
    };

    5. Below are the contents of modal.html

    <!DOCTYPE html>
    <html lang="en-gb" dir="ltr">
      <head>
          <meta charset="utf-8">
          <title>Technology Incident Zendesk App</title>
          <link href="//cdn.jsdelivr.net/combine/npm/@zendeskgarden/css-bedrock,npm/@zendeskgarden/css-grid,npm/@zendeskgarden/css-buttons,npm/@zendeskgarden/css-forms,npm/@zendeskgarden/css-utilities,npm/@zendeskgarden/css-callouts" rel="stylesheet" />
          <link href="main.css" rel="stylesheet">
          <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script>
          <script type="text/javascript" src="https://assets.zendesk.com/apps/sdk/2.0/zaf_sdk.js"></script>
          <script src="modal.js" defer></script>
      </head>

      <body>
          <div id="view_container">
          </div>

            <script>
              var client = ZAFClient.init();
              client.on('app.registered', function(){
                  var ticketClientPromise = client.get('instances').then(function(instancesData) {
                      var instances = instancesData.instances;
                      for (var instanceGuid in instances) {
                          if (instances[instanceGuid].location === 'ticket_sidebar') {
                              return client.instance(instanceGuid);
                          }
                      }
                  });
                  ticketClientPromise.then(function(ticketClient) {
                      //send a message back to the parent client to let it know the modal is now ready for events to be triggered
                      ticketClient.trigger('modalReady');
                  });
              });
              client.on('drawData', insertModalHtml);
              function insertModalHtml(data){
                  $("#view_container").html(data);
              };
          </script>
      </body>
    </html>

     

    Let me know if you need anything to better understand my issue. Looking forward to your reply.

    Thank you,
    Benessa

    0
  • Christopher Kennedy
    Zendesk Developer Advocacy
    Hi Benessa,
     
    I see you have a ticket open about this.  I've taken over the ticket to work directly with you there.
    1

댓글을 남기려면 로그인하세요.

Zendesk 제공