Handling custom fields using handlebars template

7 Comments

  • Sebastiaan Wijchers
    Comment actions Permalink

    Hello Roman,

    I'm not sure what you're after. Could you describe your scenario a little more? I'm quite sure I can help you out!

    With kind regards,

    Sebastiaan
    Sparkly ⭐

    0
  • Roman Belousov
    Comment actions Permalink

    Hey Sebastian, thank you for getting back to me.

    I'm following this tutorial, pt 3:

    https://develop.zendesk.com/hc/en-us/articles/360001074828

     

    The issue I'm having is that I need to return a custom field from ShowInfo() in main.js to the handlebars handle in the content section of iframe.html.

    I've tried this in main.js:

    function showInfo(data) {
      var requester_data = {
        'job_tech': data.ticket.custom_fields[123455667890]
    };

    ...which in iframe.html appears as:

    ...
    <td> class="data">{{job_tech}}</td>



    but that returns nothing. custom_fields is meant to be an array, so I am not sure how or where to handle it (due to being 2 days new to this whole thing)

    0
  • Sebastiaan Wijchers
    Comment actions Permalink

    Hello Roman,

    When I have a brief look at the tutorial, it seems those values are static:

    function showInfo() {
      var requester_data = {
        'name': 'Jane Doe',
        'tags': ['tag1', 'tag2'],
        'created_at': 'November 20, 2014',
        'last_login_at': 'June 27, 2016'
      };
    
      var source = $("#requester-template").html();
      var template = Handlebars.compile(source);
      var html = template(requester_data);
      $("#content").html(html);
    }

    So you'll have to retrieve the value of your custom field first, something like this:

    function showInfo() {

    client.get('ticket.customField:custom_field_1234567890').then(function(data) {
    var requester_data = { 'name': 'Jane Doe', 'tags': ['tag1', 'tag2'], 'created_at': 'November 20, 2014', 'last_login_at': 'June 27, 2016',
      'job_tech': data['ticket.customField:custom_field_1234567890'] }; var source = $("#requester-template").html(); var template = Handlebars.compile(source); var html = template(requester_data); $("#content").html(html);

    });
    }

    With kind regards,

    Sebastiaan
    Sparkly ⭐

    0
  • Roman Belousov
    Comment actions Permalink

    Sebastian, thank you, but that doesn't work. The tutorial has static fields at some stage, but mine are dynamic. here's the full code:


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

    client.get('ticket.id').then(
    function(data) {
    var ticket_id = data['ticket.id'];
    requestTicketInfo(client, ticket_id);
    }
    );

    });


    function requestUserInfo(client, id) {
    var settings = {
    url: '/api/v2/users/' + id + '.json',
    type:'GET',
    dataType: 'json',
    };

    client.request(settings).then(
    function(data) {
    showInfo(data);
    },
    function(response) {
    showError(response);
    }
    );
    }

    function requestTicketInfo(client, id) {
    var settings = {
    url: '/api/v2/tickets/' + id + '.json',
    type:'GET',
    dataType: 'json',
    };

    client.request(settings).then(
    function(data) {
    showInfo(data);
    },
    function(response) {
    showError(response);
    }
    );
    }


    function showInfo(data) {
    var requester_data = {
    'job_type': data.ticket.type,
    'job_status': data.ticket.status,
    'booking_date': formatDate(data.ticket.created_at),
    'company_id': data.ticket.organisation_id,
    'state': 'N/A',
    'job_tech': data.ticket.custom_fields[360000266676],
    'job_po': 'N/A'
    };

    var source = $("#requester-template").html();
    var template = Handlebars.compile(source);
    var html = template(requester_data);
    $("#content").html(html);
    }

    function showError(response) {
    var error_data = {
    'status': response.status,
    'statusText': response.statusText
    };
    var source = $("#error-template").html();
    var template = Handlebars.compile(source);
    var html = template(error_data);
    $("#content").html(html);
    }


    function formatDate(date) {
    var cdate = new Date(date);
    var options = {
    year: "numeric",
    month: "short",
    day: "numeric"
    };
    date = cdate.toLocaleDateString("en-us", options);
    return date;
    }

    0
  • Sebastiaan Wijchers
    Comment actions Permalink

    Hello Roman,

    My solution should work, but it used the ZAF 'data API', like you are using for retrieving the ticket ID:
    https://developer.zendesk.com/apps/docs/support-api/ticket_sidebar#ticket-object

    I see you're using the REST API to retrieve the full ticket data instead. That's okay, but keep rate limits in mind. The custom fields of a ticket are returned like this (array of objects):

      "custom_fields": [
        {
          "id":    27642,
          "value": "745"
        },
        {
          "id":    27648,
          "value": "yes"
        }
      ],

    So instead of:

    data.ticket.custom_fields[360000266676]

    You could do something like:

    data.ticket.custom_fields.find(field => field.id === 360000266676).value

    With kind regards,

    Sebastiaan
    Sparkly ⭐

    0
  • Roman Belousov
    Comment actions Permalink

    Hey Sebastian, thank you for that, that would have been more conscice, but I figuired out a solution by creating a GetVal(data,field) funciton like so:

    function getVal(data, field) {
      for(var i = 0; i < data.length; i++)
        {
          var obj = data[i];
          if(obj.id == field) { return obj.value }
       }
    }

    To use it, I call it from the SowInfo(data) function:

    function showInfo(data) {
      var requester_data = {
         ...
         'state': getVal(data.ticket.custom_fields,1234567890),
        ...
      }
    };

    0
  • Roman Belousov
    Comment actions Permalink

    Sebastian, my next challenge is to get an HTML button to take data from an input field on the app and POST it to the ticket. I've tried this to test it:

    in <html>:

    <div class="popup" onclick="myFunction()">Click me!
    <span class="popuptext" id="myPopup">Popup text...</span>
    </div>

    <script>
    // When the user clicks on <div>, open the popup
    function myFunction() {
    var popup = document.getElementById("myPopup");
    popup.classList.toggle("show");
    }
    </script>

    + whole bunch of CSS from the tutorial.

    No popup. I'm guessing popups are not allowed like this, 

    but what I really need is POST some data from input fields elsewhere on the form to fields on the ticket. I can't find any tutorials on that, so I'm asking here.

    Also, how do I make my code appear in the text box like you do?

    0

Please sign in to leave a comment.

Powered by Zendesk