English (US)

Requiring a ticket attachment if a particular dropdown option is selected

Karen D Snyder

Update from Community Team: jQuery has removed in v2 themes and this tip doesn't work without jQuery.

How to require an attachment in a ticket if a particular dropdown option is selected

We needed to require an attachment if a certain dropdown option was selected by the user when they are filling out a certain form to submit a ticket. Without being able to require the attachment, extra time would need to be spent by the agent to contact the user and ask for the additional document. 

Solution Overview

This was done by creating a custom checkbox field that is set to be required, and adding the checkbox to the form, hiding the checkbox via CSS, then programatically selecting or clearing the checkbox according to the dropdown option selected and the number of attachments present.

Limitations 

  • This solution detects that an attachment has been uploaded, but doesn't verify that the attachment is the particular document that needs to be attached.
  • This solution uses MutationObserver (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver), which is not supported in some older browser versions
  • A user could get around the requirement to upload an attachment by using the DOM inspector to show the checkbox, and then selecting it manually. 

Steps

Add the custom checkbox field

Create the custom checkbox field

  1. Navigate to the Ticket Fields page
  2. Click Add field
  3. Select Checkbox type
  4. Under Permissions, select Editable for end users
  5. Enter whatever title you would like, in Title shown to agents and Title shown to end users. I used the title 'Attachment'
  6. Select the Required to submit a request option.
  7. Click Save to create the field
  8. Note the field ID shown in the list of ticket fields for the new ticket field

Add the custom checkbox field to the form

  1. Navigate to the Ticket Fields page
  2. Locate the form for which you need to require the attachment, and click it
  3. Drag the new field from the list of fields on the right to the list of fields in the form. Make sure that it is the last field in the form (because you want the error notification that appears if an attachment is required but not uploaded, to appear above the attachment upload box).
  4. Click Save form to save the change.

Hide the checkbox field

Add the following to style.css to hide the field label and the field (replace the custom field ID in this code with your custom field ID). You have to hide the field label and field individually instead of hiding the <div> that contains them, because if there is an error notification that an attachment wasn't uploaded, it is inside the <div>.

#request_custom_fields_360017775731_label,
#request_custom_fields_360017775731 {
display: none;
}

Set the checkbox according to the attachments and dropdown

1) Determine the field ID of the dropdown. You can do this from the Ticket Fields page or with the DOM inspector by opening the form in your Zendesk, and then inspecting the dropdown. The screenshot below shows the dropdown on the web page, and the element inspector portion that shows the field ID

2) Add the following code in script.js inside the document ready function, e.g.after $(document).ready(function () { :  and before the ending line }); [You have to adjust the field IDs in attachmentCheckboxField and formDropdownClass to match your field IDs, and adjust the option checked in function isFormAttachmentRequired to match the particular option in your case]:

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

// 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_360017775731';
var attachmentCheckboxId = '#' + attachmentCheckboxField;
var attachmentErrorNotification = 'Report must be attached';
var formDropdownClass = '.request_custom_fields_360017548611';
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() === 'ABCD';
}

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

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

// If attachment checkbox field exists:
//   Select the checkbox if attachment is not required
//   Watch for changes to attachments and dropdown
if ($(attachmentCheckboxId).length) {
  if (!isFormAttachmentRequired(formAttachmentDropdownClass)) {
    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);
}

Note: The code that detects changes to the attachments and dropdown uses MutationObserver (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver), as mentioned above. Basically you create an observer instance and pass it a callback function to execute when changes are observed. Then you start the observer, passing it the target node and options specifying what changes to observe.

When the above steps are done, and style.css and script.js are changed as shown above, then you will see that if you open the form and select the dropdown option that requires an attachment, and then click Submit, an error notification is displayed:

Hope this helps somebody!

