UI5 Web Components
Search

ViewSettingsDialog

v1.0.0-rc.16
@ui5/webcomponents-fiori
<ui5-view-settings-dialog>

Usage

Open ViewSettingsDialog 

		<ui5-view-settings-dialog>
			<ui5-sort-item slot="sortItems" text="Name" selected></ui5-sort-item>
			<ui5-sort-item slot="sortItems" text="Position"></ui5-sort-item>
			<ui5-sort-item slot="sortItems" text="Company"></ui5-sort-item>
			<ui5-sort-item slot="sortItems" text="Department"></ui5-sort-item>
	
			<ui5-filter-item slot="filterItems" text="Position">
				<ui5-filter-item-option slot="values" text="CTO"></ui5-filter-item-option>
				<ui5-filter-item-option slot="values" text="CPO"></ui5-filter-item-option>
				<ui5-filter-item-option slot="values" text="VP"></ui5-filter-item-option>
			</ui5-filter-item>
			<ui5-filter-item slot="filterItems" text="Department">
				<ui5-filter-item-option slot="values" text="Sales"></ui5-filter-item-option>
				<ui5-filter-item-option slot="values" text="Management"></ui5-filter-item-option>
				<ui5-filter-item-option slot="values" text="PR"></ui5-filter-item-option>
			</ui5-filter-item>
			<ui5-filter-item slot="filterItems" text="Location">
				<ui5-filter-item-option slot="values" text="Walldorf"></ui5-filter-item-option>
				<ui5-filter-item-option slot="values" text="New York"></ui5-filter-item-option>
				<ui5-filter-item-option slot="values" text="London"></ui5-filter-item-option>
			</ui5-filter-item>
			<ui5-filter-item slot="filterItems" text="Reports to">
				<ui5-filter-item-option slot="values" text="CTO"></ui5-filter-item-option>
				<ui5-filter-item-option slot="values" text="CPO"></ui5-filter-item-option>
				<ui5-filter-item-option slot="values" text="VP"></ui5-filter-item-option>
			</ui5-filter-item>
		</ui5-view-settings-dialog>
		<script>
			let vsdResults = document.getElementById("vsdResults");
			btnOpenDialog1.addEventListener("click", ()=> {
				vsdResults.innerHTML = "";
				vsd1.show();
			});

			vsd1.addEventListener("confirm", function(evt) {
				vsdResults.innerHTML = JSON.stringify(evt.detail);
			});
		</script>

Overview

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";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
sortDescending
sort-descending
boolean
false
Defines the initial sort order.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
filterItems
HTMLElement [0..n]
Defines the filterItems list. Note: If you want to use this slot, you need to import used item: import "@ui5/webcomponents-fiori/dist/FilterItem";
sortItems
HTMLElement [0..n]
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";

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
before-open
Fired before the component is opened. This event does not bubble.
cancel
Fired when cancel button is activated.
sortOrder
type: String
description: The current sort order selected.
sortBy
type: String
description: The currently selected ui5-sort-item text attribute.
sortByItem
type: HTMLElement
description: The currently selected ui5-sort-item.
sortDescending
type: Boolean
description: The selected sort order (true = descending, false = ascending).
filterItems
type: Array
description: The selected filters items.
confirm
Fired when confirmation button is activated.
sortOrder
type: String
description: The current sort order selected.
sortBy
type: String
description: The currently selected ui5-sort-item text attribute.
sortByItem
type: HTMLElement
description: The currently selected ui5-sort-item.
sortDescending
type: Boolean
description: The selected sort order (true = descending, false = ascending).
filterItems
type: Array
description: The selected filters items.

Methods

This Web Component exposes public methods. You can invoke them directly on the Web Component instance.

Name
Description
setConfirmedSettings
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 need to set its initial settings. The ui5-view-settings-dialog throws an event called "before-open", this can be used as trigger point. The object should have the following format: {sortOrder: "Ascending", sortBy: "Name", filters: [{"Filter 1": ["Some filter 1", "Some filter 2"]}, {"Filter 2": ["Some filter 4"]}]}
settings
type: Object
description: predefined settings.
show
Shows the dialog.

SortItem

Overview

Usage

For the ui5-sort-item

ES6 Module Import

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

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
selected
boolean
false
Defines if the component is selected.
text
string
""
Defines the text of the component.

FilterItem

Overview

Usage

For the ui5-filter-item

ES6 Module Import

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

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
additionalText
additional-text
string
""
Defines the additional text of the component.
text
string
""
Defines the text of the component.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
values
sap.ui.webc.fiori.IFilterItemOption [0..n]
Defines the values list.

FilterItemOption

Overview

Usage

For the ui5-filter-item-option

ES6 Module Import

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

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
selected
boolean
false
Defines if the component is selected.
text
string
""
Defines the text of the component.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel