Creating a Screen to Manage a Custom Dropdown

It is common to add a custom dropdown field to an existing table. If you wish to edit the values of your custom dropdown, however, you will need to create a screen to add, edit, and delete these values. 

Using the import tool, you can add and edit values in the dropdown table. This will allow you to quickly make changes, but you will be unable to delete values. 

This document 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. 

Note: In this example, we will use a custom dropdown field in the Customer table called CustomerStatus. It will have created a table called CustomerStatus.

When going through the below steps, replace references to CustomerStatus with your own custom dropdown names and tables.

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.

1. Create the Screen

Where you create the screen is important because you will need to link to it later on. Considering this is a dropdown for the customer, we will add the screen to the Contacts App. You will choose an appropriate app to add the screen to.

  1. Click the vertical ellipsis () on the Contacts App and select Manage.
  2. Click Create Screen.
  3. For Screen Name*: "New / Edit Customer Status".
  4. For Base Table*: CustomerStatus.
  5. Click the blue Create button.

2. Create Navigation Links

You will be in the Design Mode for your New / Edit Customer Status Screen. The first thing we will do is add Navigation links so the user can return to the previous screen. 

  1. Click the word Section1 to edit its properties.
  2. On the right, rename the caption to "SectionNav".
  3. Scroll down and find the padding. Change the Top and Bottom Padding to 1x.
  4.  Select the '+' tab and then drag a Text control into SectionNav.
  5. Select the new text control you added in, and then, on the rith properties panel, change the input box Text to "Back".
  6. Check Show Icon
  7. For Button Icon, search and choose the icon Chevron Left.
  8. On the Back text control you created, select the down triangle (▼) to open up its contextual menu:
  9. From the menu, select the Click event. This will open a screen allowing you to give actions to this link when it is clicked.
  10. On the right, search for the "Go To Screen" action and when the action appears, click it.
  11.  For Navigate to, change it to Back (Browser History)
  12. In the upper-right corner of the Action Editor, click Close.

Done with a quick navigation. Let's go on to creating a grid to view the entries.

3. Create Grid to View CustomerStatus Records

Before we can edit or delete records in a table, we want to see them. We'll create a new section to hold this grid which will show the records in the table.

  1. Hit the '+' tab again to bring up the controls and drag in a brand new Section below SectionNav.
  2. Select this Section (by clicking its name) and give it a caption of "SectionMain".
  3. Scroll down and change its Top and Bottom Padding to "1x". 

This will give you a new section to drag a grid control in. Any control or field on screen must be inside a section. This new section will hold the grid and should look like this:

Let's create the grid which will show the records within CustomerStatus. 

  1. Hit the '+' tab for all the controls and drag in a Grid control into SectionMain.
  2. Select the Grid control and name its Caption to "GridCustomerStatus".
  3. Check Hide Settings.
  4. Check Hide Export.
  5. Expand Columns header and check Hide Column Headers.
  6. Expand Filters & Views and check Hide Search and Hide Advanced Search.

At the moment, our grid has no columns configured so it would show nothing. Let's configure that now.

  1. On the GridCustomerStatus control you created, select the down triangle (▼) to open up its contextual menu.
  2. Select Columns to open the Column Property Window
  3. Select ⊕ Add another column to bring up the fields on the right.
  4. Select the CustomerStatus field. This will add it to the Columns list:
  5. Click Close in the upper right corner. 

The grid is complete and will show all the records in the CustomerStatus table. Let's create the interface to add and edit a record!

4. Create New Section to Add and Edit Records

We are going to do something different here: we will add a section within a section! This will require some layout configuration, so follow along closely.

  1. In SectionMain, click the plus () beside COLS. This will split the section into two columns:
  2. Select the right cell by clicking in the right cell. Note this is different than selecting the whole section. By selecting the right cell, it will be highlighted:
  3. On the right properties, set Column Width to 60 and then make sure percent (%) is selected.
  4. At the top of the page, hit the blue Save button to save your work.