44 Comments

  • CJ Johnson

    Update: I have a working solution for my comment above! 

    First, I totally didn't realize that Fikri had already posted what I asked about above. Minus that final bracket, it's a perfect working code example of requiring an attachment on a form, period, no other field requirements. @... sorry to ping you about a year old comment on a Zendesk article but your comment on this saved me hours of work and headaches, you are my hero this week!! 

    Second, I am not confident the more official code example in the guide still works. I tried so many things to get it to work but also consistently got that 'formAttachmentDropdownClass is not defined', and while I'm an absolute beginner at javascript, I gotta say that I don't think it's an implementation issue, I can't see anywhere that it's being defined, either. 

    Fortunately for me, and possibly for whoever is reading this comment, you can still use Fikri's code to require an attachment on a form because it never references that class, because a dropdown isn't needed for that version. 

    1
  • Patrick Lieu

    Is there a way to force an attachment for only when a specific field is selected (and not from the intital form selection)?

    0
  • Jesper Rosenkrantz

    CJ Johnson My turn to ping you in an old thread ... I am looking for a solution for this, but it seems this doesn't work on newer themes. Do you have something set up that makes attaching files mandatory? And if so, does it require an older theme?

    0
  • Anastasia Kachanova

    Hi guys,

    Maybe anyone is familiar, if it's possible to use dynamic content in the below part (error message shown to end-user if there is no attachment selected) :

    var attachmentErrorNotification = 'Attachments: cannot be blank';

    Thanks in advance!

     

    0
  • Anastasia Kachanova

    Hi,

    Seems that "attachment" checkbox is not hidden anymore. Can anyone please check into this and advise how this field could be hidden again?

     

    Thanks,
    Anastasia

    0
  • Christopher Kennedy
    Zendesk Developer Advocacy
    Hi Anastasia,
     
    Have there been changes to your theme's styles since the checkbox stopped hiding?  A change that conflicts with the Hide the checkbox field section could cause what you're seeing.
    0
  • Saasten
    • Edited

    can we make the "attachment" as a mandatory based on the value from the dropdown?

    0
  • Christopher Kennedy
    Zendesk Developer Advocacy
    Hi Dikka,
     
    This tip walks through making the attachment required after a specific dropdown value is selected.  Is there an issue you're encountering when implementing?
     
    0
  • Noelle Cheng
    • Edited

    Christopher Kennedy are you able to assist me with my issue below? This code isn't working and I'm having trouble getting it to require attachments based on a selection. The attachment checkbox doesn't work.

     

    This doesn't seem to be working now. I'm able to fully submit a ticket without uploading an attachment when I select my option from the drop down. It's not requiring the attachment. When i show the attachment checkbox, i see that it never checks the box.

     

    My HC is currently on the below:

    Theme version 2.15.0
    Templating API v2

    Below is the code that are currently in the sections style.css and script.js. Items in bold and italic are what I updated to my specifics.


    STYLE.CSS (pasted at the bottom of the existing code)
    #request_custom_fields_7685982184091_label,
    #request_custom_fields_7685982184091 {
    display: none;
    }

    SCRIPT.JS (pasted at the bottom of the existing code)
    I have multiple forms and I need this to work only for a specific form. Can someone assist? Below is the code I'm using.

     

    // REQUIRE ATTACHMENTS FOR FORM A
    // 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;
      }
    };

    // 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_7685982184091';
    var attachmentCheckboxId = '#' + attachmentCheckboxField;
    var attachmentErrorNotification = 'Attachment is required';
    var formDropdownClass = '.request_custom_fields_7686337209627';
    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 'Option 1' is selected
    function isFormAttachmentRequired() {
      return $(formDropdownClass + ' a.nesty-input').attr('aria-expanded') &&
             $(formDropdownClass + ' a.nesty-input').text() === 'Option 1';
    }

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

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

    // If attachment checkbox field exists:
    //   Select the checkbox if attachment is not required
    //   Watch for changes to attachments and dropdown
    if ($(attachmentCheckboxId).length) {
      if (!isFormAttachmentRequired(formAttachmentDropdownClass)) {
        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
  • Elizabeth C

    This is great...but I am getting the error " The upload took too long, connection was lost." 

    What did I do wrong?

    0
  • Anonimas Anonimas

    Hi,

    Where to find # for attachmentCheckboxField? I did everything as explained, but the error message doesn't pop up at all. I assume I'm missing this ID. Any suggestions?

    Talking about this part:

    var attachmentCheckboxId = '#' + attachmentCheckboxField;

    Thanks!

    1
  • Raphaël Péguet - Officers.fr
    • Edited

    Hi Zendesk Community,

    I did as explained: 

    Made the checkbox mandatory and filled the 3 variables in the code (checkbox ID, dropdown ID and i kept abcd as a value) and for any other value than abcd i keep getting "checkbox checked required" error message..

    I get that;

    0
  • Jan Schweigerer

    I'm sorry, but I can't believe this is not a standard feature available via forms.

    This is such a basic use case which thousands of customers will require, and we have to build some complicated, messy workaround on our own in order to realize it.

    It baffles me how expensive this tool is for the amount of features it offers.

    1
  • Katie Sullivan
    • Edited

    Here's a simpler way to enforce that users upload an attachment before submitting a request. These changes should be added to the script.js. 

    1. Disable the submit button on the form you wish to enforce attachment upload.

    const button = document.querySelector('[value="Submit"]');
    button.disabled = true;

    2. Change the attachments default label to let the user know an attachment is required.

    $('label[for="request-attachments"]').html('<b>Attach file template to proceed</b>.');  

    3. Add an event listener to the attachments area to detect changes, and only enable the submit button (and change warning text) if there is at least one file attached.

     document.getElementById('request-attachments').addEventListener('change', function(event) {
      var fileInput = event.target;
      var fileCount = fileInput.files.length;
       if (fileCount > 0) {
         attachmentLabel.text("Attachments"); 
         button.disabled = false;
       }
      });

    Here's how it looks on the submit a request page, before and after attachment upload:

    Before:

    After:

    Hope this helps someone else!

    2

Please sign in to leave a comment.

Didn't find what you were looking for?

New post
Powered by Zendesk