Dependent Drop-Downs: Setup and Customization

Last Updated -


Important Note: Dependent drop-downs are not supported within the iOS and Android Apps.

To better organize and highlight your products and services offers Dependent Drop-Downs, a feature that allows agents and customers to identify the products they are looking for by drilling down into specific lists.

When users select a value from the first list, only a predefined subset of the second list will be displayed.

You can add Dependent Drop-Downs to your agent console, website, or customer contact forms. With some minor coding revisions you can even customize your Dependent Drop-Downs. 

Dependent Drop-Downs in the Next Gen Case Layout: Using Dependent Drop-Downs in your case layout is a great way to capture customer data! This article will show you how.


Table of Contents

Admin Setup
Web Portal Email Form
Making Fields Required

Admin Setup

Let's get started setting up Dependent Drop-Downs. As an example we'll build drop downs for a familiar suite of products: mobile phones. 
  1. Log into your account and go to Admin>Cases>Cases>Custom Fields.
  2. You will be directed to a page with two sub-tabs: Custom Fields and Dependencies.
  3. Under Custom Fields, click 'Add Custom Field' to continue.

  1. In the Edit Case Custom Field, add the Name and Key. In this example we'll name it 'Mobile Operating System.'
  2. Select 'List' from the Data Type drop-down.
Note: The List type is the only Custom Field available for Dependent Drop-Downs.
  1. Select the Custom Text radio button for the Default Value.
  2. Click the '+' button to add your list of Mobile Operating Systems (e.g., iOS, Android) to the Data window.
  3. Click 'Update' and you will be returned to the Custom Fields list. 
  4. Repeating the previous steps, we'll add a second Custom Field. This time we'll name the field 'Manufacturer.'
  5. Add a list of Manufacturers (e.g., Apple, Samsung, HTC) to the Data window, then click 'Update.'

Next, let's create Dependencies. This is where you make decisions about primary (Controlling Field) and secondary (Dependent Field) relationships in your drop-down lists. The Dependent Drop-Down hierarchy is such that a parent (Controlling Field) can have multiple children and a child (Dependent Field) can only have one parent. For this example we'll make Mobile Operating System the Controlling Field and Manufacturer the Dependent Field.

  1. Go to the Dependencies sub-tab and click 'Add Dependency.'
  2. In the Add Dependency window, select 'Mobile Operating System' from the Controlling Field drop-down and 'Manufacturer' from the Dependent Field drop-down.

  1. Click 'Add.'
  2. Now you will see the displayed relationship between your Controlling Field (Mobile Operating System) and Dependent Field (Manufacturer). Click in the boxes to add checks where you want to correlate the OS with the Manufacturer. 

  1. Click 'Save' when you are done. 
  2. To activate the Dependent Drop-Down you've created, toggle it to the 'on' position.

Note: You can edit these lists at any time. Click the pencil icon in the Custom Fields sub-tab and make your revisions.

Dependent Drop-Down Customization: Web Portal Email Form

In this section we'll go over customizing Dependent Drop-Downs for your Web portal.

Web Portal Email Form

To add Dependent Drop-Downs to your email forms:
  1. Go to: Admin>Channels>Web Theme
  2. Select 'Add Theme.' 
  3. Give the Theme a name and click 'Add.'
  4. Open the Advanced Theme sub-tab, then select Email (New) in the left-hand navigation.
  5. You can add your Dependent Drop-Down code above or below any of the fields in the email form. In this example, we'll add the block of code so that the drop downs appear between the Email Address field and Subject field on the email form.

Here is the raw code for this specific example:

  1. When you're done, click 'Update.'
  2. Now let's go over to your Web portal. Click 'Email Us' to see your newly customized email form. As we can see, our drop-downs have been inserted between Your email address and the Subject line. Selecting an option from Mobile Operating System will open the Manufacturer list. Selecting a manufacturer will open the Mobile Phone Model drop-down.


Making Fields Required

To make a field required, first give each dependent-dropdown div a unique class.



Then, add a bit of required logic to the bottom of your form code: