DEV Community

Jordan Finneran
Jordan Finneran

Posted on • Updated on • Originally published at jordanfinners.dev

Zendesk Hide Ticket Forms Based On Organisation

Hi everyone!

This is pretty specific blog post on something that I got asked to look into recently and really struggled to find much of help.

I did come across this thread, but nothing worked quite the way we wanted it to, so we came up with the following, its not pretty but it works around the slightly odd way Zendesk deals with the select box.

This is designed to affect the create new request page of Zendesk UI, specifically affecting the dropdown where the user can select what type of request they want to raise.

This will change it so that users can only raise requests they are allowed to based on the organisation they belong to, without having to pay for the Zendesk Brands features.

The code is below in both an image (easier to read) and also here for you to copy and paste!

What to expect

If a user isn’t logged in or isn’t attached to an organisation, then they will be redirected to a default form. Whose ticket ID can be specified by replacing the DEFAULTTICKETID in the code.

A user who is logged in, who belongs to an organisation or organisations, which has been setup as per the Setup section below, will only be able to see the types of tickets they are allowed to create, based on what forms their organisation has.

If the user only has 1 allowed type of ticket, they will be redirected to this form and the dropdown will be hidden, seeing as they only have one available option.

Setup

For this to work you need to have added the ID’s of the forms, a user can access, to the organisation as tags. You can still include other tags as this won’t affect anything else.

These ID’s can be found as the last part of URL when editing the form.

You need to replace MYCOMPANY (or the newRequestURL) with the URL of your zendesk UI where users can raise a new request.

You also need to replace DEFAULTTICKETID, with the ID of the form you want non logged in users or users without an organisation to be able to raise, a generic type of request anyone could raise.

    const newRequestUrl = "https://MYCOMPANY.zendesk.com/hc/en-us/requests/new"
      // generic function to push users without an organisation or forms for that organisation to a default template
      function pushToDefaultForm() {
          const defaultformurl = `${newRequestUrl}?ticket_form_id=DEFAULTTICKETID`;
          if (!window.location.toString().includes(defaultformurl)) {
              // Redirect to Default Form
              window.location = defaultformurl;
          }
          hideFormDropdown();
      }

      // generic function to hide the dropdown if only one option
      function hideFormDropdown(){
        $(".request_ticket_form_id").hide();
      }

      //if user has no organisation, show the default form
      if (HelpCenter.user.organizations.length === 0) {
          pushToDefaultForm();
      } else {
          // Loop over the organisations a user belongs to building up a list of all the tags (form ids) they can see
          const organisationForms = []
          HelpCenter.user.organizations.forEach(function (organization) {
              organization.tags.forEach(function (tag) {
                  organisationForms.push(tag);
              });
          });
          // if a user has organisations but no form ids associated, panic and push them to the default form
          if (organisationForms.length === 0) {
              // Redirect to Default Form
              pushToDefaultForm();
          } else {
              // keep checking the dropdown exists every 100ms until it does
              let checkExist = setInterval(function () {
                  if ($("a.nesty-input").length) {
                      clearInterval(checkExist);
                      $("a.nesty-input").each(function () {
                          // get the all the possible form options (for everyone not just this user) 
                          const options = document
                                          .getElementById("request_issue_type_select")
                                          .getElementsByTagName("option");
                          const optionsToRemove = [];
                            const optionsAvaliable = [];
                          // loop over the options backwards (so as not to affect the list),
                          // removing the options the user shouldn't be able to see
                          for (var i = options.length - 1; i > 0; i--) {
                              let value = options[i].value;
                              // check if the form id for this option is one the user can see
                              const userHasForm = organisationForms.findIndex(function (id) {
                                  return value === id;
                              }) > -1;
                              // if the user cannot see the form store it in a list of ids
                              // the user cannot see and remove that option
                              if (!userHasForm) {
                                  optionsToRemove.push(value);
                                  $(`option[value='${value}']`).each(function () {
                                      $(this).remove();
                                  });
                              } else {
                                    optionsAvaliable.push(value)
                              }
                          }
                            if (optionsAvaliable.length === 1){
                                const formurl = `${newRequestUrl}?ticket_form_id=${optionsAvaliable[0]}`;
                              if (!window.location.toString().includes(formurl)) {
                                  // Redirect to Default Form
                                  window.location = formurl;
                              }
                                hideFormDropdown();
                          }
                          // every time the user clicks a weird popup happens with a list of options,
                          // this needs removing down to only those the user can see each time they click,
                          // so use the stored list of options to remove loop over these
                          // removing each one
                          $(this).bind("click", function () {
                              optionsToRemove.forEach(function (id) {
                                  $((`#${id}`)).remove();
                              });
                          });
                      })
                  }
              }, 100);
          }
      }
Enter fullscreen mode Exit fullscreen mode

Top comments (0)