Hide an option in a custom dropdown field from end user on request form

I really didn't receive much help other than a suggestion to read a support doc or to contact support for custom code.

Instead I reached out to our own IT team and we came up with a very simple, elegant solution! I think I might post this elsewhere on your site so others could replicate if they have a similar use case.

Wonder if Zendesk might also think about adding this function as part of your out-of-the-box solution? It's really helpful to have only one topic list (instead of an internal and external) displayed after the Form is selected.

The following simple code needs to be added on the JS page under 

$(document).ready(function() {
 

1) Create a variable to store the tags of options that we want to hide from end-users. Multiple tags can be added with a comma separation.

var tagsToRemove = ['manually_canceled'];

2) Execute logic to remove the options:

removeTagsWeDontWant();

3) Here's the code added at the end of the JS page:

function removeTagsWeDontWant() {
$('.nesty-panel').on('DOMNodeInserted', function(e){
for(var i in tagsToRemove) {
$('li#' + tagsToRemove[i]).remove();
}
});

}

Glad to hear you found a solution, Bonnie, and thanks for sharing! I'd definitely encourage you to share this for others to use. 

Hi!

I would like to hide some options from a custom drop down field from end users. I tried to edit the code but I could not find the $(document).ready(function() since we are using a custom theme. 

May I know where else I can edit it instead?

Thanks! 

Hi @Bonnie Schofield , im stuck in a similar problem and your solution doesn't work anymore i think that's because you are using "li" and the dropdowns values are now created as a div?

What im trying to achieve is i have a ticket field dropdown that is editable for end users. I would like to remove and rename some of drop down values for end users. So agents would see all of those in the tickets but end-users would see only some of them. Can you assist me with this?

Update : i was able to achieve removing of options but whenever i try to rename it within the same code block the form gets stuck

$('.nesty-panel').on('DOMNodeInserted', function(e){

for(var i in tagsToRemove) {
$(this).children('ul').children().remove('#' +tagsToRemove[i]);
}

$('#ID').text('new_value');

)};

I had a requirement to hide a certain option in a custom dropdown ticket field if the user is not in specific groups. The code below worked for me, in script.js inside the document ready function. Note that this code is being used in a templating API v1 theme. I believe the jquery would need to be converted to javascript for it to work in a templating API v2 theme.

const ITGroups = ['group-name-1', 'group-name-2'];

function isUserInGroups(groups) {
    var groupsMatched = HelpCenter.user.groups.filter (function(group) {
        return groups.includes(group.name);
    });
    return groupsMatched.length > 0;
}

if (!isUserInGroups(ITGroups)) {
    $('.nesty-input').on('click', function() {
        $('#tag-associated-with-option').remove();
    });
}

You can find the tag associated with the option by navigating to ticket fields in the agent dashboard, selecting the ticket field, and then clicking Show tags.