Forums/Community/Support tips & notes

Creating conditional drop-down lists using JavaScript widgets

Skip Moore
posted this on February 24, 2012 11:05

Many Zendesk customers have requested a way for custom drop-down lists to be able to show and hide elements based on certain conditions. Although not currently provided as a custom field type in Zendesk, you can create conditional drop-down lists yourself by creating a JavaScript widget.

The idea is simple but complex in implementation. Each layer adds to complexity so we recommend that you create no more than three layers. For example:

1. parent 1
  a. child 1
    i. sub child 1
  b. child 2        
    i. sub child 2
2. parent 2
  a. child 3       
    i. sub child 3
      a. child 4
      sub child 4

There are two ways of doing conditional fields. The first is if you have no required child fields, the second is if you do. The JavaScript code for each is described below.

For either option, you first need to create a custom drop-down field and then create a JavaScript widget, which controls the behavior (enables the conditional fields) when the field is used in your help desk.

Option 1: No required child fields

The first option is to show and hide the entire child field based on a selection in the parent field. Using this method, the child fields can only be optional, not required.

To build out the JavaScript code for this, you need the custom field ID of each field you want to hide. You can find your custom drop-down list ID here:

conditional_fields1.png

Here's the JavaScript code to create a conditional drop-down list with no required child fields. You can also find the code on github.

(function () {

/* This widget uses arrays to store the fields you which to show or hide based on a users selection
** Each field you wish to hide contains three fields that need to be hidden 
** 1) The title which is a H3 HTML tag. This uses jQuery to search for the title so make one entry in the array like this h3:contains(Division)
** 2) THe description (which is optional) that is a <P> HTML Tag. Like the title we do a searh for words in the description like this p:contains(Which Division) so add that to the next element in the array
** 3) The last bit that need to be in the array is the selector for the field which is like  #ticket_fields_20389132 the number being the ID of the custom field. 
**
** You need to create a array for each condition you wish to exist. aaa
*/

var creativeRequest = ['h3:contains(dental)', 'label:contains(dental)', '#ticket_fields_109934'];

var projectRequest = ['h3:contains(type2)', 'label:contains(type2)', '#ticket_fields_20111097'];


//the array the hides everything
var hideAll = [].concat(creativeRequest, projectRequest);

//condition fields for the end user request form make sure you change the field ID to yours. 
  $j(document).ready(function() {  
	//this builds a map based on the selection of the dropdown field values 
	moodFieldMap = {
	  alpha: [].concat(projectRequest),
	  angery_blue: [].concat(creativeRequest)
	}
    
    //function to hide a array of arrays 
       var hide = function(){
           $j.each(arguments, function(i, item){
               for(y = 0; y < item.length; y++){
                  $j(item[y]).hide();
               }
           }
               );
       }
       //function to show a array of arrays
       var show = function(){
              $j.each(arguments, function(i, item){
                  for(y = 0; y < item.length; y++){
                   $j(item[y]).show();
                  }
              }
                  );
       }

   //check to see if you are on the end users request page
  // if(location.pathname === '/requests/new' || location.pathname === '/anonymous_requests/new') {
   //hide all the fields
   hide(hideAll);

      //monitor the dropdown field
      $j('#ticket_fields_104609').change(function (){ 
         //grab the value of the dropdown
         var userSelection = $j('#ticket_fields_104609').val();
		 hide(hideAll);
            if (userSelection.length > 0) show(moodFieldMap[userSelection]);
         });
//    }

  });


}());

You then build out arrays of the fields that you want to show or hide. When showing or hiding a field, there are two mandatory elements of the field and one optional that are needed in the array. The two mandatory are Title and custom field ID. The optional element is the ticket field description.

conditional_fields2.png

To hide the correct title or description, the jQuery function ‘contains:’ is used (as you can see in the code example above). To hide the title, the array includes ‘h3:contains(Division)’, which hides all titles that contain the word 'Division'. Hiding the description is done the same way: ‘p:contains(Which Division)’. To hide the field itself, use the format ‘#ticket_fields_ID’ (for example '#ticket_fields_20389142').

After you build out the arrays in the widget, you hide all the elements in the arrays using for loops and then start to monitor changes on the parent ticket field. Once the user has made a selection, you grab the value and use if statements to show or hide the elements.

20120229-nxw8rtxmuydpip4c8uhk78a527.jpg

Option 2: Required child fields

The other way to do condition fields is to rewrite the drop-down list options based on the selection in the parent field. The benefit to using this method is the child fields can be required. You still need to get the custom ticket field ID and build arrays, but the arrays will be the titles and values that you want to display when an option is selected in the parent field.

Here's the JavaScript code to create conditional fields with required child fields. You can also find the code on github.

(function () {
    /*create the various options you want to display 
	**each array needs to be built out with even number of members
	**in a tag, title format. 
	*/
    var option1 = ['epic','Epic','story','Story'];
	var option2 = ['problem','Problem','task','Task'];
	var option3 = ['question','Question','incident', 'Incident'];
	var fieldOption1 = ['teeth', 'Teeth', 'gums','Gums' ]
	var fieldOption2 = ['molar', 'Molar', 'tonge', 'Tounge']

	//this builds the dropdown list
    Buildoptions = {
        selected: function(value, name){ 
            return '<option value="'+value+'" selected="selected">'+name+'</option>';
        },
        notselected: function(value, name){
            return '<option value="'+value+'">'+name+'</option>';
        },
        clear: function(){
            return '<option value=""></option>';
        }
    }
	//goes through the selected array and builds the options 
	var makeSelection = function(theField, theArray) {
	        for ( x = 0; x < theArray.length; x = x + 2) { console.log('makeing select ' + theArray)
                $j(''+ theField +'').append(Buildoptions.notselected(theArray[x], theArray[x + 1]));
	        }
	    }

        //default options when page 1st loads 
	    $j("select#ticket_fields_20111097").html(Buildoptions.clear());
	    makeSelection('select#ticket_fields_20111097',option3);
	    //watch the root field for changes 
	    $j('#ticket_fields_109934').change( function(endUserselect){
            //grab the value of the dropdown
            var userSelection = $j('#ticket_fields_109934').val();
		    if( userSelection === 'teeth') { 
		        $j("select#ticket_fields_20111097").html(Buildoptions.clear());
			    makeSelection('select#ticket_fields_20111097',option2);
		    } 
		    if ( userSelection === 'gums' ) { 
		        $j("select#ticket_fields_20111097").html(Buildoptions.clear());
			    makeSelection('select#ticket_fields_20111097',option1);
		    } 
		    if ( userSelection === 'tonge'){
			    $j("select#ticket_fields_20111097").html(Buildoptions.clear());
		        makeSelection('select#ticket_fields_20111097',option3);
		    }
		    if ( userSelection === 'molar'){
			    $j("select#ticket_fields_20111097").html(Buildoptions.clear());
		        makeSelection('select#ticket_fields_20111097',option1);
		    }
	    });
	    $j('select#ticket_group_id').change( function(agentSelect){
            //grab the value of the dropdown
            var userSelection = $j('select#ticket_group_id').val();
            console.log('in change' + userSelection);
		    if( userSelection === '48491') { 
		        $j("select#ticket_fields_109934").html(Buildoptions.clear());
			    makeSelection('select#ticket_fields_109934',fieldOption2);
		    } else if ( userSelection === '81995' ) { 
		        $j("select#ticket_fields_109934").html(Buildoptions.clear());
			     makeSelection('select#ticket_fields_109934',fieldOption1);
		    }
	    });
    
    if(location.pathname.indexOf('tickets') >= 1) {
        $j('select#ticket_fields_109934').html(Buildoptions.clear());
        //default options when page 1st loads 
	    console.log(document.location.pathname);
	    $j.getJSON(document.location.pathname, function(ticketData){
	            console.log('ticket groupid ' + ticketData.group_id);

	            $j.each(ticketData.ticket_field_entries, function(i, item){
	               if ( item.ticket_field_id === 109934) {
	                    if( item.value === 'teeth' ) { 
	                        $j('select#ticket_group_id').val('81995');
	                        $j('select#ticket_group_id').change();
	                        $j("select#ticket_fields_20111097").html(Buildoptions.clear());
	                        makeSelection('select#ticket_fields_20111097',option2);
	                    }
	                    if ( item.value === 'gums'){
	                        $j('select#ticket_group_id').val('81995');
	                        $j('select#ticket_group_id').change();
	                        $j("select#ticket_fields_20111097").html(Buildoptions.clear());
            			    makeSelection('select#ticket_fields_20111097',option1);
	                    }
	                    if ( item.value === 'molar'){
	                        $j('select#ticket_group_id').val('48491');
	                        $j('select#ticket_group_id').change();
	                        $j("select#ticket_fields_20111097").html(Buildoptions.clear());
	                        makeSelection('select#ticket_fields_20111097',option1);
	                    }
	                    if ( item.value === 'tonge'){
	                        $j('select#ticket_group_id').val('48491');
	                        $j('select#ticket_group_id').change();
	                        $j("select#ticket_fields_20111097").html(Buildoptions.clear());
	                        makeSelection('select#ticket_fields_20111097',option3);
	                    }
	                    $j('#ticket_fields_109934').val(item.value)
	               }
	               if ( item.ticket_field_id === 20111097) {
                       console.log('20111097 ' + item.value)        
   	                $j('#ticket_fields_20111097').val(item.value)
   	               }
                   
                    
	            });
	       }
	    );
    }
}());

To create the various options you want to display, each array needs to be built out with an even number of members in a tag and title format.

conditional_fields4.png

