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 and follows an implicit-save flow. Setting saveMode replaces the footer with Save and Cancel buttons.