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

Hello Nitin,

The V4 of templates is based on React and you have more flexibility to customize your forms. Basically you need to adjust the code to filter those options that you want to “hide” just when rendering the DropDown component. I can confirm that this is definitely possible since you have full access to the data model of the form with all fields and options. Unfortunately, I am not able to share our solution since it is proprietary wthin my company.

Thanks and best regards, Alfredo

Hello,

I'm looking for a V4-compatible solution to conditionally hide a specific dropdown option from end-users on our request form.

Here's the scenario:

• Custom Dropdown Field 1 (1900001713847) has an option with the value Grant (cts_product_grants).
• When a user selects Grant, a second dropdown field, 33294915008660, becomes visible.
• The second dropdown, 33294915008660, has a value called Bug (cts_grants_topic_v25_12_bug), which we need to hide from end-users.

We've tried implementing this with custom JavaScript, but we've run into issues with the V4 theme's dynamic rendering. It seems the dropdown options are not reliably present in the DOM when our scripts run, creating a race condition that prevents us from hiding the Bug option.

Could someone please provide a robust, V4-compatible solution for this issue? We would appreciate any guidance on the correct approach for conditionally hiding dropdown options in this environment.

Thank you for your help!

Hello,

I'm looking for a V4-compatible solution to conditionally hide a specific dropdown option from end-users on our request form.

Here's the scenario:

• Custom Dropdown Field 1 (1900001713847) has an option with the value Grant (cts_product_grants).
• When a user selects Grant, a second dropdown field, 33294915008660, becomes visible.
• The second dropdown, 33294915008660, has a value called Bug (cts_grants_topic_v25_12_bug), which we need to hide from end-users.

We've tried implementing this with custom JavaScript, but we've run into issues with the V4 theme's dynamic rendering. It seems the dropdown options are not reliably present in the DOM when our scripts run, creating a race condition that prevents us from hiding the Bug option.

Could someone please provide a robust, V4-compatible solution for this issue? We would appreciate any guidance on the correct approach for conditionally hiding dropdown options in this environment.
 

Thank you for your help!

Hello Nicole,

The latest version of Zendesk Guide templates (V4) is based on React and it is using the Garden components. Basically you will need to re-implement this logic within react to filter out those options that you need to hide before passing the data to the drop-down component. This approach is cleaner and also offers many other possibilities of customization.

I hope that this information helps.

Best regards, Alfredo

Not sure if anyone has suggestions here. I have coding that hid two forms from the dropdown when submitting a new request. This has worked previously, but was just notified that the options are now appearing again. I know ZD has been going through quite a few updates recently, I'm wondering if the code was somehow affected. What I currently have in use: 

  //hide form from dropdown selector
var tagsToRemove = ['[form a]', '[form b]'] 
function removeTagsWeDontWant() {
$('.nesty-panel').on('DOMNodeInserted', function(e){
for(var i in tagsToRemove) {
$('li#' + tagsToRemove[i]).remove();
}
});
};
removeTagsWeDontWant();  
  
  $('.nesty-panel').on('DOMNodeInserted', function(e){
    $(this).children('ul').children().remove('#[form a]');
		$(this).children('ul').children().remove('#[form B]');
	});
});

Does anyone have thoughts on this or can possibly help get these two forms hidden again? Thanks!

Here is an example on how you can modify the props component in the new_request_page.hbs to remove values from the dropdown:

const props = {
    requestForm: {
        ...{{json new_request_form}},
        ticket_form_field: {
            ...{{json new_request_form.ticket_form_field}},
            options: {{json new_request_form.ticket_form_field.options}}.filter(option => {
                // Define the values for "Issue" and "Feedback" to keep
                const valuesToKeep = [
                    20621452630546, // Issue
                    21326079695122  // Feedback
                ];
                return valuesToKeep.includes(option.value);
            })
        }
    },
    newRequestPath: {{json (page_path 'new_request')}},
    parentId: {{json parent.id}},
    parentIdPath: {{json parent.url}},
    locale: {{json help_center.locale}},
    baseLocale: {{json help_center.base_locale}},
    hasAtMentions: {{json help_center.at_mentions_enabled}},
    userRole: {{json user.role}},
    brandId: {{json brand.id}},
    wysiwyg: true,
    answerBotModal: {
        answerBot: {{json answer_bot}},
        hasRequestManagement: {{json help_center.request_management_enabled}},
        isSignedIn: {{json signed_in}},
        helpCenterPath: {{json (page_path 'help_center')}},
        requestsPath: {{json (page_path 'requests')}},
        requestPath: {{json (page_path 'request' id=answer_bot.request_id)}}
    },
};

You can log the object to find the values you want to keep and add additional logic based on which the dropdown is being filtered.,

// Log the requestForm JSON object to the console
console.log("new_request_form:", props.requestForm);

Hello Dustin,

Version 4 of templates is based on React and basically you need to code the logic prior rendering the component, so totally a new implementation. The new version receives the form, fields and options as an object which provides the data to the React component. This new approach will give you much more flexibility in customizing your form and even you can use your own components.

I hope that this information helps.

Best regards, Alfredo

I was able to get this to work in earlier versions of the Copenhagen template but with the latest version it looks like they are using dropdown combo boxes and list boxes to display the options and it is no longer using the ul or li options.  Has anyone found a fix for the version 4 template with these changes?   Ifra Saqlain 

Hey, all —
It came to my attention that there has not been any official comment on this from Zendesk Product. This kind of specific, granular control is definitely a good example of where we want to take our permissions over time, but not something in the roadmap at the moment. 

Dear Zendesk Product team,

We would also like to express the need to hide a specific dropdown field values in the request form for end users. 

Best regards,

Elif