The ui5-view-settings-dialog component helps the user to sort data within a list or a table.
It consists of several lists like Sort order which is built-in and Sort By and Filter By lists,
for which you must be provide items(ui5-sort-item & ui5-filter-item respectively)
These options can be used to create sorters for a table.
The ui5-view-settings-dialog interrupts the current application processing as it is the only focused UI element and
the main screen is dimmed/blocked.
The ui5-view-settings-dialog is modal, which means that user action is required before returning to the parent window is possible.
A ui5-view-settings-dialog consists of a header, content, and a footer for action buttons.
The ui5-view-settings-dialog is usually displayed at the center of the screen.
The ViewSettingsDialog supports custom tabs alongside the built-in Sort, Filter, and Group tabs. Use the ui5-view-settings-dialog-custom-tab component in the customTabs slot to add application-specific settings with any content.
Defines whether the Reset button is always enabled. Note: By default, the Reset button is only enabled when the dialog settings differ from their initial state. Set this property to true to keep the Reset button always enabled, which is useful when working with custom tabs whose internal state changes cannot be detected by the component.
Defines custom tabs for the dialog. The custom tabs are rendered after the built-in tabs (Sort, Filter, Group). Note: If you want to use this slot, you need to import the item: import "@ui5/webcomponents-fiori/dist/ViewSettingsDialogCustomTab.js";
Defines the list of items against which the user could group data. Note: If you want to use this slot, you need to import used item: import "@ui5/webcomponents-fiori/dist/GroupItem.js";
Defines the list of items against which the user could sort data. Note: If you want to use this slot, you need to import used item: import "@ui5/webcomponents-fiori/dist/SortItem.js";
filters: Array The selected filters items. groupBy: String The currently selected ui5-group-item text attribute. groupByItem: HTMLElement The currently selected ui5-group-item. groupDescending: Boolean The selected group order (true = descending, false = ascending). groupOrder: String The current group order selected. sortBy: String The currently selected ui5-sort-item text attribute. sortByItem: HTMLElement The currently selected ui5-sort-item. sortDescending: Boolean The selected sort order (true = descending, false = ascending). sortOrder: String The current sort order selected.
filters: Array The selected filters items. groupBy: String The currently selected ui5-group-item text attribute. groupByItem: HTMLElement The currently selected ui5-group-item. groupDescending: Boolean The selected group order (true = descending, false = ascending). groupOrder: String The current group order selected. sortBy: String The currently selected ui5-sort-item text attribute. sortByItem: HTMLElement The currently selected ui5-sort-item. sortDescending: Boolean The selected sort order (true = descending, false = ascending). sortOrder: String The current sort order selected.
Fired when the Reset button is clicked. Note: Use this event to reset the state of custom tab content, as the component cannot detect changes within custom tabs.
Sets a JavaScript object, as settings to the ui5-view-settings-dialog. This method can be used after the dialog is initially open, as the dialog needs to set its initial settings. The ui5-view-settings-dialog throws an event called "before-open", which can be used as a trigger point. The object should have the following format: