Adding a Drop-Down
Introduction
Drop-downs can be added to grids or form fields on screens using a dedicated view. The below image shows a drop-down on a grid.
Drop-downs can be styled to suit your needs, including row colours, row heights and mouse-over colours, see Adding Styling to a Drop-Down View.
Create a Drop-Down on a Grid
Create a view containing the data you wish to display in your drop-down list
- Pin either the table or drop-down view tab to keep it open
- On a screen containing a Grid, click on the attribute header for the column where you want to display drop down fields
- The View Attribute Properties tab will open
- On the Styles tab, untick Read Only
- On the Properties tab, drag across your drop-down view into the Selection View field, found in the Drop Down Settings section of the View Attribute properties
- Apply the properties
- Close and reopen the screen, then Lock the screen to see the changes
Create a Drop-Down on a Form
Create a view containing the data you wish to display in your drop-down list
- Pin either the table or drop-down view tab to keep it open
- On a screen containing a Form fields, click on the drop-down field where you want to display the drop down
- If your field is not configured as a drop down, right-click it and choose Change Template
- Select the Drop Down (Manual) template from the Serene Grey palette
- The Drop Down Properties tab will open
- In the Basic Settings section of the View Attribute properties, make the following changes:
- Drag across your drop-down view into the View Name field
- In the Drop Down Value Field, enter the name of the attribute from your drop down view that you want to display in the field
- Drag across your drop-down view into the View Name field
- Apply the properties
- Close and reopen the screen, then Lock the screen to see the changes
Dynamically Update Form Fields After Drop-Down Selection
Multiple form fields can be dynamically updated depending on the option a user selects in a drop-down field. In the example below, a user selects a customer from the Customer Number drop down field and the fields, Customer First Name, Customer Last Name and Customer Email Address, are dynamically updated.
- Follow the above steps to create a drop-down on a form
- In the Drop-Down component properties, in the Mappings section, Add New mappings to link the data and fields
- Assign each Form Field (field name on the screen) to a Drop Down Field (attribute name)
- Assign each Form Field (field name on the screen) to a Drop Down Field (attribute name)
- (Optional) For each field being updated dynamically, enabled Read Only in the Styles tab