The first thing you have to do is figure out what your default options are going to be. The following function clears all the values and rebuilds itself with the default values.

conditional_fields5.png

Then, you just watch the parent ticket field for changes and then, based on the user's selection, call the build function with the correct array.

conditional_fields6.png

 

Comments

User photo
Skip Moore
Zendesk

Fixed errors in code examples in the topic and github

March 06, 2012 09:56
User photo
Arnaud de Theux
Zendesk

That is awesome! Thanks so much.

March 09, 2012 02:37
User photo
Ani Niow
change

Fantastic. Is there a chance we could see a demo of this somewhere? Thanks!

March 12, 2012 15:30
User photo
Garon Davis
fitnesskeeper

Great stuff.  I will probably use this very soon.

March 23, 2012 04:06
User photo
Ryan Nguyen
lovestockleaf

Thanks alot! It works perfectly!

 

A minor comment: for non required child field code on github , line 57 can be improved by changing to

      if (userSelection.length > 0) show(moodFieldMap[userSelection]);

to prevent null item when the user selects nothing in the parent field

April 16, 2012 18:54
User photo
Skip Moore
Zendesk

@Ryan Nguyen, thanks for the tip. I have updated the source and the document. 

Cheers
Skip 

April 17, 2012 09:09
User photo
Johan Dekker

I am a complete noob with Zendesk and cannot get this to work.

Steps:

1. Created a new widget

2. I have copied the code above from sample 1, mod the variables

When i go the user request page all the fields are still visible

What am I missing?

April 25, 2012 08:34
User photo
Jay Heath
Zendesk for iPad Beta

Will such drop-downs also be conditional for agents, or just end-users? For example, if something is assigned to the "facilities" group then show the fields? As you might imagine, our facilities tickets have a need for different ticket fields than our tech support tickets.

May 10, 2012 08:34
User photo
Skip Moore
Zendesk

@Jay they will work for both agents and end-users. If you have requirements just for agents use a widget with permissions for agents only 

May 14, 2012 10:40
User photo
Taylor Bird
mimeo

So I got most of this working, but it appears that when a multi-tier Drop-down is used for the parent field, the .change() event is never fired.

 

Any thoughts?

June 12, 2012 12:27
User photo
Patrick B.

Just forgive a Noob-Question: Where do I have to add this coding to get it work?

Best regards,
Patrick

June 22, 2012 23:31
User photo
Joe D

I second the motion for a demo sometime.  Also, I'm a bit confused as to what the chunk of code below is for in Option 1, and what (if anything) needs to be changed here to work outside of the example:

 

