Requiring a ticket attachment if a particular dropdown option is selected

image avatar

Karen D Snyder

已于 2019年3月27日 发布

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()) {
    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!

0

61

61 条评论

日期
    最新
      image avatar

      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. Fikri Akbar Hedianto 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

      image avatar

      CJ Johnson

      Is this possible to do without requiring a drop down field to have something selected? I want to require an attachment on a form that doesn't have any drop downs. 

      2

      image avatar

      Brett Bowser

      Hey Rhys,

      I believe the only supported workflow would be to add the jQuery to the document_head as mentioned here: Importing or upgrading jQuery

      I've pinged some of our moderators to see if they are aware of an alternative solution.

      Cheers!

      0

      image avatar

      rhys

      Anyone got a workaround for jQuery now not being available in Templating API v2?

      1

      image avatar

      Ben Weaving

      I am also struggling to get this functioning.

      Code as below

      Console log output

      Code implemented, changing only the elements you mentioned.

       

       

      $(document).ready(function() {
      // 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_360012233180';
      var attachmentCheckboxId = '#' + attachmentCheckboxField;
      var attachmentErrorNotification = 'Attachments required before submitting';
      var formDropdownClass = '.request_custom_fields_360012190719';
      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() === 'no';
      }

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

      image avatar

      Karen D Snyder

      Carlo Ligthart I'm glad it's working for you! Fikri Akbar Hedianto maybe this was your problem too?

      0

      image avatar

      Carlo Ligthart

      Hi Karen D Snyder

      I'm found the problem. The code wasn't in the document ready function. Thank you for all the help. Making attachments mandatory will also help us a lot!

      Kind regards,
      Carlo

      0

      image avatar

      Karen D Snyder

      366686281727 I copied your code into a default Copenhagen theme and got a console error that startObserveMutations is not defined. I'm not sure if you just forgot to include it in your post.

      Also, I realized that I should have had you inspect the element with the error notification. When I inspect it, it looks like this:

       

      0

      image avatar

      Carlo Ligthart

      Hi 367254856428

       

      When I inspect  the checkbox I see the following:


      I have the following set in the code:

      var attachmentCheckboxField = 'request_custom_fields_360028787572';


       

      Here is the full code if that might help:

      // 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_360028787572';
      var attachmentCheckboxId = '#' + attachmentCheckboxField;
      var attachmentErrorNotification = 'Report must be attached';
      var formDropdownClass = '.request_custom_fields_360028850151';
      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 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');

      //Logging on request of Karen D Snyder
      console.log('attachmentErrorElt.length: ' + attachmentErrorElt.length);
      console.log('attachmentErrorNotification: ' + attachmentErrorNotification);

      if (attachmentErrorElt.length) {
      attachmentErrorElt.text(attachmentErrorNotification);
      }

      0

      image avatar

      Karen D Snyder

      366686281727 The notification isn't being changed, because attachmentErrorElt is not referencing the element that contains the attachment checkbox! We just have to figure out why! Perhaps the custom field ID is not correct?

      If I hover over the checkbox, and then right-click and select Inspect, this is what I see in the console:

      The highlighted element is the input element of type checkbox. A few lines above it is the <div> element that we are trying to reference, which:in my case has class request_custom_fields_360017775731:

      [If you have hidden your checkbox, then you'll need to show it by removing the CSS that hides it.]

      In my code, I have the line below that sets the variable attachmentErrorElt; note that the text inside the quotes matches the class of the <div>:

      var attachmentCheckboxField = 'request_custom_fields_360017775731';

      So the question is, does your code match what you see when you inspect the element?

       

      0

      请先登录再写评论。

      找不到所需的内容？

      新建帖子