The new section will be embedded within SectionMain's cell. We changed its layout so 40% be dedicated to the grid, and 60% will be dedicated to this new section. Let's drag in the new section.

  1. Hit the '+' tab for all the controls and drag in a new Section into the right cell of SectionMain.
  2. Select the name of this new Section and name its caption SectionEdit
  3. Change SectionEdit's padding so its Left and Right padding is 2x, while its Top and Bottom padding are 1x
  4. Add a new row to SectionEdit by clicking the plus () beside ROWS. Note this is for the embedded section!

One final thing. This area will be used to edit the record. While inserting controls, you may have noticed you can add fields as well. This field is directly attached to the base table of this screen. This allows us to edit and create new records. 

  1. Hit the '+' tab for all the controls and scroll down to Fields.
  2. Find CustomerStatus field and drag it into the top row of SectionEdit.  Note the field is red and marked required
  3. Click Save at the top to save your work.

5. Create Save Button

The CustomerStatus field will allow a user to enter in a new status to save! All that's missing is the save button to allow it. We'll add it into the second row of SectionEdit.

  1. Select the second row of SectionEdit. This is where buttons will go so make sure you select the correct row:
  2. On the right under Cell Alignment, you will find arrows similar to a compass rose. Select the Right Arrow.
  3. Hit the '+' tab for all the controls and find the Button control and drag it into the second row. You will notice it is aligned to the right.
  4. Select the new Button and on the right, change the Button Text to "Save". 
  5. Check the Show Icon checkbox. 
  6. Under Button Icon, find and select the Save icon. 
  7. Scroll down, and underneath Style, you will find Background Color. Change the Background Color to Primary
  8. Click Save at the top of the screen to save your work.

The button is created, now it's time to put in the actions the button will do when a user clicks it!

  1. On the Save button you created, select the down triangle (▼) to open up its contextual menu.
  2. Select the Click event in the menu to bring up a new page of actions associated with it.
  3. On the right search, search for Save All and select it. 
  4. Click ⊕ Add new action and the search will appear on the right again. 
  5. Search for Clear Screen for New Entry and select it. Your action list will now look like:
  6. Click Close in the upper right corner to close this screen.

You now have the ability to create a new entry! Let's go onto editing an existing entry. 

6. Adding a Row Click to Edit a Record

To edit a record, the user should be able to click it in the grid list, and it will appear on the right within the CustomerStatus field. When the user hits the save button, it will update this record. We will return back to the GridCustomerStatus.

  1. On GridCustomerStatus, select the down triangle (▼) to open up its contextual menu.
  2. Select the Row Click event in the menu to bring up actions associated with it.
  3. On the right, search for and select Set Active Record ID For Screen.
  4. For Set This Active RecordID, open the dropdown and select GridCustomerStatus - RecordID.
  5. Click Close in the upper right corner to close this screen.

This will now allow the user to select a record in a row and it will load up on the screen. When they click save, it will update the record!

And now  to finally add the delete button, which is the main reason you're here. 

7. Adding a Delete Button

  1. Hit the '+' tab for all the controls and find the Button control and drag it into the second row, to the left of the Save button. 
  2. Select the new Button and on the right, change the Button Text to "Delete". 
  3. Change its Load State to Hidden!
  4. Check the Show Icon checkbox. 
  5. Under Button Icon, find and select the Delete icon. 
  6. Scroll down, and underneath Style, you will find Background Color. Change the Background Color to Alert
  7. Click Save at the top of the screen to save your work.

The button has been added but it doesn't do anything. Time to put in some actions to delete the record. 

  1. On the Delete button, select the down triangle (▼) to open up its contextual menu.
  2. From the menu, select the Click event to open the actions associated with this event.
  3. On the right, search for the "Delete Records From Table" action and when the action appears, click it. When configuring this action, it is vitally important to get these steps correct, because you don't want to delete something else!
  4. For Select a Table Name, choose CustomerStatus table.
  5. Select Open Criteria Builder and a new panel will open up in.
  6. Select ⊕ Add a condition.
  7. For the first dropdown, select RecordID.
  8. Do not change Is Equal in the second dropdown.
  9. For the third dropdown,  find and select Screen Active Record ID.
  10. We're done with this condition. Click < Back
  11. At the bottom for Internal Notes, type in "Delete Screen Active Record ID from CustomerStatus Table" to complete this action.
  12. On the left action list, ⊕ Add new action for a second action.
  13. Search for and select Clear Screen For New Entry action.
  14. On the left action list, ⊕ Add new action for a third action.
  15. Search for and select Refresh Control action.
  16. For Select a Control, choose the only option: GridCustomerStatus.
  17. For its Internal Notes, type in "GridCustomerStatus".
  18. Before clicking Close, verify you have the below three actions:

