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

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

0 comments

Didn't find what you're looking for?