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.
Controls whether the Reset button is always enabled. By default, the Reset button is enabled only when the built-in settings (Sort, Filter, Group) differ from their initial state — the component can detect these changes automatically. However, when the dialog contains custom tabs, the component has no way to detect whether the custom tab content has been modified by the user. Set this property to true when the user has made changes inside a custom tab, so that the Reset button becomes enabled and the user can trigger a reset. Set it back to false once the custom tab content is back to its initial state (e.g. after the user confirms or after a reset is applied).
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: This event is particularly relevant when the dialog contains custom tabs. By default, the Reset button resets all built-in settings (sort, filter, group) to their initial values. However, the component has no knowledge of the content or state inside custom tabs — it cannot detect what has changed or what the "default" values are. Therefore, when this event is fired, it is the application developer's responsibility to listen for it and manually reset the custom tab content to its initial state.
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: