ViewSettingsDialog

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.

Structure

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.

Responsive Behavior

ui5-view-settings-dialog stretches on full screen on phones.

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/ViewSettingsDialog.js";

Basic Sample

Properties

sortDescending

Description	Defines the initial sort order.
Type	boolean
Default	false

Slots

sortItems

Description	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";
Type	Array<SortItem>

filterItems

Description	Defines the filterItems list. Note: If you want to use this slot, you need to import used item: import "@ui5/webcomponents-fiori/dist/FilterItem.js";
Type	Array<FilterItem>

Events

confirm

Description	Fired when confirmation button is activated.
Type	CustomEvent<ViewSettingsDialogConfirmEventDetail>
Parameters	sortOrder: String The current sort 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). filters: Array The selected filters items.

cancel

Description	Fired when cancel button is activated.
Type	CustomEvent<ViewSettingsDialogCancelEventDetail>
Parameters	sortOrder: String The current sort 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). filters: Array The selected filters items.

before-open

Description	Fired before the component is opened. This event does not bubble.
Type	CustomEvent

Methods

show

Description	Shows the dialog.
Return type	void

setConfirmedSettings

Description	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:
Return type	void
Parameters	settings: VSDSettings predefined settings.

CSS Parts

No CSS parts available for this component.