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.

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 How-to Add Styling to a Drop-Down View.

Image Added

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
   

   For Grid Row Style, select the 

   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 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 On 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. See How-to Add Styling to a Drop-Down View

   
   

2. Insert excerpt
   _

   addIcon

   pin _

   addIcon

   pin nopanel true

    icon to create a new style:

3. Name: GridRowHeight

Height: 20px either the table or drop-down view tab to keep it open
4. 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
5. The View Attribute

   Insert excerpt
   _property_

   addIcon

   tabs _property_

   addIcon

   tabs nopanel true

    icon to create a new style:

6. Name: GridColumnBorderRight

7. 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
8. On the

   Insert excerpt
   _

   finish_finishnopaneltrueFor Grid Alternate Row Style, select the  Insert excerpt_addIcon_addIconnopaneltrue icon to create a new style:

9. Name: GridAltRowColour

10. Fill: #e8e8e8

Insert excerpt_finish_finish

property_tabs _property_tabs name style nopanel true

For Row Selection Style, select , untick Read Only
11. On the 

    Insert excerpt
    _

    addIcon

    property_tabs _

    addIcon

    property_tabs nopanel true

     icon to create a new style:

12. Name: RowSelectColour

Fill: #c27ba0, 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 Grid Row Hover 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: GridRowHoverColour

16. Fill: #daafc6

Insert excerpt_finish_finishnopaneltrue the screen to see the changes

Create a Drop-Down on a Form

1. 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
   _

   finish

   pin _

   finish

   pin nopanel true

    the new View

Image Removed

1.  either the table or drop-down view tab to keep it open
2. On a screen , display your data using the default view in containing a

   Insert excerpt
   _

   grid

   form _

   grid

   form nopanel true

   Click fields, click on the attribute header - this should be the attribute that your new drop-down view will be displayed forOn the View Attributes 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
      _

   property

   1. template_

   tabs

   1. change _

   property

   1. template_

   tabs_tablesnopaneltrue's 

   1. change nopanel true

   , pin the tab to keep it openOpen the  Insert excerpt_tables
   1. Select the Drop Down (Manual) template from the Serene Grey palette
3. The Drop Down

   Insert excerpt
   _property_tabs _property_tabs nopanel true

    and expand the View section will open
4. Drag across your new view from the table properties drop-down view into the Selection View Name field (, found in the Drop Down Basic Settings section of the View Attribute properties)
   Image Added
   

5. Insert excerpt
   _save _save nopanel true

    the properties
6. Close and reopen the screen, then 

   Insert excerpt
   _lock _lock nopanel true

    the screen to see the changes