Dropdowns allows a user to choose from a unique list of options. In the below example image, we can choose from a list of our contacts.
The options a user can choose from a dropdown are defined by the contents of another table. When using a dropdown control, it will need to be attached to an existing table with unique record options.
Accessing value of a Dropdown
When a user has chosen an option in the dropdown, they can clear the option with the x icon that appears.
The dropdown object holds the value of the field used to uniquely identify the record in the dropdown table. For example, if the Contacts table is being used as a dropdown table, then its Record ID field will be used to identify the record chosen in the dropdown.
Having said that, when setting or getting the value of a dropdown, you do get two choices:
Dropdown - Display: This is the value of the first field chosen to display in the Columns when configuring the dropdown.
Dropdown - RecordID: The Record ID of the chosen option.
This value can be altered by using the Update Controls on Screen action. If set to a value that doesn't exist in the dropdown, the dropdown will not be updated.
Dropdown Properties
The dropdown has a number of unique properties, requiring setup unlike other objects.
Settings
Caption: The text label used for the dropdown and also identifies the dropdown within actions.
☑ Hide Caption: If labeling for your own information and don’t want the text to show in the live screen, check this box.
Load State: The default state of the control (regular/hidden/disabled).
Base Table: As mentioned above, the dropdown pulls its options from a table and this is set here. In our example, the base table is the Contacts table.
☑ Include Clear Option on mobile: Give the user the option to clear the selection when viewing on a mobile device.
Placeholder: Reminder text.E.g. “Select a contact...”
Default Text: This is the default choice for the dropdown. To ensure the correct one is selected, type in the choice's exact text or type in the Record ID.
Width: How wide should your control be in relation to its container.
Auto: object will be the width of the dropdown's text.
Fixed: assign the width of the object in pixels.
Full: object will be full width of the container it is in.
Custom Row Text: Initially, this is not viewable. However, when you add an action in the dropdown's Custom Row Click event, this option appears. See below.
Columns
Selecting Columns opens the Columns Properties Window as shown in the below image. This allows you to choose which fields from the base table are shown in the dropdown menu for each menu item.
In the above example, the Contacts table is being used as the base table, and its Name field is chosen to be displayed in the dropdown. By default, the RecordID field is hidden on desktop and mobile, so the dropdown will look like this:
However, you can add multiple fields. In the below example, the FullName (QuickBooks display name) and the Email was added to the Columns.
In this case, the dropdown will show more information for each option:
It also gives you the ability to format those columns based on a variety of criteria including width and how the data is displayed.
Filters & Views
This option opens a new screen that allows you to edit the Sorting and Criteria for displaying information for each menu item in the dropdown. The process and concept is the same as setting up the views for grids, except you can only have one view for a dropdown.
Validation Rules
As with most input controls, you can create validation rules to restrict a user's input. For more information, please see our article "Field Validation."
Style
Text Color: This only selects the color of the non-selected choices in the expanded dropdown menu. It has no effect on the text in the dropdown control.
Background Color: Set the background color of dropdown control. It does not affect the background color of the expanded dropdown menu.
Caption color/size/text alignment/font weight: Choose the color, size, alignment, and font weight of the text in dropdown's caption.
Actions / Events
The dropdown object has four events associated with it.
Change Event: Triggered when the user changes the selected value in the dropdown.
Focus Event: Triggered when the user moves the input cursor into the dropdown field, whether by the mouse or tabbing.
Lose Focus: Triggered when the user moves the cursor away off of the dropdown field.
Custom Row Click: Triggered when the user clicks the custom row as discussed below.
Custom Row Click Event
The custom row is the link in the first row of the dropdown. If you take a look at the image below, you will see ⊕ New Contact link within the first row of the dropdown.
This custom row only appears if:
Custom Row Click event has an action in it.
Custom Row Text is populated in the settings.
This does not appear until the Custom Row Click is populated.
Normally, a Go To Screen action is put in this event to navigate to a screen that lets you manage the records of the dropdown.