Introduction

Drop-down views 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.

Image Added

Drop-downs can be styled to suit your business requirements. In the below example, row styling has been configured on the view that can be seen in the drop-down, see 

Image Removed

View Setup

Create a view to use in the drop-down list. 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

1. Create a view containing the data you wish to display in your drop-down list
   Image Added
   

   Expand
   title How?
   Anchor CreateView CreateView This can be configured from your Insert excerpt _erd _erd nopanel true  by clicking on the table header, or from a screen that currently displays a view of the data, by right-clicking and choosing  Insert excerpt _show_table_configuration _show_table_configuration nopanel true . In the  Insert excerpt _tables _tables nopanel true 's  Insert excerpt _property_tabs _property_tabs nopanel true , expand the Views section Click  Insert excerpt _addIcon _addIcon nopanel true  to create a new view Give the view an appropriate name and press Insert excerpt _save _save nopanel true We recommend the view name is prefixed with DD_ to indicate it's for a drop-down In the View Attributes section, select the  Insert excerpt _attributes_icon _attributes_icon nopanel true  icon to open the Available Attributes selector Drag across the attributes you wish to see in the drop-down view into the View Attributes section on the  Insert excerpt _property_tabs _property_tabs nopanel true , then press OK (Optional) On

   the 

   the Insert excerpt _property_tabs _property_tabs name style nopanel true  for the new View, choose or create new styles

   as required

View Style Settings

In this example, we will create a number of new styles to achieve the below styling for our drop-down view.

Image Removed

1. For Grid Row Style, select the 

   , if required See Adding Styling to a Drop-Down View

   
   

2. Insert excerpt
   _

   addIcon

   pin _

   addIcon

   pin nopanel true

    icon to create a new style:

3. Name: GridRowHeight

4. Height: 20px

 either the table or drop-down view tab to keep it open
5. On a screen containing a

   Insert excerpt
   _

   finish

   grid _

   finish

   grid nopanel true

   For Grid Column Style, select the , click on the attribute header for the column where you want to display drop down fields
6. The View Attribute

   Insert excerpt
   _property_

   addIcon

   tabs _property_

   addIcon

   tabs nopanel true

    icon to create a new style:

7. Name: GridColumnBorderRight

8. Border: choose the Split border option

   1. For R:

      1. Enter 1px

      2. For the colour picker, enter the hex code #bdbdbd

      3. For the line, choose solid 

will open
9. On the

   Insert excerpt
   _

   finish

   property_tabs

   _finish

   _property_tabs name style nopanel true

   For Grid Alternate Row Style, select , untick Read Only
10. On the 

    Insert excerpt
    _property_

    addIcon

    tabs _

    addIcon

    property_tabs nopanel true

     icon to create a new style:

11. Name: GridAltRowColour

12. Fill: #e8e8e8

, drag across your drop-down view into the Selection View field, found in the Drop Down Settings section of the View Attribute properties
Image Added


13. Insert excerpt
    _

    finish

    save _

    finish

    save nopanel true

    For Row Selection Style, select the  the properties
14. Close and reopen the screen, then 

    Insert excerpt
    _

    addIcon

    lock _

    addIcon

    lock nopanel true

     icon to create a new style:

15. Name: RowSelectColour

Fill: #c27ba0 the screen to see the changes

Image Removed

Create a Drop-Down on a Form

1. On a screen, display your data using the default view in a

   Create a view containing the data you wish to display in your drop-down list
   Image Added

   Expand
   title How?
   See How? above.

   
   

2. Insert excerpt
   _

   grid

   pin _

   grid

   pin nopanel true

   Click on the attribute header - this should be the attribute that your new  either the table or drop-down view will be displayed forOn the View Attributes tab to keep it open
3. On a screen containing a

   Insert excerpt
   _

   property_tabs

   form _

   property_tabs

   form nopanel true

   fields, pin the tab to keep it openOpen the click on the drop-down field where you want to display the drop down
   1. If your field is not configured as a drop down, right-click it and choose 

      Insert excerpt
      _

   tables

   1. template_change _

   tables

   1. template_change nopanel true

   's 
   1. Select the Drop Down (Manual) template from the Serene Grey palette
4. The Drop Down

   Insert excerpt
   _property_tabs _property_tabs nopanel true

    and expand the View section will open
5. In the Basic Settings section of the View Attribute properties, make the following changes:
   1. Drag across your
   new view from the table properties
   1. drop-down view into the
   Selection
   1. View
   field (found in
   1. Name field
      Image Added
      
   2. In the Drop Down
   Settings section of the View Attribute properties)
   1. Value Field, enter the name of the attribute from your drop down view that you want to display in the field 
      Image Added
      

6. Insert excerpt
   _save _save nopanel true

    the properties
7. Close and reopen the screen, then 

   Insert excerpt
   _lock _lock nopanel true

    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.

Image Added

1. Follow the above steps to create a drop-down on a form
2. In the Drop-Down component properties, in the Mappings section,

   Insert excerpt
   _add _add nopanel true

   mappings to link the data and fields
   1. Assign each Form Field (field name on the screen) to a Drop Down Field (attribute name)
      
3. (Optional) For each field being updated dynamically, enabled Read Only in the 

   Insert excerpt
   _property_tabs _property_tabs name style nopanel true