How to hide dropdown fields based on dropdown selection?

Respondida

12 Comentarios

  • Jahn Bronilla
    Community Moderator
    Zendesk Luminary

    Hi Johnny J, you can actually create condition ticket field/s (customer facing or agent facing) based on the prior selection of the drop down.

    This article might help you with this - https://support.zendesk.com/hc/en-us/articles/4408834799770-Creating-conditional-ticket-fields 


    0
  • Johnny J

    Hey Jahn Bronilla,

    Thanks for your suggestion, creating conditional fields won't work with my request. When users choose a particular dropdown value from a dropdown menu, I want to make a certain field invisible to them. Fields ought to appear when a user chooses an alternative dropdown. Currently, when  user selects another drop-down option, the conditional fields totally hide all of the fields for them. So, using custom code will enable me to hide a certain field from the user based on their selection.

    Just an example, there is a dropdown called State and the user chooses Georgia. Only certain fields should be visible upon selection, and the conditional fields hides all required field when the user chooses any other state than Georgia.

     

    0
  • Arianne Batiles
    Zendesk Customer Care

    Hi Johnny,

    Using conditional ticket fields can hide/display whole fields, but not options within a single fieldSome customers have done custom coding to their Help Centers to change the appearance for end-users. Unfortunately, queries regarding custom coding and troubleshooting issues related to the customizations you have made are outside the range of the support we are able to offer. 

    We have an app that can hide field options of a drop-down field which is called Ticket Field Manager App. The app allows you to hide options for a given dropdown field. However, this is only applicable in the agent interface and not to the request form. See Installing and using the Ticket Field Manager app for more details. 

    0
  • Johnny J

    Hey Arianne Batiles,

    Thanks for your response, I understand that queries about custom coding fall outside of your support's scope.  But, in the past I've seen and had others assist us with the code, so I thought I'd try and see if anyone could assist with the custom code:)

     

    0
  • Arianne Batiles
    Zendesk Customer Care

    Hi Johnny, 

    Unfortunately, the previous community post has been archived. You might have some luck with this 3rd-party app called Formset since it allows customers to set the visibility of certain field options as well as it claims to work for both the agent and end-user experience. 

    0
  • Ahmed Zaid
    User Group Leader Community Moderator
    Zendesk Luminary

    Hi Johnny,

    We discussed this use case in the developer user group last week (you're welcome to join by the way). the conclusion was that it is not really a straight forward or non-developer-friendly customisation. I will have to check if we managed to record the meeting.

    Anyway, I would recommend involving a Zendesk partner that provides development services. Full disclosure, we at ROCA are one of the partners that operate globally and provide such services.

    0
  • Johnny J

    Thank you Arianne Batiles

    Hey @Ahmad Zaid, Thank you, I'll have a look at it, but is the group only for developers?

     

    0
  • Ahmed Zaid
    User Group Leader Community Moderator
    Zendesk Luminary

    Hi Johnny,

    This particular group focuses on showcasing and supporting developers or customers who are interested to develop on Zendesk. However, there is a group for (almost) everything, developers, admins, community managers, enterprise customers, and local groups around the world. Find them here.

     

    0
  • Kuba
    Zendesk Customer Care

    Hello Johnny, if you happen to still need some assistance with this, I was able to hide certain ticket fields based on the selection in another field, this involves some if statements and dom observers, but can be achieved. Let me know if you would like me to share this workaround. Have a good day! 

    0
  • Johnny J

    Hello Kuba, yes, it's great to hear that you've found a workaround. Appreciate your willingness to share this solution. Please do share the details when you have a moment, it could be very helpful for our team. Thank you.

    0
  • Kuba
    Zendesk Customer Care

    First, you will need to hide the fields that you want to show later on based on the selection in your dropdown field. In my case, I am using the code for both subject and description fields and hiding it with CSS (Customize > Edit code > styles.css)
     
    #new_request > div.form-field.string.required.request_subject {
    display: none;
    }
     
    #new_request > div.form-field.text.required.request_description {
    display: none;
    }


    Then I apply the following code to show those fields based on a selection in my custom dropdown ticket field. 

    PLEASE MAKE SURE TO CHANGE THE TICKET FIELD ID AND THE VALUE YOU WANT TO USE TO TRIGGER other fields to show up, I highlighted them in the code: 

    function validateAndToggleUI() {
    // Get the elements you want to hide
    var subjectField = document.querySelector("#new_request > div.form-field.string.required.request_subject");
    var descriptionField = document.querySelector("#new_request > div.form-field.text.required.request_description");

     
    // Check if the value is "canyon"
    if (request_custom_fields_9827560964756.value === "canyon") {
    // If it's canyon, ensure the elements are visible
    subjectField.style.display = "block";
    descriptionField.style.display = "block";
    } else {
    // If not, hide the elements
    subjectField.style.display = "none";
    descriptionField.style.display = "none";
    }
    }

    // Function to execute when mutations are observed
    var observerCallback = function(mutationsList, observer) {
    validateAndToggleUI();
    };
     
    // Create a MutationObserver instance to watch value changes on request_custom_fields_9827560964756
    var observer = new MutationObserver(observerCallback);

    // Assuming request_custom_fields_9827560964756 is the actual JS object
    observer.observe(request_custom_fields_9827560964756, { attributes: true, attributeFilter: ['value'] });



    0
  • Johnny J

    Hello Kuba, thank you for sharing. It worked perfectly for me. I appreciate your assistance:)

    I was wondering if it's possible to hide a specific value within a dropdown using a similar approach. For instance, consider dropdown A with two values: value 1 and value 2. Simultaneously, there's another dropdown, let's call it dropdown B, with three values: value x, value y, and value z.

    When value 1 is selected from dropdown A, dropdown B should present all three values - x, y, and z. However, when value 2 is chosen, dropdown B should only display two values - y and z. Is this possible?

    0

Iniciar sesión para dejar un comentario.

Tecnología de Zendesk