$j(document).ready(function() {  
	//this builds a map based on the selection of the dropdown field values 
	moodFieldMap = {
	  alpha: [].concat(projectRequest),
	  angery_blue: [].concat(creativeRequest)
	}
June 25, 2012 17:17
User photo
Hadas
liveperson

Can someone please explain this part in "Option 2 - Required Child FIelds"?

 

 $j('select#ticket_group_id').change( function(agentSelect){
            //grab the value of the dropdown
            var userSelection = $j('select#ticket_group_id').val();
            console.log('in change' + userSelection);
		    if( userSelection === '48491') { 
		        $j("select#ticket_fields_109934").html(Buildoptions.clear());
			    makeSelection('select#ticket_fields_109934',fieldOption2);
		    } else if ( userSelection === '81995' ) { 
		        $j("select#ticket_fields_109934").html(Buildoptions.clear());
			     makeSelection('select#ticket_fields_109934',fieldOption1);
		    }
	    });
 
Can you please clarify what this part of the code is doing and also - I don't understand where these values '48491' and '81995' are coming from. 
Thanks in advance,
Hadas
September 11, 2012 06:49
User photo
Hadas
liveperson

OK, I think I've figured it out... I assume that's the group ID in your specific environment.

 

Thanks,

Hadas

September 11, 2012 23:32
User photo
Support Zendesk
viz

I'm sorry, but where do I put my custom id field from my custom drop down menu? Mine is 21648478 but in the above examples I'm seeing multiple ticket_fields_(number). Also, if someone could clarify the question from Hadas, in case that's relevant.

 

It might help non-coders like myself if the code above simply had a variable we filled once (like my custom field ID 21648478) and the rest sorted itself.

September 12, 2012 16:02
User photo
Skip Moore
Zendesk

Your field that is the control or monitor field should look like this

$j('#ticket_fields_21648478').change(function (){ 
//grab the value of the dropdown
         var userSelection = $j('#ticket_fields_21648478').val();
		 hide(hideAll);
            if (userSelection.length > 0) show(moodFieldMap[userSelection]);
         });

The moodFieldMap is just a way of mapping the select value to a list of actions for example show the project request fields when alpha is selected

September 12, 2012 16:16
User photo
Dan Goldman
wealthvest

Can someone point me to where I can find the reference documentation for all the Zendesk screen fields (attributes, methods, etc)?

Specifically, where can I find the reference for methods such as parent(), up()?, for attributes for value, description, etc?

I want to set some fields by default when creating a new ticket. If someone can provide guidance on that it would be greatly appreciated.

I looked a the existing documentation on the Developer site but when I compare that documentation with posted javascript code samples I can't find references for much of what I see in the code.

Thanks.

October 05, 2012 12:23
User photo
Skip Moore
Zendesk

we don't have a published reference document about the DOM. How are you getting the data to set the fields? Could it be passed by URL parameter? 

October 05, 2012 12:56
User photo
Dan Goldman
wealthvest

I can set the field values to literal strings in the javascript.

October 05, 2012 13:12
User photo
Skip Moore
Zendesk

Ok in that case you just have to inspect the DOM and find the strings you want to set. 

Cheer
Skip 

October 08, 2012 08:44
User photo
Dan Goldman
wealthvest

I don't think I explained myself correctly. Also you already said you don't publish a reference for the DOM.

In any case, I know what literal string I need to set the field to. It's one that I made up. What I don't know is HOW to set the field value in javascript.

Thanks.

October 08, 2012 08:57
User photo
Skip Moore
Zendesk

Oops sorry for my confusion you can do it like this 

jQuery('#ticket_fields_20541671').val('test');
October 08, 2012 09:19
User photo
Dan Goldman
wealthvest

I tried the above and the result was not what I wanted.

1. The field values are still not getting set to the string passed into the val method

2. The fields for which I am trying to set the values are set to hidden based on the user's group. When I try and set the values they are made visible in spite of my having removed them from the screen. See code snippet below.

The fiields in question are dropdown lists. They do not have "NA" as an option since Zendesk will not let you use the same dropdown value for different dropdown lists (seems like a strange requirement). I tried it with values that are in the dropdown lists and that did not work either - same results as above. The code I am using originated with Tal Admon in the "How to: Hide specific fields from certain groups of agents" post.

Thanks

else if (groupname == "Cust Svc - Contracting")
{
  jQuery("#ticket_fields_21519533'').val("NA");
  jQuery("#ticket_fields_21543828'').val("NA");

  $("#ticket_fields_21519533").parent().remove();
  $("#ticket_fields_21543828").parent().remove();
}

October 08, 2012 10:46
User photo
Skip Moore
Zendesk

In the case of setting dropdown fields to null use 

  jQuery("#ticket_fields_21519533").val("");
October 08, 2012 10:55
User photo
Dan Goldman
wealthvest

Same problem.

The fields being removed appear

The fields being set are not set. Note - it is not necessarily about setting the fields to null values. I'd actually prefer "NA". Also, the fields being set are required.

To completely describe the objective - I am trying to set default values for dropdown fields that are required but not displayed.

Thanks

October 08, 2012 11:01
User photo
Andre Nadimi

I was wondering how to implement this but base the conditions on what Group the assignee is in?

October 12, 2012 13:21
User photo
Naimish

I am trying to create a simple conditional field which shows up when customer selects a particular option from the droplist. I am using the below code but its not working for me. Can anyone point out whats wrong and how to get around it ?

var cond_field = $j("ticket_fields_21781962");

if( cond_field ) {
var status_field = $("ticket_fields_21505721");
var onDepChange = function() {
if( status_field.value == 'Claim' ) {
cond_field.up().show();
}
else {
cond_field.up().hide();

}
}
status_field.observe('change', onDepChange );
onDepChange();
}

October 29, 2012 16:34
User photo
Hadas
liveperson

Hi Naimish,

I think one of the problems is that you don't store the selected value.

The following is taken from a customization that I did and is working well, so maybe you can base your code on this. I wanted to show a website url field only if my chosen select box value was "ps". It also shows and hides the label (h3), because you want to show/hide it accordingly:

 

var website_url_field = $("ticket_fields_21811678"); //the url text box

if( website_url_field ) {

var website_url_field_stored_value = website_url_field.value;

var onDepChange = function() {
var the_chosen_field = $j('#ticket_fields_21798956').val();
if( the_chosen_field == 'ps' ) {
website_url_field.up().show();
$j('h3:contains(Website URL)').show();
website_url_field.value=website_url_field_stored_value;
}
else {
website_url_field.up().hide();
$j('h3:contains(Website URL)').hide();
website_url_field_stored_value = website_url_field.value;
website_url_field.value="";
}

}

observeDeliverablesChange( onDepChange );
onDepChange();
}

 

 

Hope this helps.

Hadas

October 30, 2012 03:41
User photo
Naimish

Thanks Hadas. I am trying with this code now but it seems there is no change. 

var website_url_field = $("ticket_fields_21781962"); //Order number field

if( website_url_field ) {

var website_url_field_stored_value = website_url_field.value;

var onDepChange = function() {
var the_chosen_field = $j('#ticket_fields_21505721).val();
if( the_chosen_field == 'Claim' ) {
website_url_field.up().show();
$j('h3:contains(Order number)').show();
website_url_field.value=website_url_field_stored_value;
}
else {
website_url_field.up().hide();
$j('h3:contains(Order number)').hide();
website_url_field_stored_value = website_url_field.value;
website_url_field.value="";
}

}

observeDeliverablesChange( onDepChange );
onDepChange();
}

October 30, 2012 15:41
User photo
Andrew J
BizStudio NZ

Great concept - I THINK this is what I am looking for, but goodness, incredibly complex for the non-techo Zendesk users.  A native ZD solution would be good.  Conditional form fields... is that what this achieves?

For me, specifcially I would like a different set of form fields for different groups, our span a range of support issues (Mobile phones, PCs and some really different stuff (general queries) - building a generic form to handle this is very awkward.

October 30, 2012 17:50
User photo
Hadas
liveperson

@naimish - I'm no expert, so maybe something else is wrong (although the sample I gave you is from a working form), but if nothing else then you have a syntax error in this line:

var the_chosen_field = $j('#ticket_fields_21505721).val();

(you have a single apostrophe before the name and none after it).

Maybe that's the problem, or maybe you have another script error somewhere else and this causes the whole form to fail once the first error occurs (you need to debug it, I use Firefox and check the "Tools -> Web Developer -> Error Console" window to check if my code doesn't generate any JavaScript errors.


@Andrew - I totally agree.

In my form I also needed a slightly different scenario for different groups. I actually used a combination of the 2 methods mentioned in this article. Some select boxes are always displaying and only generate a different set of options according to the user selection of the previous fields, other fields are displayed or hidden according to the user selection.

Not something a ZD admin would know how to do if he has no coding knowledge, it's definitely something I'd also love to see ZD give us out of the box. It was quite challenging to get all the pieces work together :)

October 30, 2012 23:34
User photo
Skip Moore
Zendesk

@Hadas thank you for catching that bug 

December 03, 2012 09:15
User photo
Sonya
techtorium47

@ Skip Moore

I'm the beginner for Zendesk but my friend want me to customize his web portal .... the requirement is the condition when they click the drop-down lists  which I need to customize by using JavaScript .

Can you explain to me ?  I try to read some forums  but dont understand properly .

I look forward to hearing from you.

 

P.S. my frind give me just the password to loging on the support portal only.

 

Kind regards

Sonya



December 11, 2012 01:43
User photo
Sonya
techtorium47

@ Skip Moore

 My problem is I dont know How can I get the sourcecode on this web portal. Or I need to login on github ?

 

Thanks Sonya

December 11, 2012 01:53
User photo
Arnaud de Theux
Zendesk

@Sonya

Not sure I fully understand your question but to activate the hack:

go to Manage> Extensions. Create a Javascript widget and copy the code above. You only need to replace all fields that are called "('#ticket_fields_21505721)" accordingly to your ticket field ID.

To have your field ID, go to Settings> Ticket fields. Then click edit on the right of your field. On the right of the screen you will see "Custom Field ID: xxx". Copy this value "xxx" and replace the 21505721 above.
Hope that helps. 

December 11, 2012 02:32
User photo
Sonya
techtorium47

@Arnaud de Theux

 

thank you for  your helping

 

sonya

December 11, 2012 03:34
User photo
Kristine
renesasit

I used ideas from here to create a conditional text field that only comes up when a certain selection is made in our company custom field.  It works great in the old Zendesk, but I can't get it to work in the new Zendesk.  I made a simple widget with just the following code:

$j('#ticket_fields_20935231').change( function(){
    console.log('company changed');
});

This works in the old Zendesk but not the new Zendesk.  Does anyone know how to detect a change in a drop-down field in the new Zendesk?

Thanks for your help.

Kristine

December 14, 2012 09:06
User photo
Skip Moore
Zendesk

@Kristine The New Zendesk condition fields is a app now You can get the code from github here https://github.com/skipjac/Zendesk-Apps/tree/master/ConditionalFiel...  I would also recommend you read up on creating apps at our developer site http://developer.zendesk.com/documentation/apps/  

-Skip

December 14, 2012 09:43
User photo
Kristine
renesasit

Thanks, Skip!

December 14, 2012 09:58
User photo
Jennifer Rowe
Zendesk

Awesome, Kristine. Please feel free to share any of your customizations or tips in our Community Tips and Tricks forum if you think others would be interested--they usually are!

December 14, 2012 10:41
User photo
Dipti Raisoni
synechron

If some one could put your thoughts on this?

My requirement: I have two fields Category and Category description with data in it.

Now,If  I select one of the data from category , only selected data from category description should pop automatically.

Please can any one help me with this?

 

December 18, 2012 05:30
User photo
Dipti Raisoni
synechron

Ok solved it at my end:)

 

January 04, 2013 07:18
User photo
Jennifer Rowe
Zendesk

Dipti, sorry for the lack of response over the holidays! But glad to hear you figured it out. Thanks for letting us know!

January 04, 2013 09:56
User photo
Richie Salvador

This is really helpful. But it would be great if you add demo. Maybe a link to jsfiddle?

January 15, 2013 17:45
User photo
Jane Cronk
casapacifica

Isn't coding this into the application something that Zendesk should do??  Giving someone like me this convoluted code does nothing for me as a Zendesk user.

Since people have been asking for this since 2008, you would think that this enhancement would have made the cut.

April 16, 2013 12:31
User photo
Brandon K.
Zendesk

Hello Jane,

Coding a feature into a custom widget is much simpler than coding it into the actual product, which is why we have this alternative while we work on implementing the feature into the official product. We will have a feature very similar to this with Help Center, so you do not have to attempt to create this widget on your own. We hope to have Help Center out soon but there is no official ETA yet.

April 17, 2013 09:28
User photo
Carl Lundgren
opengear

Has anyone figured out how to hide/show sub children using "Option 1 no required child fields"?

For example

If parent value = X show child A, if child A value = Y show sub child 1

If parent value = X show child A, if child A value = N show sub child 2

 

I have the show/hide working on the first level, but trying to add a sub level breaks it...

May 17, 2013 08:52
User photo
Ben
Zendesk

@Carl, if you are using New Zendesk there is an app that might assist with conditional fields. If you're interested in obtaining this app just email Services@zendesk.com and they will give you the details. Otherwise if you would prefer a separate widget in Classic Zendesk our Services Team is also available to consult on such a project for you according to their billable rates. Please understand my intention that if others have code they are willing to share I don't want this comment to stop them. However, I felt it prudent to point out the paths to achieving this functionality directly through Zendesk. Thanks for posting about this!

May 30, 2013 07:33
User photo
Payal Baruah

Hi I am new to Zendesk. I created a html/js widget to add a new feature.

My functionality involves a new tab to display an input form for user. Once user fills the values and clicks submit -> It shows  the calculated results. The screen is displaying the input form as expected. But I have the below code for hiding initial validations and results. Looks like $(document).ready(function() is not working.  Please can any one help me with this?

$(document).ready(function(){
$(".resultRow").hide();
$(".err").hide();
$("#msg_numberOfRNsToCoverTheFacility").hide();
$("#SubmitBtn").click(function()
{
var validation_success = validateInput();
if(validation_success)
{
computeResults();
$(".resultRow").show();
}
});

$("input[name='Unit']").click(function(){
if(this.value == "0") {
$("#text_averageRentableAreaPerUser").val("200");
}
else {
$("#text_averageRentableAreaPerUser").val("18.58");
}
});

$("input[name='radioNodeAboveCeiling']").click(function(){
if(this.value == "Yes") {
$("#text_ceilingLoss").attr("disabled",false);
}
else {
$("#text_ceilingLoss").attr("disabled",true);
$("#text_ceilingLoss").val("3")
}
});
});

 

Please help. Thanks!

June 12, 2013 12:16
User photo
Adam L.
Zendesk

@Payal

We'll follow up in the ticket you created to take a look at this.  Someone should be reaching out to you soon - thanks!

June 21, 2013 10:20
User photo
KAST
konysolutions

Skip,

I understood the cript but I do not get what is the group id and where do I get the values from.

 

Thanks in advance

KAST

June 28, 2013 00:54
User photo
KAST
konysolutions

And if you could add a screenshot of the final output it will be great.

June 28, 2013 00:55
User photo
KAST
konysolutions

Skip, ignore my previous request. I got the group id. 

June 28, 2013 01:47
User photo
Skip Moore
Zendesk

@KAST cool, glad you found the ID if  you have any other questions give us a shout 

June 28, 2013 08:27
User photo
Evelyn Yoder
activevideo

Can you clarify how this works?

Does this app create a parent/child relationship between two separate drop-down fields, or does it show/hide multiple levels in a single drop-down field * ?

* aka, the custom drop-down field, using the category::subcat format

July 09, 2013 09:10
User photo
Langston
Zendesk

@Evelyn

This widget/ app is meant to interact with two separate dropdown lists.  A selection from one field can change how the other fields later are shown or hidden.

July 09, 2013 15:11
User photo
klh

A newbie question, can you clarify which is the parent and which is the child in this example?

var option1 = ['epic','Epic','story','Story'];
var option2 = ['problem','Problem','task','Task'];
var option3 = ['question','Question','incident', 'Incident'];
var fieldOption1 = ['teeth', 'Teeth', 'gums','Gums' ]
var fieldOption2 = ['molar', 'Molar', 'tonge', 'Tounge']

In my case, I have one parent dropdown box with four choices, A, B, C, D. 

If "A" is selected, then I would like the "A" child drop-down box to appear and show three choices X, Y, Z
If "B" is selected, then I would like the "B" child drop-down box to appear and show three choices M, N, O
and so on.

Selection of the parent, and the conditional child, is mandatory.

I have a field ID (a number) for parent and for each of the A-D fields, and I have a tag and title for each menu choice (A,B,C,D, X,Y,Z, M,N,O, etc)

I'm unclear from the example text where these replace the example code provide.

July 11, 2013 14:46
User photo
Sabahudin Zaimbegovic

Hello everybody,

I am a newbie on Zendesk. Can somebody tell me where can I get the values for group id.

Thanks
Sabahudin

August 14, 2013 08:31
User photo
Skip Moore
Zendesk

@Sabahudin When in the People section select groups. Then right click and open the group in a new tab. It open that groups page in the classic interface and in the url you will see a number that is the group id. 

August 14, 2013 16:29
User photo
Sabahudin Zaimbegovic

@Skip

@Skip

Tricky ;-)
Thank you!

August 19, 2013 02:32
User photo
Nirit G
inneractive

Hi,

Conditional drop-down field is exactly what I'm looking for, thanks for this page.

The feature would be available to agents only, my plan is that after a drop down value was chosen few text fields will appear.

I've tried to implement the first option (no mandatory fields) but encountered some problems:

1. Will the hide / show behavior work in the agents interface? or is it valid only in the web-portal?

2. As far as I understood the condition array-

var creativeRequest = ['h3:contains(dental)'...

should contain the field title- is it the title that shown to end users? I must create a title for end users? or can it be the regular title for agents?

3. In the field map-

moodFieldMap = {
	  alpha: [].concat(projectRequest),...}

should I specify the title of the selected value (for instance: Integrations::API) or its tag (for instance: integrations__api)?

4. I've added the hidden fields to the relevant form, is that ok?

5. Should I wrap the code with-

</script>
<script type="text/javascript">
.
.
.
</script>

 

Thank you very much in advanced,
Nirit.

August 20, 2013 01:00
User photo
Wes Drury
muscogee

I have the following scenario within a ticket form:

Drop Down List with the following:

Desktop::Damage

Desktop::Connectivity

Laptop::Damage

Laptop::Connectivity

AV::Smartboard

If the end user selects either desktop or laptop then I would like to display a Text Box called Vendor Serial Number.  If the end user selects AV then I would like to dispaly a Text Box called SmartBoard Serial Number.  It doesn't matter what they select after desktop or laptop as long as Vendor Serial Number shows.  Is this possible to do with the code above or can someone point me in the right direction.

Thanks in advance.

September 06, 2013 20:29
User photo
Skip Moore
Zendesk

@Wes if you are using nested fields you can use this code https://github.com/skipjac/zendesk-widgets/blob/master/conditional-...

September 06, 2013 22:13
User photo
Wes Drury
muscogee

Thanks for the quick response Skip!  I'll look the code over and see if I can get it implemented.

September 06, 2013 22:23
User photo
Skip Moore
Zendesk

If you are using the new Help Center the conditional fields code has changed which can be found here https://github.com/zendesklabs/conditional-fields-help-center

September 09, 2013 09:20
User photo
Renato Lyke
konysolutions

Hi,

I tried the code and it is not working for me. Could you please let me know where is the error.

(function() {
var platformfield = ['h3:contains(Platform Category)', '#ticket_fields_21114185'];
var reproduciblefield = ['h3:contains(Platform(s) on which issue is reproducible)', '#ticket_fields_21108325'];
var hideAll = [].concat(platformfield, reproduciblefield);

//Platform(s) on which issue is reproducible Variables
var dwebrep = ['All','Chrome','Firefox','IDE','IE','Opera','Safari']; //Desktop Web
var dtoprep = ['Windows 7']; //Desktop
var hybrep = ['Android','Android Tablet','Blackberry','Blackberry Playbook','iPad','iPhone']; //Hybrid
var iderep = ['IDE']; //IDE
var instrep = ['Installer','Licensing']; //Installer & Licensing
var kpnsrep = ['All','Jboss','Tomcat','Weblogic','Websphere']; //KPNS
var midwrep = ['All','Tomcat','Weblogic','Websphere']; //Middleware
var otherep = ['Code Generation','Documentation','Help','Intellisense','Native Code Generation']; //Others
var richrep = ['Android','Blackberry','iPhone','J2ME','QT','Windows Kiosk','Windows Phone 6.x','Windows Phone 7','Windows Phone 8','Windows Phone Mango']; //Rich Client
var sparep = ['Android','Android Tablet','Blackberry','Blackberry Playbook','iPad','iPhone']; //SPA
var syncrep = ['none'];//SYNC
var tablrep = ['Android Tablet','Blackberry Playbook','iPhone','Windows 8']; //Tablets
var thinrep = ['All','Android','BB Non Touch- html5','Blackberry Basic -xhtnl','Blackberry - bjs','Blackberry Torch- html5','iPhone','Palm','Windows Phone 7','Windows Phone Mango']; //Thin Client
var toolrep = ['Push Notification','Scrapper','Simulator'];//Tools
var wraprep = ['Android','Android Tablet','Blackberry','Blackberry Playbook','iPad','iPhone']; //Wrapper

//this builds the dropdown list
Buildoptions = {
selected: function(value, name){
return '<option value="'+value+'" selected="selected">'+name+'</option>';
},
notselected: function(value, name){
return '<option value="'+value+'">'+name+'</option>';
},
clear: function(){
return '<option value=""></option>';
}
}
//goes through the selected array and builds the options
var makeSelection = function(theField, theArray) {
for ( x = 0; x < theArray.length; x = x + 2) {
console.log('makeing select ' + theArray)
if (x == 0)
$j(''+ theField +'').append(Buildoptions.selected(theArray[x], theArray[x + 1]));
else
$j(''+ theField +'').append(Buildoptions.notselected(theArray[x], theArray[x + 1]));
}
}
var hide = function(){
$j.each(arguments, function(i, item){
for(y = 0; y < item.length; y++){
$j(item[y]).hide();
}
}
);
}
//function to show a array of arrays
var show = function(){
$j.each(arguments, function(i, item){
for(y = 0; y < item.length; y++){
$j(item[y]).show();
}
}
);
}

//Customer Selection
var selectval = function(endUserselect){
//grab the value of the dropdown
var userSelection = $j('#ticket_fields_21114185').val();
switch (userSelection) {
case 'Desktop Web':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',dwebrep);
break;
case 'Desktop':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',dtoprep);
break;
case 'Hybrid':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',hybrep);
break;
case 'IDE':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',iderep);
break;
case 'Installer & Licensing':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',instrep);
break;
case 'KPNS':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',kpnsrep);
break;
case 'Middleware':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',midwrep);
break;
case 'Others':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',otherep);
break;
case 'Rich Client':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',richrep);
break;
case 'SPA':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',sparep);
break;
case 'SYNC':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',syncrep);
break;
case 'Tablets':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',tablrep);
break;
case 'Thin Client':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',thinrep);
break;
case 'Tools':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',toolrep);
break;
case 'Wrapper':
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
makeSelection('select#ticket_fields_21108325',wraprep);
break;
default:
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
hide(hideAll);
break;
}
}
$j("select#ticket_fields_21108325").html(Buildoptions.clear());
$j('#ticket_fields_21114185').change(selectval);


}
);

October 06, 2013 02:21
User photo
Jeremy
Zendesk

@Renato I would recommend emailing services@zendesk.com if you require further assistance with your custom widget. They can consult on such a project for you according to their billable rates. Checking custom code widgets is outside the scope of our community support.

October 09, 2013 17:18
User photo
xdoomx
mrpgroup

I'd like to create a drop down list in my widget that is styled and functions the same way as the standard lists do in Zendesk.

Desktop::Damage
Desktop::Connectivity
Laptop::Damage
Laptop::Connectivity
AV::Smartboard

What's the easiest way to create this in the sidebar widget?

October 16, 2013 09:13
User photo
xdoomx
mrpgroup

On selecting Desktop > Damage
- Populate ticket field xx with value 'Desktop'
- Populate ticket field yy with value 'Damage'
This part seems easy, I have tested setting ticket field values from the app successfully.

Ultimately the data source above is going to be dynamic and populated with data from a webservice. For now I just want to know how to create a nested dropdown with the same styling as Zendesk.

Guidance appreciated.

October 16, 2013 09:20
User photo
Matthew Kaminsky

Any tips on how to do this for someone with absolutely ZERO javascript experience?

October 17, 2013 02:17
User photo
Matthew Kaminsky

I want to create a drop down list of 4 different choices. Each of those choices will have a different description of text. When someone chooses one of these options from the drop down, I want the description for that text to appear.

Is this possible using this js code?

 

October 17, 2013 02:58
User photo
Avi Warner
Zendesk

@Matthew, if you're looking to do something like this w/o any javascript experience, you might be happier taking a look at our Formstack integration (http://www.formstack.com/integrations/zendesk). They have an easy interface for setting up really custom forms that can feed into Zendesk.

October 18, 2013 14:17
User photo
Langston
Zendesk

@Brandon: There's no easy way to do this. This would require extensive Javascript experience in order to implement.

Here's something that I found through a Google search which has an example of some of options that are populated:

http://www.w3schools.com/js/tryit.asp?filename=tryjs_putdropdown

Beyond the listings, you would need to figure out a way to capture the information so that it isn't lost every time that ticket is loaded. If it's going to be delivered somewhere, you would need to devise a way to offload it to an outside site or server.

Some of this should help you out.

October 28, 2013 11:55