Introduction

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

View Setup

Create a view to use in the drop-down list. This can be configured from your  ERD by clicking on the table header, or from a screen that currently displays a view of the data, by right-clicking and choosing  Show the Table Configuration.

1. In the  Table's  Properties tab, expand the Views section
2. Click  to create a new view
3. Give the view an appropriate name and press  Apply
4. In the View Attributes section, select the  icon to open the Available Attributes selector
5. Drag across the attributes you wish to see in the drop-down view into the View Attributes section on the  Properties tab, then press OK
6. On the  Styles tab 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.

1. For Grid Row Style, select the  icon to create a new style:

   1. Name: GridRowHeight

   2. Height: 20px

   3.  Apply and Close

2. For Grid Column Style, select the  icon to create a new style:

   1. Name: GridColumnBorderRight

   2. 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 

   3.  Apply and Close

3. For Grid Alternate Row Style, select the  icon to create a new style:

   1. Name: GridAltRowColour

   2. Fill: #e8e8e8

   3.  Apply and Close

4. For Row Selection Style, select the  icon to create a new style:

   1. Name: RowSelectColour

   2. Fill: #c27ba0

   3.  Apply and Close

5. For Grid Row Hover Style, select the  icon to create a new style:

   1. Name: GridRowHoverColour

   2. Fill: #daafc6

   3.  Apply and Close
6.  Apply and Close the new View

Add View to Drop-Down

1. On a screen, display your data using the default view in a  Grid
2. Click on the attribute header - this should be the attribute that your new drop-down view will be displayed for
3. On the View Attributes  Properties tab, pin the tab to keep it open
4. Open the  Table's  Properties tab and expand the View section
5. Drag across your new view from the table properties into the Selection View field (found in the Drop Down Settings section of the View Attribute properties)
6.  Apply the properties
7. Close and reopen the screen, then  Lock the screen to see the changes