Instead of calling up filtering and sorting via two separate icons, sorting is to be included in the filter dialog in order to save space in the column headers - analogous to Excel. However, it should still be possible to deactivate sorting in a view of the application.
Improvement
The commands for sorting are now in the same dialog as the filter options and are displayed similar to a context menu. If the column is already sorted, the corresponding entry is highlighted. The dialog closes as soon as a sort is selected. \ \\ The icon to open the dialog changes depending on the state. It shows the current sorting state and also the filter state, as well as whether sorting or filtering is possible at all: \
\
Application
A BlockControl with the corresponding SortCommands is passed to PopupFilterDialogBuilder.createFilterDialogContent(TableFilterModel, DisplayContext, FormContext, BlockControl) to render it into the filter dialog. If BlockControl is null only the filter options are displayed in the dialog and the column is not filterable. \\ If a column is exclusively sortable, no dialog is created with the PopupFilterDialogBuilder, but a custom PopupDialogControl is created using the TableControl.OpenSortDialogAction.\.
By default, the filter and sort icons are Fontawesome icons whose color is based on the current font color. It can be adjusted with color in CSS. The following icons must be overridden in the theme-settings if changes are desired:
- Column is sortable: com.top_logic.layout.table.renderer.Icons.SORTABLE
- Column is sorted in descending order (not filterable): com.top_logic.layout.table.renderer.Icons.SORT_DESC
- Column is sorted in ascending order (not filterable): com.top_logic.layout.table.renderer.Icons.SORT_ASC
- Column is sorted in ascending order (filterable): com.top_logic.layout.table.renderer.Icons.SORT_ASC_SMALL
- Column is sorted in descending order (filterable):com.top_logic.layout.table.renderer.Icons.SORT_DESC_SMALL
- Icon for filter: com.top_logic.layout.table.renderer.Icons.FILTER
Also, FILTER_SORT_DIALOG_SORT_STATE can be overridden to change the color in which the current sort state is displayed in the dialog.\ The icons now have tooltips that indicate what they are doing and also indicate the current sort state (if sorted).\ Whether a column is sortable and/or filterable can be configured as before as well.
{{#!xml <column name="filterable column"
sortable="false"
/> <column name="sortable column"
filterProvider=""
/> <column name="not sortable or filterable column"
filterProvider=""
sortable="false"
/> <column name="sortable or filterable column"
<-- No specification required -->
/> }}}
Test
A table with all configurable columns and corresponding icons can be found at Technical Demo > Layout-Framework#1 > Tables > Filter and Sort-Icons. There you can check all states of the icon including the tooltips and also test their functions.
Code Migration
The following functions have got a new signature and have to be adapted:
- TableControl.getFilterActivateElementID(String) became TableControl.getColumnActivateElementID(String)
- DefaultTableRenderer.writeFilterTag(DisplayContext, TagWriter, RenderState, int) became DefaultTableRenderer.writeFilterSortTag(DisplayContext, TagWriter, RenderState, int)
- CellRef.filterButtonId() became CellRef.sortFilterButtonId()
- FilterDialogBuilder.createFilterDialogContent(TableFilterModel, DisplayContext, FormContext, Optional<BlockControl>) and the PopupFilterDialogBuilder and DummyFilterDialogBuilder implementations now also get an Optional<BlockControl> for the SortCommands. Can be empty, then no SortCommands are inserted and only a filter dialog is built.
- TableFilter.openFilterDialog(DisplayContext, PopupHandler, Optional<BlockControl>) has also received an Optional<BlockControl> that can be empty (in which case no SortCommands are added).
- DefaultTableRenderer.writeSortImage(DisplayContext, TagWriter, ThemeImage, String, String) now gets instead of TableControl, column index and two Boolean values a string with a CSS class to be used and a string with tooltip for the icon.