Instead of accessing filtering and sorting via two separate icons, sorting should be incorporated into the filter dialog to save space in the column headers—similar to Excel. However, it should still be possible to disable sorting in a specific view of the application.
Improvement
The sorting commands are now located in the same dialog as the filter options and are displayed similarly to a context menu. If the column is already sorted, the corresponding entry is highlighted in color. The dialog closes as soon as a sort order is selected. \\ \\ The icon for opening the dialog changes depending on its state. It displays the current sort status and filter status, as well as whether sorting or filtering is even possible: \\
\\
Usage
A BlockControl containing the corresponding SortCommands is passed to ` PopupFilterDialogBuilder.createFilterDialogContent(TableFilterModel, DisplayContext, FormContext, BlockControl) ` to render it in the filter dialog. If BlockControl is null, only the filter options are displayed in the dialog, and the column cannot be filtered. \\ If a column is sortable only, a dialog is not created using the PopupFilterDialogBuilder; instead, a separate PopupDialogControl is created using TableControl.OpenSortDialogAction.\\
By default, the filter and sort icons are Font Awesome icons whose color is based on the current text color. This can be customized using the `color` property 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
In addition, FILTER_SORT_DIALOG_SORT_STATE can be overridden to change the color used to display the current sort state in the dialog.\\ The icons now have tooltips that explain their function and also indicate the current sort state (if sorting is enabled).\\ Whether a column is sortable and/or filterable can be configured as before.
{{{#!xml <column name="filterable column"
sortable="false"
/> <column name="sortable column"
filterProvider=""
/> <column name="column that cannot be sorted or filtered"
filterProvider=""
sortable="false"
/> <column name="sortable or filterable column"
<-- No specification required -->
/> }}}
Test
A table listing all configurable columns and their corresponding icons can be found under Technical Demo > Layout Framework #1 > Tables > Filter and Sort Icons. There, you can review all states of the icons—including the tooltips—and test their functions.
Code Migration
The following functions have been given a new signature and must be updated:
- TableControl.getFilterActivateElementID(String) has become TableControl.getColumnActivateElementID(String)
- DefaultTableRenderer.writeFilterTag(DisplayContext, TagWriter, RenderState, int) has become DefaultTableRenderer.writeFilterSortTag(DisplayContext, TagWriter, RenderState, int)
- CellRef.filterButtonId() has become CellRef.sortFilterButtonId()
- FilterDialogBuilder.createFilterDialogContent(TableFilterModel, DisplayContext, FormContext, Optional<BlockControl>) and the implementations PopupFilterDialogBuilder and DummyFilterDialogBuilder now also accept an Optional<BlockControl> for the SortCommands. If it is empty, no SortCommands are inserted and only a filter dialog is created.
- TableFilter.openFilterDialog(DisplayContext, PopupHandler, Optional<BlockControl>) has also been given an Optional<BlockControl> that can be empty (in which case no SortCommands are added).
- DefaultTableRenderer.writeSortImage(DisplayContext, TagWriter, ThemeImage, String, String) now accepts, instead of a TableControl, a column index, and two Boolean values, a string containing the CSS class to be used and a string containing the tooltip for the icon.