Upload bijlage veld verplicht maken in Zendesk formulieren

Jordy Veldhuis
Jordy Veldhuis
  • Bijgewerkt

In Zendesk is het bijlagenveld standaard optioneel en kan dit niet via de beheerinterface verplicht worden gesteld. Met JavaScript in new_request_page.hbs kun je dit toch afdwingen.

1. Open het theme

Ga naar Guide Admin → Customize design → Edit theme en open new_request_page.hbs.

2. Voeg het script toe
Plak het onderstaande script onderaan het bestand, voor het einde van de code. Vervang <FORMID> door het ID van jouw formulier.

<script>
if (window.location.href.indexOf("ticket_form_id=<FORMID>") > -1) {
 function updateBijlagenVeld() {
   var label = document.querySelector('label[for="request-attachments"]');
   if (label) {
     label.innerHTML = "<VELDNAAM> <span style='color:red'>*</span>";
   }
 }
 document.addEventListener("DOMContentLoaded", updateBijlagenVeld);
 window.addEventListener("load", updateBijlagenVeld);
 document.addEventListener("submit", function(e) {
   var form = e.target.closest("form#new_request");
   if (form) {
     var pool = document.getElementById("request-attachments-pool");
     var hasFiles = pool && pool.querySelectorAll("li").length > 0;
     if (!hasFiles) {
       e.preventDefault();
       e.stopPropagation();
       var dropzone = document.getElementById("upload-dropzone");
       if (dropzone) {
         var error = dropzone.parentNode.querySelector('.bijlage-error');
         if (!error) {
           var err = document.createElement("div");
           err.className = "notification notification-error notification-inline bijlage-error";
           err.style.marginTop = "4px";
           err.innerHTML = "<FOUTMELDING>";
           dropzone.parentNode.appendChild(err);
         }
       }
     }
   }
 }, true);
}
</script>

Vervang de volgende placeholders:

<FORMID> — het ID van het formulier, te vinden in de URL bij het bewerken van het formulier in Zendesk Admin
<VELDNAAM> — de gewenste labelnaam, bijvoorbeeld Originele inkoopfactuur/bon
<FOUTMELDING> — de foutmelding die getoond wordt, bijvoorbeeld Voeg een bijlage toe (originele inkoopfactuur/bon).

Hoe het werkt

De labelnaam wordt vervangen en een rode * wordt toegevoegd om aan te geven dat het veld verplicht is
Bij het verzenden wordt gecontroleerd of er een bestand is toegevoegd
Zo niet, dan wordt het formulier geblokkeerd en verschijnt een foutmelding in de Zendesk huisstijl