@ui5/webcomponents

UI5 Web Components - Main

Provides general purpose UI building blocks such as buttons, labels, inputs and popups.

Provided components

Web Component	Tag name	Module import
Avatar	ui5-avatar	import "@ui5/webcomponents/dist/Avatar.js";
Avatar Group	ui5-avatar-group	import "@ui5/webcomponents/dist/AvatarGroup.js";
Tag	ui5-tag	import "@ui5/webcomponents/dist/Tag.js";
Bar	ui5-bar	import "@ui5/webcomponents/dist/Bar.js";
Breadcrumbs	ui5-breadcrumbs	import "@ui5/webcomponents/dist/Breadcrumbs.js";
Breadcrumbs Item	ui5-breadcrumbs-item	comes with ui5-breadcrumbs
Tag	ui5-tag	import "@ui5/webcomponents/dist/Tag.js";
Busy Indicator	ui5-busy-indicator	import "@ui5/webcomponents/dist/BusyIndicator.js";
Button	ui5-button	import "@ui5/webcomponents/dist/Button.js";
Calendar	ui5-calendar	import "@ui5/webcomponents/dist/Calendar.js";
Calendar Date	ui5-calendar-date	comes with ui5-calendar
Card	ui5-card	import "@ui5/webcomponents/dist/Card.js";
CardHeader	ui5-card-header	import "@ui5/webcomponents/dist/CardHeader.js";
Carousel	ui5-carousel	import "@ui5/webcomponents/dist/Carousel.js";
Checkbox	ui5-checkbox	import "@ui5/webcomponents/dist/CheckBox.js";
Color Palette	ui5-color-palette	import "@ui5/webcomponents/dist/ColorPalette.js";
Color Palette Item	ui5-color-palette-item	comes with ui5-color-palette
Color Palette Popover	ui5-color-palette-popover	comes with ui5-color-palette-popover
Color Picker	ui5-color-picker	import "@ui5/webcomponents/dist/ComboPicker.js";
ComboBox	ui5-combobox	import "@ui5/webcomponents/dist/ComboBox.js";
ComboBox Item	ui5-cb-item	comes with ui5-combobox
ComboBox Group Item	ui5-cb-group-item	comes with ui5-combobox
Date Picker	ui5-date-picker	import "@ui5/webcomponents/dist/DatePicker.js";
Date Range Picker	ui5-daterange-picker	import "@ui5/webcomponents/dist/DateRangePicker.js";
Date Time Picker	ui5-datetime-picker	import "@ui5/webcomponents/dist/DateTimePicker.js";
Dialog	ui5-dialog	import "@ui5/webcomponents/dist/Dialog.js";
File Uploader	ui5-file-uploader	import "@ui5/webcomponents/dist/FileUploader.js";
Icon	ui5-icon	import "@ui5/webcomponents/dist/Icon.js";
Input	ui5-input	import "@ui5/webcomponents/dist/Input.js";
Label	ui5-label	import "@ui5/webcomponents/dist/Label.js";
Link	ui5-link	import "@ui5/webcomponents/dist/Link.js";
List	ui5-list	import "@ui5/webcomponents/dist/List.js";
List - Standard Item	ui5-li	import "@ui5/webcomponents/dist/StandardListItem.js";
List - Custom Item	ui5-li-custom	import "@ui5/webcomponents/dist/CustomListItem.js";
List - Group Item	ui5-li-group	import "@ui5/webcomponents/dist/ListItemGroup.js";
Menu	ui5-menu	import "@ui5/webcomponents/dist/Menu.js";
Message Strip	ui5-message-strip	import "@ui5/webcomponents/dist/MessageStrip.js";
Multi ComboBox	ui5-multi-combobox	import "@ui5/webcomponents/dist/MultiComboBox.js";
Multi ComboBox Item	ui5-mcb-item	comes with ui5-multi-combobox
Multi ComboBox Group Item	ui5-mcb-group-item	comes with ui5-multi-combobox
Multi Input	ui5-multi-input	import "@ui5/webcomponents/dist/MultiInput.js";
Panel	ui5-panel	import "@ui5/webcomponents/dist/Panel.js";
Popover	ui5-popover	import "@ui5/webcomponents/dist/Popover.js";
ProgressIndicator	ui5-progress-indicator	import "@ui5/webcomponents/dist/ProgressIndicator.js";
Radio Button	ui5-radio-button	import "@ui5/webcomponents/dist/RadioButton.js";
Range Slider	ui5-range-slider	import "@ui5/webcomponents/dist/RangeSlider.js";
Rating Indicator	ui5-rating-indicator	import "@ui5/webcomponents/dist/RatingIndicator.js";
Responsive Popover	ui5-responsive-popover	import "@ui5/webcomponents/dist/ResponsivePopover.js";
Segmented Button	ui5-segmented-button	import "@ui5/webcomponents/dist/SegmentedButton.js";
Segmented Button Item	ui5-segmented-button-item	comes with ui5-segmented-button
Select	ui5-select	import "@ui5/webcomponents/dist/Select.js";
Select Option	ui5-option	comes with ui5-select
Slider	ui5-slider	import "@ui5/webcomponents/dist/Slider.js";
Split Button	ui5-split-button	import "@ui5/webcomponents/dist/SplitButton.js";
Step Input	ui5-step-input	import "@ui5/webcomponents/dist/StepInput.js";
Suggestion Item	ui5-suggestion-item	comes with InputSuggestions.js feature - see below
Switch	ui5-switch	import "@ui5/webcomponents/dist/Switch.js";
Tab Container	ui5-tabcontainer	import "@ui5/webcomponents/dist/TabContainer.js";
Tab	ui5-tab	import "@ui5/webcomponents/dist/Tab.js";
Tab Separator	ui5-tab-separator	import "@ui5/webcomponents/dist/TabSeparator.js";
Textarea	ui5-textarea	import "@ui5/webcomponents/dist/TextArea.js";
TimePicker	ui5-time-picker	import "@ui5/webcomponents/dist/TimePicker.js";
Title	ui5-title	import "@ui5/webcomponents/dist/Title.js";
Toast	ui5-toast	import "@ui5/webcomponents/dist/Toast.js";
Toggle Button	ui5-toggle-button	import "@ui5/webcomponents/dist/ToggleButton.js";
Token	ui5-token	comes with ui5-multi-input
Tree	ui5-tree	import "@ui5/webcomponents/dist/Tree.js";
Tree Item	ui5-tree-item	comes with ui5-tree

Provided assets

import "@ui5/webcomponents/dist/Assets.js";

Assets	Module	Notes
i18n, themes	@ui5/webcomponents/dist/Assets.js	Theming parameters and translations for the components Automatically imports also: @ui5/webcomponents-localization/dist/Assets.js and @ui5/webcomponents-theming/dist/Assets.js

Provided features

import "@ui5/webcomponents/dist/features/<FEATURE-NAME>.js

Affects	Feature Import	Description
ui5-color-palette	@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js	Support for "more colors dialog" for the color palette component
ui5-input	@ui5/webcomponents/dist/features/InputSuggestions.js	Support for input suggestions while typing

Color Palette "More Colors" Feature

import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js";

The ui5-color-palette component has a showMoreColors property, that, when set to true, enables a "More colors" dialog. Since this is not always needed, in order to use this dialog, you must import the above feature.

Input Suggestions Feature

import "@ui5/webcomponents/dist/features/InputSuggestions.js";

The <ui5-input> element acts as an <input> with the Fiori design and added functionality, such as value state.

The so-called "input suggestions" is an advanced feature that allows the user to choose from a list of predefined options while typing. Since input suggestions may not always be needed, they do not come as part of the <ui5-input> itself.

To enable the functionality, import the above module into your app. This will also automatically import ui5-suggestion-item for your convenience.

Resources

• UI5 Web Components - README.md
• UI5 Web Components - Home Page
• UI5 Web Components - Playground and API Reference

Support

We welcome all comments, suggestions, questions, and bug reports. Please follow our Support Guidelines on how to report an issue, or chat with us in the #webcomponents channel of the OpenUI5 Community Slack.

Contribute

Please check our Contribution Guidelines.

License

Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the LICENSE file.

Changelog

2.0.0-rc.4 (2024-05-29)

Bug Fixes

• register runtime in SSR usage (#9013) (54db283)
• ui5-*: Make setAnimationMode() properly change modes (#8965) (9f5d276), closes #8964
• ui5-button: add keyboard shortcut to cancel the button's action (c2d9c85), closes #6782
• ui5-button: adjust ui5-button menu button samples to use open/opener (974ff8c)
• ui5-button: remove tabindex from disabled button (#8957) (041f573), closes #8852
• ui5-calendar-legend: align visual design to meet WCAG 2.2 requirements (0860a3e)
• ui5-calendar: change the show month/year private event names (#8960) (c981459), closes #8893
• ui5-calendar: respect component level calendarType in week calculation (#8971) (69b8003)
• ui5-calendar: switch to two column layout on Islamic or Persian secondary calendar type (#8453) (1b172eb)
• ui5-date-picker: adjust failing tests (#9039) (7232039), closes #9033 #9034
• ui5-date-picker: display initial view properly (#8910) (e570031), closes #8893
• ui5-datetime-picker: change dateformat to datetime instance (#9024) (e5051ea)
• ui5-illustrated-mesasge: update subtitle color (#8986) (c9a5120), closes #8984
• ui5-multi-input: delete selected value on BACKSPACE (#8982) (d773532)
• ui5-multiinput: restore and adjust unit tests (#8933) (70dc2a6)
• ui5-notification-list: fix keyboard issues (#9040) (f1c0635)
• ui5-notification: implement keyboard navigation spec (#8975) (d68c883)
• ui5-panel: fix failing tests (#9044) (aeb7d42)
• ui5-popover: correct placement in RTL direction (#9009) (36fa85e)
• ui5-popover: fix auto close when click on iframe inside a shadow root (#8961) (5c2f5f6)
• ui5-popover: fix infinite open/show loop (#9055) (a142caf), closes #9031
• ui5-popover: prevent runtime error when opener is outside the viewport (#9017) (9212aa8)
• ui5-responsive-popover: fix initially focused input going out of the viewport on iPhone (#8945) (7ff177c)
• ui5-segmented-button-item: align sizes to spec (#8972) (0eefe5f), closes #7357
• ui5-select: popover scrolls to typed item (#9053) (70bbd7f), closes #8987
• ui5-side-navigation-item: "selected" is no longer announced on every focused item (#9008) (8cd3f83)
• ui5-side-navigation-item: click event is no longer fired twice (#8944) (0dd36ca)
• ui5-side-navigation: menu in collapsed mode width is not longer stretched unnecessary (#8940) (30c0530)
• ui5-side-navigation: overflow menu items are now displayed (#8948) (bcb3008)
• ui5-tag: add colors for Quartz high contrast themes for Set 2 (#8952) (92b3cf8)
• ui5-time-picker: remove box shadow (#8951) (7c7170d), closes #8932

Code Refactoring

• ui5-input: replace openPicker method with public property open (#8950) (3e2b32e)
• ui5-list: refactored HighlightTypes (#9061) (2510224), closes #8461
• ui5-option: make options physical elements (#8903) (8d6fac7), closes #8461 #7887
• ui5-popover: remove hideBackdrop property (#8947) (f628fbc), closes #8461
• ui5-popup: rename after-open and after-close events to 'open' and 'close' (#8946) (912167d), closes #8461
• ui5-shellbar: introducing assistant slot (#8963) (2a8c252), closes #8461 #7887
• ui5-toast: rename event after-close to close (#8967) (d05839d)

Features

• ui5-*: integrate element internals in input components (#8685) (c8e68d5), closes #8461
• ui5-button: add second (end) icon (2e97c03)
• ui5-color-palette-item: introduce selected state (#8554) (b0f8a30)
• ui5-combobox: introduce nested grouping of items (#8926) (92fe765)
• ui5-date-range: introduce new calendar date type (#8804) (ffe14a5), closes #8461
• ui5-dynamic-page: introduce new component (#7899) (3752ce7)
• ui5-form: introduce Form web component (#8281) (8d72042), closes #7854
• ui5-input: add input type search (#8980) (410ba3f), closes #7641
• ui5-input: allow custom icon styling (#8881) (cf9f1c2), closes #8182 #6132
• ui5-li-notification-group: enhance 'Expand'/'Collapse' tooltip (#9042) (08b81c7)
• ui5-li-notification: implement new design (#8426) (e451cdc)
• ui5-list,ui5-tree: make drag&drop feature public (#8904) (60b8038)
• ui5-time-picker: introduce open property (#9001) (1c1cea6)
• ui5-toolbar-button: add second (end) icon (#9048) (6688814)
• UI5Element: invalidateOnChildChange works for slots (#9021) (ec3ead7)

BREAKING CHANGES

• ui5-input: Remove openPicker method and replace it with public property open

Before the ui5-input suggestions popover could be opened by calling openPicker() :

const input = document.getElementById("exampleID");
input.openPicker();

Now the suggestions popover is opened by setting the open property to true:

const input = document.getElementById("exampleID");
input.open = true;

• refactor(ui5-input): fix spacing in input.mobile.spec.js
• ui5-combobox: The ui5-cb-group-item component is removed. Groups can now be created with the ui5-cb-item-group.
• ui5-list: Highlight enum should be imported differently. Before:

import HighlightTypes from "@ui5/webcomponents-base/dist/types/HighlightTypes.js";

Now:

import Highlight from "@ui5/webcomponents-base/dist/types/Highlight.js";

• ui5-toolbar-button: iconEnd property is changed from boolean to string type and now can accept name for second/end icon.

Before:

<ui5-toolbar-button icon="home" icon-end>Button</ui5-toolbar-button>

Now:

<ui5-toolbar-button end-icon="home">Button</ui5-toolbar-button>

or

<ui5-toolbar-button icon="employee" end-icon="home">Button</ui5-toolbar-button>

• ui5-notification: Instead of ui5-list, ui5-notification-list should be used as a container for ui5-li-notification-group and ui5-li-notification components.

Previously the application developers were defining notifications in this way:

<ui5-list>
        <ui5-li-notification-group title-text="Group Title" >
            <ui5-li-notification..

To support accessibility, developers should now use the ui5-notification-list as seen below:

<ui5-notification-list>
        <ui5-li-notification-group title-text="Group Title" >
            <ui5-li-notification..

• ui5-shellbar: 1. The showCoPilot property of the ui5-shellbar is removed.

If you have previously used the showCoPilot property:

<ui5-shellbar show-co-pilot></ui5-shellbar>

it will no longer work for the component.

1. The CoPilotAnimation feature of the ui5-shellbar is removed.

If you have previously used the CoPilotAnimation feature:

import CoPilotAnimation from "@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js"

it will no longer work for the component.

1. The copilotDomRef getter of the ui5-shellbar is removed.

If you have previously used the copilotDomRef public getter:

shellbar.copilotDomRef

it will no longer work for the component.

1. The co-pilot-click event of the ui5-shellbar is removed. If you have previously used the co-pilot-click public event:

shellbar.addEventListener("ui5-co-pilot-click", function(event) {
	...
});

it will no longer work for the component.

You can achieve similar functionality with the new slot:

HTML:

<ui5-shellbar>
  <ui5-toggle-button id="assistant" icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
</ui5-shellbar>

JavaScript:

assistant.addEventListener("click", function (event) {
	const toggleButton = event.target;
	toggleButton.icon = toggleButton.pressed ? "sap-icon://da-2" : "sap-icon://da";
});

• ui5-option: The ui5-select-menu and ui5-select-menu-option components are removed. Custom options can now be created using the ui5-option-custom, directly placed inside the default slot of the ui5-select

SelectMenu & SelectMenuOption Changed item Old New SelectMenu ui5-select-menu removed SelectMenuOption ui5-select-menu-option ui5-option-custom If you have previously used the ui5-select-menu and ui5-select-menu-option:

<ui5-select menu="selectMenu"></ui5-select>

<ui5-select-menu id="selectMenu"> <ui5-select-menu-option> <div class="optionContent">custom</div> </ui5-select-menu-option> </ui5-select-menu> Now use just ui5-select and ui5-option-custom instead: <ui5-select> <ui5-option-custom> <div class="optionContent">custom</div> </ui5-option-custom> </ui5-select> Select Changed item Old New property menu removed The menu property of the ui5-select is removed. * **ui5-button:** iconEnd property is changed from boolean to string type and now can accept name for second/end icon.

Before:

<ui5-button icon="home" icon-end>Button</ui5-button>

Now:

<ui5-button end-icon="home">Button</ui5-button>

or

<ui5-button icon="employee" end-icon="home">Button</ui5-button>

• ui5-toast: The after-close event has been renamed to close. If you previously used it like:

toast.addEventListener("after-close", (event) => {
});

Now you have to use it like:

toast.addEventListener("close", (event) => {
});

Related to: https://github.com/SAP/ui5-webcomponents/issues/8461

• ui5-*: The features/InputElementsFormSupport.js feature has been deleted and now, form elements works natively in form elements.
• ui5-date-range: dates slot in a calendar now works with a ui5-date-range when selection-mode="Range"

Previously date ranges were declared as follows:

<ui5-calendar selection-mode="Range"> <ui5-date value="Jan 20, 2021"></ui5-date> <ui5-date value="Jan 30, 2021"></ui5-date> </ui5-calendar>

Now they are declared using a ui5-date-range:

<ui5-calendar selection-mode="Range"> <ui5-date-range start-value="Jan 20, 2021" end-value="Jan 30, 2021"></ui5-date-range> </ui5-calendar> * **ui5-popup:** Event names `after-close` and `after-open` are now named `close` and `open`. Previously the application developers could subscribe to the events as follows: ```ts popup.addEventListener("after-open", function() { //... }); popup.addEventListener("after-close", function() { //... }); ```

Now the application developers should include the ui5-bar as follows:

popup.addEventListener("open", function() {
	//...
});

popup.addEventListener("close", function() {
	//...
});

• ui5-popover: Property hideBackdrop is removed.

Previously the application developers could define a modal popover without visible backdrop as follows:

<ui5-popover modal hide-backdrop>

Now the application developers can use the standard ::backdrop CSS selector

<style>
.transparentBackdrop::backdrop {
  background: transparent;
}
</style>

...

<ui5-popover modal class="transparentBackdrop">