You've completed the Delete button! 

We still need to make it visible, though. 

8. Making the Delete Button Visible

The delete button was made invisible because we don't want it showing if people want to add an entry. How can you delete something that doesn't exist?

Thus, we are going to have the button be visible if and only if the user is currently editing a record. 

  1. Hit the page icon tab for all to edit the properties of the screen.
  2. Expand the header which says Actions.
  3.  Select Active Record Change to bring up an action list. 
  4. Search and select the action Conditional Statement.
  5. Select ⊕ Add a condition.
  6. For the first dropdown, search and select Screen Active Record ID.
  7. For the second dropdown, select Greater Than.
  8. For the third dropdown, select Number and keep the default of 0.  

Your conditional statement will look like this:

The next part is a bit tricky.

  1. In the action list on the left, hover over If...then and select the circle plus () to Add an action below:
  2. On the right, search for and select Show/Hide Controls action. 
  3. For Select A Control, choose the Delete Button, and keep the default of Show.
  4. For its Internal Notes, type in "Show Delete Button". 
  5. On the action list on the left, hover over else and select the circle plus () to Add an action below:
  6. On the right, search for and select Show/Hide Controls action again!
  7. For Select A Control, choose the Delete Button, and change it to Hide.
  8. For its Internal Notes, type in "Hide Delete Button". 
  9. Before you hit Close, make sure your action list looks like this:

We're done with the delete button! Before we get to testing this, we need to add a few more things.

9. Adding a Clear Button

Clear is useful if the user has been editing records, but wishes to clear the field to add in a new entry. 

  1. Hit the '+' tab for all the controls and find the Button control and drag it into the second row, to the left of the Delete button. 
  2. Select the new Button and on the right, change the Button Text to "Clear".
  3. Click Save at the top of the screen to save your work.

The Clear button is created, now it's time to put in the actions for this button when it gets clicked.

  1. On the Clear button you created, select the down triangle (▼) to open up its contextual menu.
  2. Select the Click event from the menu.
  3. On the right search, Clear Screen for New Entry and select it. Your action list will now look like:
  4. Click Close in the upper right corner. 
  5. Click the blue Close button at the top of the screen to exit designer mode! This should take you back to your Screens page for the app you're in. 

The screen is done!

The last problem we need to tackle is getting to this screen.

10. Navigating to this Screen

Currently, there is no way to get to this screen to test it or use it. Normally, one would create this as a clickable row in the dropdown itself.

For now, we are going to throw a clickable link on the Preferences Page of the Contacts App. Feel free to place your link where appropriate. 

  1. In the Screens page, find the Contact Preferences page and select Customize.
  2. It may prompt you to make a copy of the screen, which is fine. Select Create a copy.
  3. Where to place the text link may be the trickiest part. We'll place it right above the border. Hit the '+' tab for all the controls and find the Text control. Drag it to the bottom row of SectionLeft.
  4. Select the new control and change its Text to "Manage Customer Status".
  5. On the control, select the down triangle (▼) to open up its contextual menu and select the Click event.
  6. Search and add "Go to Screen" action. 
  7. For Navigate to, search for the App your screen is in: the Contacts app. 
  8. A second dropdown will pop up. Select the new screen we created: New / Edit Customer Status
  9. For Set a screen active record ID, select Clear Screen
  10. For the Internal Notes, type in "Go to New / Edit Customer Status".
  11. Before you Close this screen, your action should look like this:
  12. Click the blue Close button at the top of the screen to exit designer mode!

And that's it! Wow! You are done. Navigate to your new screen in your Preferences of your Contacts App and check it out!

Was this article helpful?

Can’t find what you’re looking for?

Contact Us