Skip to main content

ViewSettingsDialog

<ui5-view-settings-dialog> | Since 1.0.0-rc.16

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

open​

DescriptionIndicates if the dialog is open.
Typeboolean
Defaultfalse
Since2.0.0

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.
BubblesYes
CancelableNo

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.
BubblesYes
CancelableNo

before-open​

DescriptionFired before the component is opened.
TypeCustomEvent
BubblesYes
CancelableYes - via preventDefault()

open​

DescriptionFired after the dialog is opened.
TypeCustomEvent
Since2.0.0
BubblesYes
CancelableNo

close​

DescriptionFired after the dialog is closed.
TypeCustomEvent
Since2.0.0
BubblesYes
CancelableNo

Methods​

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.