Recent searches


No recent searches

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



image avatar

Renaud Croix

Most Engaged Newbie of the Year - 2021

Posted Nov 25, 2021

Hello,

I would like to hide a specific dropdown field value in the request form for End User ?

How to proceed ?

 

Thank you


9

25

25 comments

image avatar

Dane

Zendesk Engineering

Hi Renaud,
 
Good day!
 
A specific field value for a dropdown field cannot be hidden for an end-user. When it comes to fields and forms visibility, it will be all or nothing. 
 
This is definitely a good feedback that we'll be glad to look into for any possibility to be added in the future.
 
Cheers,
Dane

0


This issue has been plaguing us since we started using Zendesk.

1


Dane Hi, can this be accomplished by custom coding?

0


Hello Johnny,

If you refer to  drop-downs in the Guide forms that the end-users use, then I have achieved this via custom code. Although it is not so straight forward, I did manage it. It is a solution that works but definitely not supported by Zendesk since this is a customization of the theme in Guide. Is this the use case that you are looking for?

Regards, Alfredo

0


Hey Alfredo,

Alfredo Navarro

Thank you, yes thats right. On the new request form, we want to show only specific dropdown values to the users based on their orgs. 

 

0


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

0


Hi Alfredo,

Thank you very much, and I really appreciate for your help. I am not sure how to make this work, sorry I am not good in coding. Should I update the script with dropdown values or tags. Can you please help?

0


Hello Johhny,

Well, I was assuming that you had some knowledge in coding... basically the code snippet is a function that receives an array of tags to be hidden (across all fields). You would need to include this function in the scrips.js of your custom theme and call it also from there with the list of tags to be hidden. In any case, you would need a developer if you would like to achieve to hide tags based on user's organization and do it more dynamic... basically the code snippet is the building block for further development.

I hope that this guidance helps.

Best regards, Alfredo

0


Hi Alfredo,

Thank you again, yes,  I will surely try this and I will let you know. I also have another question, hope you can help. Is there a way we can we direct users to two different interfaces but with the same help center URL?

For example, internal users visits our helpcenter and only elements that are relevant to them are shown. Likewise, for external users, the user visits the same helpcenter url, and only elements specific to them are visible. Is this possible? 

Thanks in advance,

0


Hi Johnny,

Not a problem, happy to help. Regarding your other question, basically you can define the visibility to articles (and sections I think), then you  can define those that are internal for agents only, the others for end-users. I think that it should be possible and you can do a bit customization in the home page to make it look nice :-). The URL of your help center is always fixed, so I really think that the only way is via these permissions.

Best regards, Alfredo

0


Hi Alfredo,

Apologies if I wasn't clear enough, I mean the visibility of the entire help center must be different for internal end users and for external end users.

We have built a tiled layout homepage (Tile 1 - Service Requests, Tile 2- Report an issue, Tile  3 - A cloud based platform (for both our internal end users and external end users).

Both the users will access the same help center URL, but external end users must only see one tile (Tile - 3) as other tiles would be not relevant to them. Is this possible?

Thanks,

0


Hello Johnny,

OK, I understand. Basically you should be able to control the visibility of tiles based on the role of the user, but definitely you need to code this in the templates of the custom theme to either show a tile or not. This is definitely possible but it requires a bit of knowledge in the development of the custom theme.

Thanks and best regards, Alfredo

0


Hi Alfredo,

That's good news, With basic coding skills I managed to build the homepage, but just trying out to customize the visibility. I really appreciate your time, thank you for all your help and guidance.:) 

0


Alfredo Navarro is the code for hiding a dropdown value still working for you in V2 of copenhagen?

 

0


Hello Dustin Swayne,

I have not tried it with the latest version of the Copenhagen theme. We have our own custom one based actually on a previous version and we did not upgrade since there were not many features. I will give it a try anyway to see if it still works (although it should be if the structure of drop-down options did not change).

Best regards, Alfredo

0


Hi Alfredo Navarro

Thanks for helping and providing the code. 

I was wrecking my brain trying to get this to work before I stumbled onto your code. 

For anyone coming along now just to be clear here's what I done to get it working. 

In the script.js file of my theme go to the bottom of the page and add. 

// For this funtion to work i needed to call it in my script.js file first.
  $(document).ready(function() {
    hideDemoOptionForAnonymous();
  });

// This will hide the option with the id demo_field if the user is anonymous.
function hideDemoOptionForAnonymous() {
  if (HelpCenter.user.role === "anonymous") {
    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++) {
                var demoFieldToRemove = document.querySelector("li#standard_request");
                  if (demoFieldToRemove !== null) {
                    demoFieldToRemove.remove();
                  }
                }
              }
            }
          });
        });
        fieldDisableTagsObserver.observe(tagsElement, {childList: true});
      }
    });
  }
}

Another thing to note:

In order to find the option id's you need to enable emulate a focused page in the console, you can google this or

open console in chrome

click the three dots top right

more tools - rendering

click on emulate a focused page

once you turn on emulate you can open the dropdown and it will stay open so you can hoover over the options and read the id. 

example: you can see the id for this option is standard_request.

0


Hello!
Is there any way, by which we can make dynamic dependent forms on zendesk? 
To explain my use case better,
Suppose there are two custom fields of tagger type. Now, if I select an option in the first custom field, the second custom field shows/updates options corresponding to the option selected in the first field.

0


image avatar

Gabriel Manlapig

Zendesk Customer Care

Hi Sanskar,
 
It looks like you're looking to create conditional ticket fields. You can create a ticket field that's dependent on another ticket field's options/response. The options available for your end-user or customer will be dependent on what they choose or select for the value on a different field.  
 
We have a full guide that you can use for reference: Creating conditional ticket fields

I hope that helps!
 

0


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

0


image avatar

Max McCal

Zendesk Product Manager

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. 

0


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 

 

0


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

1


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);

0


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!

0


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

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post