Skip to main content

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​

DescriptionDefines the initial sort order.
Typeboolean
Defaultfalse

Slots​

sortItems​

DescriptionDefines 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";
TypeArray<SortItem>

filterItems​

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

Events​

confirm​

DescriptionFired when confirmation button is activated.
TypeCustomEvent<ViewSettingsDialogConfirmEventDetail>
ParameterssortOrder: 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​

DescriptionFired when cancel button is activated.
TypeCustomEvent<ViewSettingsDialogCancelEventDetail>
ParameterssortOrder: 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​

DescriptionFired before the component is opened. This event does not bubble.
TypeCustomEvent

Methods​

show​

DescriptionShows the dialog.
Return typevoid

setConfirmedSettings​

DescriptionSets 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 typevoid
Parameterssettings: VSDSettings
predefined settings.

CSS Parts​

No CSS parts available for this component.