Versions Compared

Version Old Version 2 New Version Current
Changes made by

Zoe Baldwin

Zoe Baldwin

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Insert excerpt
_Banners
_Banners
namescreen
nopaneltrue

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 Insert excerpt_erd_erdnopaneltrue 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_configurationnopaneltrue.In the  Insert excerpt_tables_tablesnopaneltrue's  Insert excerpt_property_tabs_property_tabsnopaneltrue, expand the Views sectionClick  Insert excerpt_addIcon_addIconnopaneltrue to create a new viewGive the view an appropriate name and press Insert excerpt_save_savenopaneltrueIn the View Attributes section, select the  Insert excerpt_attributes_icon_attributes_iconnopaneltrue icon to open the Available Attributes selectorDrag across the attributes you wish to see in the drop-down view into the View Attributes section on the  Insert excerpt_property_tabs_property_tabsnopaneltrue, then press OKOn the  Insert excerpt_property_tabs_property_tabsnamestylenopaneltrue for the new View, choose or create new styles as required

For creating drop-downs, see Adding a Drop-Down.

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 

    Insert excerpt
    _addIcon
    _addIcon
    nopaneltrue
     icon to create a new style:

    1. Name: GridRowHeight

    2. Height: 20px

    3. Insert excerpt
      _finish
      _finish
      nopaneltrue

  2. For Grid Column Style, select the 

    Insert excerpt
    _addIcon
    _addIcon
    nopaneltrue
     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. Insert excerpt
      _finish
      _finish
      nopaneltrue

  3. For Grid Alternate Row Style, select the 

    Insert excerpt
    _addIcon
    _addIcon
    nopaneltrue
     icon to create a new style:

    1. Name: GridAltRowColour

    2. Fill: #e8e8e8

    3. Insert excerpt
      _finish
      _finish
      nopaneltrue

  4. For Row Selection Style, select the 

    Insert excerpt
    _addIcon
    _addIcon
    nopaneltrue
     icon to create a new style:

    1. Name: RowSelectColour

    2. Fill: #c27ba0

    3. Insert excerpt
      _finish
      _finish
      nopaneltrue

  5. For Grid Row Hover Style, select the 

    Insert excerpt
    _addIcon
    _addIcon
    nopaneltrue
     icon to create a new style:

    1. Name: GridRowHoverColour

    2. Fill: #daafc6

    3. Insert excerpt
      _finish
      _finish
      nopaneltrue
  6. Insert excerpt
    _finish
    _finish
    nopaneltrue
     the new View

Add View to Drop-Down

On a screen, display your data using the default view in a Insert excerpt_grid_gridnopaneltrue
  • Click on the attribute header - this should be the attribute that your new drop-down view will be displayed for
    • On the View Attributes  Insert excerpt_property_tabs_property_tabsnopaneltrue, pin the tab to keep it openOpen the  Insert excerpt_tables_tablesnopaneltrue's  Insert excerpt_property_tabs_property_tabsnopaneltrue and expand the View section
  • 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)
    • Insert excerpt_save_savenopaneltrue the propertiesClose and reopen the screen, then  Insert excerpt_lock_locknopaneltrue the screen to see the changes