Create a Custom Dropdown

How to create custom dropdown and the screen to add, edit, and delete the values in the dropdown.

Updated over a week ago

It is common to add a custom dropdown field to an existing table. A screen to edit the dropdown, however, needs to be created.

You can use the import tool to add and edit values in the dropdown table, however this method doesn't allow you to delete values.

This article will walk you through creating one screen to allow you to manage the table for a dropdown field so you can properly, add, edit, and delete values from this table.

You will be required to be familiar with customization, but we will walk you through all the steps.

Note: There are a few dropdown tables QuickBooks doesn't allow you to edit, for example, LeadStatus and EstimateStatus. At this time, you will be unable to customize these dropdowns.

This article is broken up into the following sections:

  1. Create the dropdown field

  2. Create the Screen

  3. Create Navigation Section

  4. Create Editable Grid

  5. Add Custom Dropdown to Stock Screen

In this scenario, we will create a custom dropdown field in the Opportunities table called ProjectType as an example.

1. Create the Custom Dropdown Field

To create the dropdown field, you will need to choose a table to add it to. For more information, please see our article on different field types.

1. Select the circular preferences icon in the upper right and click Account Settings.

2. In the Account Settings page, scroll down and click Tables & Fields.

3. This takes you to the Table List screen. Search for the table you want to add the dropdown to and then select it in the grid. In this example, we will search for and click the Opportunity table.

4. This will show all the fields of this table, which are a lot. At the bottom of the grid, click the button New Field.

5. Fill out the values for your new field.

  • Field Name: The name of the field. It cannot contain any spaces, or special characters.

  • Field Type: Choose Dropdown. This will open up other options to fill in.

  • Create field based on a new table: A dropdown field can be based on an existing table, or you can create a brand new table and pre-fill it with options. In our example, we have chosen this and filled it with values as shown in the below image.

6. Once you click Save, the field is created! Next up, we will create a screen to edit this table.

2. Create the Screen to Edit the Custom Dropdown Field

Since we have created a custom dropdown in the opportunity table, we will create the custom screen in the Opportunities App.

1. On the Opportunities App, select the vertical ellipsis ( ⋮ ) and then click Manage.

2. Click the box that says Create Screen.

3. Name your screen and choose the correct base table. In our example, we called it "New / Edit Project Type" and selected our dropdown table, ProjectType.

4. Click Create to open up the new screen in designer.

Next up, we will create navigation for this screen.

3. Create Navigation Section

It's important to have a user be able to go back to the previous screen, as well as save the data on the screen. This can be done in the navigation section at the top of the screen as found on most Method:CRM screens.

1. Click the word Section1 to edit the section's properties. (Make sure you don't click the row itself, but the header of the section.)

2. On the right, rename the caption to "SectionNav".

3. In SectionNavs properties, change its Top Padding and Bottom Padding to "1x"

4. Beside COLS, click the plus circle ⊕ to add a second column.

5. Click the large plus in the right panel to show all the available controls.

6. Drag in two text objects into the left and right column of SectionNav.

7. Select the first text object on the left and change its properties to:

  • Caption: Type in "Back"

  • Show icon: Check this option.

  • Button Icon: Select Chevron Left.

8. On the "Back" text object, select the down triangle ▼, and then select "Click". This will open up the Action Editor for this event.

9. Search for the action Go To Screen and select it to configure it.

10. For the Go To Screen action, select the "Back (Browser History)" option for Navigate to.

11. At the top, click Close to close the action editor.

12. Select the cell where the second text object is, and align it to the upper right. Make sure you select the cell itself, else Cell Alignment will not appear.

13. Select the second text object which is called "Text1". Change its Caption to "Update Grid" and feel free to give it an icon.

14. On the "Update Grid" text object, select the down triangle ▼, and then select "Click". This will open up the Action Editor for this event.

15. Search for the action Save All and select it.

16. This action requires no configuration, so click Close to close the action editor.

That's it! you've finished the editing the Navigation Section. Now for the grid that will edit the dropdown.

4. Create Editable Grid

1. Select the large plus in the right panel, and drag in another section below SectionNav. Select the new section and then call it "SectionGrid".

2. Click the large plus in the right panel again to drag in an Editable Grid into SectionGrid. The default settings are sufficient for this scenario, so there is no need to configure it.

3. Save and Close this screen! You're done customizing this screen!

Now that the screen is complete, we need a way to get to it!

5. Add Custom Dropdown to Stock Screen

We are going to add the dropdown to the Opportunities screen, however, we won't go into too much detail on how to configure the dropdown. For more information on dropdowns, see our article on dropdown controls.

1. Open up and view any opportunity in the opportunities app.

2. At the top, click the down arrow ( ⌄ ) beside the Opportunities screen title and then click Customize Screen.

3. Since this is a stock screen, you will need to Create a Copy of it. Remember, creating a copy of a stock screen gives you the power to alter it, but you will no longer see stock updates for the screen, so as not to overwrite your customizations.

4. On this copy of the New / Edit Opportunity screen, select the large plus in the right panel, and scroll down to find the ProjectType field under Fields. Do NOT choose ProjectType_RecordID.

5. You will need to decide where to put it on the screen. In this example, a new row was created within the secDetails3 section, and the ProjectType field was dragged into this row.

6. On ProjectType, select the down triangle ▼ and then select the Custom Row Click event. This will open up the action editor.

7. Search for and select the Go To Screen action.

8. For Navigate to, select the app Opportunities. Once selected, you will need to specify the screen, which is the New / Edit Project Type screen. Also, Clear the Screen and don't set a Screen Active RecordID. Put in an internal note that this goes to your new project types screen.

9. Close the Action List to go back to the designer.

10. Select the ProjectType field and in its properties in the right panel, change its caption so there is a space in between Project and Type.

11. Scroll down in its properties, and for Custom Row Text, type "Add / Edit Project Types".

10. You're done! Click Save and then Close the Designer screen.

On the New / Edit Opportunities screen, you will have a new dropdown called Project Type which has your custom dropdown field.

And when you select Add / Edit Project Types, you will get to your new screen which can add, edit, and delete options in this dropdown.

Make any changes you like and then click Update Grid to commit the changes.

Did this answer your question?