Skip to main content

UserSettingsDialog

<ui5-user-settings-dialog> | Since 2.8.0

The ui5-user-settings-dialog is an SAP Fiori-specific web component used in the ui5-user-menu. It allows the user to easily view information and settings for an account.

ES6 Module Import

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

Basic Sample

Properties

headerText

DescriptionDefines the headerText of the item.
Typestring | undefined
Defaultundefined

open

DescriptionDefines, if the User Settings Dialog is opened.
Typeboolean
Defaultfalse

saveMode

DescriptionDefines whether the dialog offers Save and Cancel actions in its footer.
When true, the footer renders a Save (Emphasized) and a Cancel button instead of the default Close button. Save and Cancel each fire a corresponding event; the application is responsible for closing the dialog (typically after persisting or discarding the changes).
Typeboolean
Defaultfalse

showSearchField

DescriptionDefines if the Search Field would be displayed.
Note: By default the Search Field is not displayed.
Typeboolean
Defaultfalse

Slots

default

DescriptionDefines the user settings items.
Note: If no setting item is set as selected, the first one will be selected.
TypeArray<UserSettingsItem>

fixedItems

DescriptionDefines the fixed user settings items.
TypeArray<UserSettingsItem>

Events

before-close

DescriptionFired before the settings dialog is closed.
Note: This event is cancelable via preventDefault(), allowing the application to keep the dialog open — for example, to prompt the user about unsaved changes before dismissal.
TypeCustomEvent
BubblesNo
CancelableYes - via preventDefault()

cancel

DescriptionFired when the Cancel button in the footer is clicked. The dialog does not close automatically — the application is responsible for closing it after discarding the changes.
TypeCustomEvent
BubblesNo
CancelableNo

close

DescriptionFired when the settings dialog is closed.
TypeCustomEvent
BubblesNo
CancelableNo

open

DescriptionFired when the settings dialog is opened.
TypeCustomEvent
BubblesNo
CancelableNo

save

DescriptionFired when the Save button in the footer is clicked. The dialog does not close automatically — the application is responsible for closing it after persisting the changes.
TypeCustomEvent
BubblesNo
CancelableNo

selection-change

DescriptionFired when an item is selected.
TypeCustomEvent<UserSettingsItemSelectEventDetail>
Parametersitem: UserSettingsItem
The selected user settings item.
BubblesNo
CancelableYes - via preventDefault()

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

CSS Custom States

No CSS custom states available for this component.

More Samples

Save Mode

By default the dialog shows a single Close button in its footer and follows an implicit-save flow — changes are applied as the user interacts with each view.

Setting the saveMode property replaces the footer with Save (Emphasized) and Cancel buttons. Clicks fire the corresponding save and cancel events; the dialog does not close itself, so the application is responsible for persisting or discarding the changes and closing the dialog afterwards (typically after a successful backend call).