How to hide dropdown field value in the request form for End User ?

Hello Johhny,

Well, I was assuming that you had some knowledge in coding... basically the code snippet is a function that receives an array of tags to be hidden (across all fields). You would need to include this function in the scrips.js of your custom theme and call it also from there with the list of tags to be hidden. In any case, you would need a developer if you would like to achieve to hide tags based on user's organization and do it more dynamic... basically the code snippet is the building block for further development.

I hope that this guidance helps.

Best regards, Alfredo

Hi Alfredo,

Thank you very much, and I really appreciate for your help. I am not sure how to make this work, sorry I am not good in coding. Should I update the script with dropdown values or tags. Can you please help?

Hello Johnny,

Here is the solution that I have found by coding in the custom theme. Again, this is not an official solution and it is a way that I have found by analyzing the DOM of the form (how it is built and how it behaves). It could happen that if something changes in the standard theme, then it will not work, but well, that's the best that I could come up with

  function hideDropdownOptions(tagsToRemove) {
    if (tagsToRemove) {
      Array.prototype.forEach.call(document.querySelectorAll(".nesty-panel"), function(tagsElement) {
        if (tagsElement !== null) {
          var fieldDisableTagsObserver = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
              if (mutation.type == 'childList') {
                if (mutation.addedNodes.length >= 1) {
                  for (var i = 0; i < mutation.addedNodes.length; i++) {
                    for (var j in tagsToRemove) {
                      var tagElementToRemove = document.querySelector("li#" + tagsToRemove[j]);
                      if (tagElementToRemove !== null) {
                        tagElementToRemove.remove();
                      }
                    }          
                  }    
                }
              }
            });
          });
          fieldDisableTagsObserver.observe(tagsElement, {childList: true});
        }
      });
    } 
  }

The main idea is to observe for changes in the DOM when options of the drop-downs get populated. At that point in time, you can check if this is a tag that you would like to omit, then it can be just removed when building the list of options. It works just with tags and not individual fields, but in any case, tags need to be unique across all drop-down fields.

Using this as basis, now you can extend it to take the decision and conditionally hide specific tags based on the user's organization (for example).

I hope that this helps. Definitely this is a functionality that should be out of the box somehow since I think that it is a common requirement. Based on this solution, I have also managed to do "conditional options", e.g. a selected value in a drop-down will hide specific values of other drop-downs, but this is a more complex piece of code since you need to listen on changes in drop-downs of specific fields, but it is also possible.

If it helps, I can also write this in a dedicated post with further explanations of the approach, but for the moment, happy to share this code snippet here.

Best regards, Alfredo

Hey Alfredo,

Alfredo Navarro

Thank you, yes thats right. On the new request form, we want to show only specific dropdown values to the users based on their orgs. 

Hello Johnny,

If you refer to  drop-downs in the Guide forms that the end-users use, then I have achieved this via custom code. Although it is not so straight forward, I did manage it. It is a solution that works but definitely not supported by Zendesk since this is a customization of the theme in Guide. Is this the use case that you are looking for?

Regards, Alfredo

Dane Adriano Hi, can this be accomplished by custom coding?

This issue has been plaguing us since we started using Zendesk.