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

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 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 all,

I have successfully modified various Zendesk Guides with template v4. I am sharing this public repository with all the necessary information so that you can try it out in your accounts. The use cases covered so far are:

1. Hide a value from a drop-down ticket field based on a user tag.
2. Define a subject text based on the selected form ID.
 

The code is completely commented. More uses cases are going to be added to this repository.

Repository: zetarck/zendesk-guide-v4-modify-form: Allow users to modify Zendesk V4 web form with their own necessities

Feel free to reach out if you have additional questions. Kind regard.

Hello all,

We have managed to modify our Guide V4 with the following use cases:
1. Tag-Based Dropdown Filtering — Hides specific dropdown options from ticket fields based on the current user's tags.

2. Form-Specific Subject Text — Pre-fills the subject field with custom text depending on which ticket form is active.

Here is the code:

<script type="module">
    //Created by Pablo Zarricueta. ZerviZ CX Consultant.
    //https://developer.zendesk.com/api-reference/help_center/help-center-templates/new_request_page/
    import { renderNewRequestForm } from "new-request-form";
    //Mandatory elements prior rendering
    const container = document.getElementById("new-request-form");
    //The settings object has custom properties. The object maps the identifier and value of the variables defined in the theme's manifest.json file. 
    //https://support.zendesk.com/hc/en-us/articles/4408846524954-Customizing-the-Settings-panel-of-the-theme#understanding-the-manifest-json-file
    const settings = {{ json settings }};
    //Object containing information about the new request form: ticket form field, organization field, attachments, etc.
    let request_form_clone = { ...{{ json new_request_form }}};

    //get current user data: user and org tags
    const orgs = window.HelpCenter.user.organizations;
    const userTags = window.HelpCenter.user.tags;

    // Flatten the array of organizations to get only the tags
    const orgTags = orgs.flatMap(org => org.tags);

    //for testing and debugging.
    console.log(userTags);
    console.log(orgs);
    console.log(request_form_clone);
    console.log(request_form_clone.ticket_form_field.value);

    //Set your own ticket field Id. You can use any custom ticket field here.
    const tipo_caso_field_id = '46560480244884'; //first dropdown field
    const tipo_solicitud_field_id = '39445201654164'; //second dropdown field

    //Use Case 1: Hide a ticket field dropdown option based on user tag.
    //This is an object.
    const remove_options_by_tag = {
        'user_tag': {
            fieldId: tipo_caso_field_id,          // Ticket Field ID
            options: ['Duda']  // Dropdown Value to remove. Add multiple options if wanted
        }/*, If wanted, you can remove more options from different ticket fields based on user tags.
        'user_tag': {
            fieldId: tipo_solicitud_field_id,          
            options: ['Acceso a cuenta']  
        }*/
    };

    function applyTagBasedOptionFilter(request_form_clone, userTags, rulesByTag) {
        request_form_clone.ticket_fields.forEach(field => {
            // Only custom ticket fields
            if (!field.name.includes("request[custom_fields]")) return;
            // Extract field ID: request[custom_fields][44252325027604] → "44252325027604"
            const match = field.name.match(/\[(\d+)\]$/);
            if (!match) return;
            const fieldId = match[1];
            // Apply rules to the user
            Object.keys(rulesByTag).forEach(tag => {
                if (!userTags.includes(tag)) return; // The user does not have this tag → skip
                const rules = Array.isArray(rulesByTag[tag]) ? rulesByTag[tag] : [rulesByTag[tag]];
                rules.forEach(rule => {
                    if (rule.fieldId !== fieldId) return; // This rule does not apply to this field → skip
                    // Remove the forbidden options from the dropdown
                    field.options = field.options.filter(opt => !rule.options.includes(opt.name));
                });
            });
        });
        return request_form_clone;
    }

    //Use Case 2: Change subject text based on a specific ticket form Id
    // Map of ticket_form_id → subject text to display
    const subjectTextByFormId = {
        '46560545585812': 'Demo Custom text',
    };

    function applySubjectTextChange(request_form_clone, subjectTextByFormId) {
        // ticket_form_field is an object (not an array), read its current value directly
        const currentFormId = String(request_form_clone.ticket_form_field.value);
        const newSubject = subjectTextByFormId[currentFormId];

        if (newSubject) {
            // Find the subject field inside ticket_fields and update its value
            request_form_clone.ticket_fields = request_form_clone.ticket_fields.map(field => {
                if (field.name === 'request[subject]') {
                    return { ...field, value: newSubject };
                }
                return field;
            });
        }

        return request_form_clone;
    }

    //Call to function
    request_form_clone = applyTagBasedOptionFilter(request_form_clone, userTags, remove_options_by_tag);
    request_form_clone = applySubjectTextChange(request_form_clone, subjectTextByFormId);

    //--------------------
    //Render the form
    //-------------------
    const props = {
        requestForm: request_form_clone, // Use form Clone
        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 } },
    userId: { {json user.id } },
    brandId: { {json brand.id } },
    organizations: { {json user.organizations } },
    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) } }
    },
};

    renderNewRequestForm(settings, props, container);


</script>

Feel free to reach out if you have questions.