Requiring a ticket attachment if a particular dropdown option is selected

14 Kommentare

  • Karen D Snyder
    Aktionen für Kommentare Permalink

    Sorry, I need to make a change in what I wrote above. When you create the custom field, you should not select the option Required to solve a ticket.

    0
  • Brett - Community Manager
    Aktionen für Kommentare Permalink

    Thanks for sharing this Karen :)

    This is awesome!

    I've also updated your post to remove the Required to solve ticket option.

    Cheers!

    0
  • Jennifer Rowe
    Aktionen für Kommentare Permalink

    I love this tip! Thanks so much for sharing it, Karen.

    0
  • Kevin Witt
    Aktionen für Kommentare Permalink

    Great article, but I am having problems with the js.  I get the following error in console "startObserveMutations is not defined".

    Am I missing something?

    0
  • Trapta
    Aktionen für Kommentare Permalink

    Hi Kevin Witt,

    Can you share a bit more detail here? Like the screen shot of the code of the URL of you HC?

    Thanks

    0
  • Kevin Witt
    Aktionen für Kommentare Permalink

    Sure, a configured as per the article (Except I didn't hide the checkbox at this point so I can see what is happening).

    I have a drop-down that determines if the attachment is required, with the options "Attachment not required" and "Attachment required".

    The error I see in the console is:

    The HC is in my sandbox: https://unifydemo1508140682.zendesk.com

    The form is called "Attachment Test".

    My JS is as follows:

    // Callback function to execute when mutations in form attachments or dropdown are observed:
    // clear or select Attachment checkbox according to dropdown
    var mutationObservedForm = function (mutationsList) {
    mutationsList.forEach(function (mutation) {
    if (mutation.type == 'childList') {
    setFormAttachmentCheckbox();
    }
    });
    };

    // Define some variables for requiring form attachments
    var attachmentCheckboxField = 'request_custom_fields_360003651537';
    var attachmentCheckboxId = '#' + attachmentCheckboxField;
    var attachmentErrorNotification = 'Report must be attached';
    var formDropdownClass = '.request_custom_fields_360003651357';
    var formObserveMutationOptions = { childList: true, subtree: true };

    // Clear or select checkbox according to dropdown and attachments:
    // Set Attachment checkbox if no attachments required, or if attachments are required and at least one is uploaded, otherwise clear it
    function setFormAttachmentCheckbox() {
    if (isFormAttachmentRequired()) {
    if ($('#request-attachments-pool .upload-item').length) {
    selectCheckbox(attachmentCheckboxId);
    }
    else {
    clearCheckbox(attachmentCheckboxId);
    }
    }
    else {
    selectCheckbox(attachmentCheckboxId);
    }
    }

    // Return true if dropdown option 'ABCD' is selected
    function isFormAttachmentRequired() {
    return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') &&
    $(formDropdownClass + ' a.nesty-input').text() === 'Attachment required';
    }

    // Select checkbox
    function selectCheckbox(eltselector) {
    $(eltselector).prop('checked', true);
    }

    // Clear checkbox
    function clearCheckbox(eltselector) {
    $(eltselector).prop('checked', false);
    }

    // If attachment checkbox field exists, select it,
    // and watch for changes to attachments and dropdown
    if ($(attachmentCheckboxId).length) {
    selectCheckbox(attachmentCheckboxId);
    startObserveMutations('#request-attachments-pool', formObserveMutationOptions, mutationObservedForm);
    startObserveMutations(formDropdownClass, formObserveMutationOptions, mutationObservedForm);
    }

    // Adjust attachment error notification
    var attachmentErrorElt = $('.' + attachmentCheckboxField + ' .notification-error');
    if (attachmentErrorElt.length) {
    attachmentErrorElt.text(attachmentErrorNotification);
    }


    0
  • Karen D Snyder
    Aktionen für Kommentare Permalink

    Oops, I wrote the post above with the JS to do this, and it looks like I left out the code for the startObserveMutations function! Sorry about that, here it is:

    // Function to start observing node for mutations
    var startObserveMutations = function (nodeSelector, options, callbackFunction) {
    var node = document.querySelector(nodeSelector);
    if (node) {
       var observer = new MutationObserver(callbackFunction);
       observer.observe(node, options);
      return observer;
      }
    };

     

    Hopefully this will fix the problem.

    1
  • Trapta
    Aktionen für Kommentare Permalink

    Kevin Witt, as Karen D Snyder mentioned, you need to write the startObserveMutations function. Also, looking at your code, you are looking for the changes in the attachment field and in your code you are observing the checkbox for changes.

    Thanks

    0
  • Kevin Witt
    Aktionen für Kommentare Permalink

    A big thank-you to Karen D Snyder, you saved me allot of time with this.

     

    1
  • Karen D Snyder
    Aktionen für Kommentare Permalink

    Glad it's working, sorry for leaving out the function in the first place!

    0
  • Fikri Akbar Hedianto
    Aktionen für Kommentare Permalink

    Hi Karen D Snyder,

     

    I tried to use the script above and some adjustment for my case its working out. But I have some issue where the code to check the attachment error notification below doesn't work.

    // Adjust attachment error notification
    var attachmentErrorElt = $('.' + attachmentCheckboxField + '.notification-error');
    if (attachmentErrorElt.length) {
    attachmentErrorElt.text(attachmentErrorNotification);
    }

    Do you know what could possibly cause this? Thanks before for providing us the idea of solution to this case!

     

    0
  • Karen D Snyder
    Aktionen für Kommentare Permalink

    Hi Fikri Akbar Hedianto,

    Just to double-check, I did realize that my original post had omitted the function startObserveMutations, which I provided in this comment: https://support.zendesk.com/hc/en-us/community/posts/360028913434/comments/360009177754. Did you see that comment, and add the code for startObserveMutations?

    If you did add the code for startObserveMutations, then can you explain further in what way the code is not working: Is an error notification appearing like the one below when you click Submit and you have no attachment?

    Or are you not getting any error notification at all when you click Submit and you have no attachment?

    Please let me know, and then I can trouble-shoot further.

     

     

    0
  • Fikri Akbar Hedianto
    Aktionen für Kommentare Permalink

    Karen D Snyder

     

    I am able to receive error message but just the default "Attachment: cannot be blank" message when I already put the script below which should change the error notification message:

    var attachmentErrorNotification = 'Report must be attached';

     

    I also have added the startObserveMutations code to observe the change in the form and everything is working, only the error notifications that seems to be skipped.

    0
  • Karen D Snyder
    Aktionen für Kommentare Permalink

    Fikri Akbar Hedianto,

    In your script.js, there should be a line of code like the below, where XXXXX is the custom field ID for the checkbox:

    var attachmentCheckboxField = 'request_custom_fields_XXXXX';

    Please try this:

    1. Do whatever scenario you need, to get the notification  "Attachment: cannot be blank" to appear

    2. In the developer tools console, please type the following, replacing the first line with the line from your code::

    var attachmentCheckboxField = 'request_custom_fields_XXXXX';
    var attachmentErrorElt = $('.' + attachmentCheckboxField + ' .notification-error');
    attachmentErrorElt.length;

    Is the displayed length 1? If not, then there is a problem somewhere in the code.

    If the displayed length is 1, then type the following in the console, and let me know if the displayed notification changes to Hello!

    attachmentErrorElt.text('Hello!');

    This is my console output from doing the above steps:

    When I typed the last command, the notification changed:

    0

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.

Powered by Zendesk