List

List Controller

Displays a list of records of a data view, with options for grouping, filtering, viewing, editing and deleting records.

The List controller inherits from the BorderPanel, and by default it renders a built-in filter panel in its north region and a GridPanel in its center region. You can add other controllers in the other regions or override the center region if you want to add to or replace the grid with something else (say, a ChartPanel or the forthcoming MultiCardPanel. Currently you cannot override the north region if you use filters (see below).

Here is an example that display a grid and a chart inside an AccordionPanel:

Type: Data
Controller: List
  CenterController: AccordionPanel
    SubViews:
      Controller: GridPanel
        AllowClose: False
        ShowHeader: True
        ...
      Controller: ChartPanel
        AllowClose: False
        ShowHeader: True
        ...

Please note that you must set ShowHeader to True if you are using an AccordionPanel. Setting AllowClose to False is not required but usually preferred, as there's currently no way to reopen a closed tab or accordion subpanel.

For a different display, you could replace the AccordionPanel with a TabPanel and have the grid and chart in separate tabs. Or you could leave the grid (as per the default setting) in the center region and add the chart at the right:

Type: Data
Controller: List
  EastController: ChartPanel
    ...

Filters

Filters allow the user to apply search predicates to lists of records. The Filters/Items node has a set of subnodes, each of which represents a filter of a specified type. Each filter renders a user interface (a search box, a combo box, a set of buttons, etc.) and can build a Boolean SQL filter expression. Expressions are concatenated through a Connector (which can be "and" or "or" - default: "and").

Filter types are pluggable. Here is a list of current filter types provided with Kitto:

• List: Displays a drop-down list of options, each of which has an associated expression which is used as the user selects the corresponding option.
• ButtonList: A set of buttons, each of which has an associated expression. The user can push multiple buttons, in which case expressions are combined through a specified Connector (default: "or").
• FreeSearch: A free search box. Whether to search in one or multiple fields, and the type of search, depend on the Expression. The search is triggered when the user blurs the box (by hitting tab) or types in enough characters; the minimum can be set through the AutoSearchAfterChars parameter.
• DynaList: A dynamic drop-down list, generated by a SQL select statement.
• DynaButtonList: A dynamic set of buttons, generated by a SQL select statement.
• DateSearch: Displays a drop-down calendar with an associated expression

Example of ButtonList filter:

Filters:
  DisplayLabel: Girls Filter
  Connector: and
  Items:
    ButtonList: Hair Color
      Items:
        All: All
          Expression: 1 = 1
          IsDefault: True
        Blond: Blond
          Expression: HAIR.HAIR_COLOR = 'Blond'
        Walnut: Walnut
          Expression: HAIR.HAIR_COLOR = 'Walnut'
        Black: Black
          Expression: HAIR.HAIR_COLOR = 'Black'
        Silver: Silver
          Expression: HAIR.HAIR_COLOR = 'Silver'
        Red: Red
          Expression: HAIR.HAIR_COLOR = 'Red'

Example of DynaList filter:

Filters:
  DisplayLabel: Choose Mom
  Items:
    DynaList: Mom
      # CommandText - mandatory - must select the value field and
      # the display field as the first two fields.
      CommandText: |
        select GIRL_ID, GIRL_NAME  
        from GIRL    {query}
        order by GIRL_NAME
      # ExpressionTemplate - mandatory - should contain a {value} placeholder
      # for the value field selected by the CommandText.
      ExpressionTemplate: DOLL.MOM_ID = '{value}'
      # QueryTemplate - mandatory to allow incremental search - should contain '{queryValue}%' - 
      # it will be copied in {query} placeholder of Expression Template 
      QueryTemplate: where GIRL_NAME like '{queryValue}%'
      # AutoCompleteMinChars: not mandatory - default is 4 characters - number of characters before incremental search starts
        AutoCompleteMinChars: 1
      # Combo width - not mandatory
        Width: 30

Example of DynaList filter with a where condition:

Filters:
  DisplayLabel: Choose employee
  Items:
      DynaList: Employee
        CommandText: |
          select EMPLOYEE_ID, EMPLOYEE_NAME
            from EMPLOYEE
            where EMPLOYEE_ID in (%Auth:ALLOWED_USERS%)    {query}
            order by EMPLOYEE_NAME
        ExpressionTemplate: {Q}EMPL like '{value}'
        QueryTemplate: and EMPLOYEE_NAME like '{queryValue}%'

Filters are applied to all contained controllers linked to the same ViewTable, meaning that if you have for example a grid and a chart, both are filtered and refreshed when you change filter criteria in the user interface.

Customize Layout of filters

Filters layout can be organized in colums. Simply add a ColumnBreak node to force column layout. You can also specify width of search items and width of space for labels.

Example of a complex filter with column layout:

  Filters:
    DisplayLabel: Types
    LabelWidth: 90
    Connector: and
    Items:
      FreeSearch: Description
        ExpressionTemplate: (UPPER(Activity.Description) like UPPER('%{value}%'))
      DynaList: Activity Type
        Width: 20
        CommandText: |
          select first 1 '%' TYPE_ID, '(All)' TYPE_NAME from kitto_users
            union all
          select TYPE_ID, TYPE_NAME from ACTIVITY_TYPE 
            order by 2
        ExpressionTemplate: Activity.TYPE_ID like '{value}'
      ColumnBreak:
        LabelWidth: 50
      DateSearch: From
        ExpressionTemplate: ACTIVITY_DATE >= '{value}'
      DateSearch: To
        ExpressionTemplate: ACTIVITY_DATE <= '{value}'
      ColumnBreak:
        LabelWidth: 80
      List: Period
        Items:
          Today: Today
            Expression: (ACTIVITY_DATE > %DB.CURRENT_DATE%-1)
          LastWeek: Last Week
            Expression: (ACTIVITY_DATE <= %DB.CURRENT_DATE%) and (ACTIVITY_DATE >= %DB.CURRENT_DATE% - 7)
          CurrMonth: Current Month
            Expression: |
              EXTRACT(month FROM ACTIVITY_DATE) = EXTRACT(month FROM %DB.CURRENT_DATE%) 
              and EXTRACT(year FROM ACTIVITY_DATE) = EXTRACT(year FROM %DB.CURRENT_DATE%)                
          CurrYear: Current Year
            Expression: EXTRACT(year FROM ACTIVITY_DATE) = EXTRACT(year FROM %DB.CURRENT_DATE%)
          All: Whole Archive
            Expression: 1=1
            IsDefault: True
      FreeSearch: Last N Days
        ExpressionTemplate: ACTIVITY_DATE >= (getDate() - {value})

See the documentation for GridPanel, ChartPanel and other data panels for more details