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

open

Description	Indicates if the dialog is open.
Type	boolean
Default	false
Since	2.0.0

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

open

Description	Fired after the dialog is opened.
Type	CustomEvent
Since	2.0.0

close

Description	Fired after the dialog is closed.
Type	CustomEvent
Since	2.0.0

Methods

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.