Skip to main content

· 7 min read

After its half-year tenure as an experimental component since the release of UI5 Web Components 2.0, allowing us to gather feedback and improve the API, the Table component will finally leave its experimental state!

This blog will update you on why we've decided to take this path, the improvements and new features of the ui5-table.

Going from Old to New​

Back in UI5 Web Components 1.x, the library already offered a Table component, which provided developers with capabilities to display data in a tabular structure.

Upgrading to a new version gave us the chance to reassess and reimagine the Table component, allowing us to focus on three core points:

  • Improved accessibility
  • Harmonization between the Web Component Table and UI5 Tables
  • Enhancements to existing APIs and incorporation of new ideas

As providing a completely new component with a fresh and new API might lead to issues, we've decided to publish the Table in an experimental state. This has given us the time to manifest the final API, but most importantly the chance to listen to your feedback and improve our API based on it.

Finally, thanks to your feedback, we removed the experimental state of the ui5-table.

What's New?​

Table and ARIA Structure​

We've revamped the structure of the ui5-table component. The new structure is heavily inspired by the HTML table, instead of having a dedicated <ui5-column>, you'll define a <ui5-table-header-row>, which contains a <ui5-table-header-cell>:

HTML TableWeb Component Table
<table>
  <tr>
    <th>Column A</th>
    <th>Column B</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>
<ui5-table>
  <ui5-table-header-row slot="headerRow">
    <ui5-table-header-cell>Column A</ui5-table-header-cell>
    <ui5-table-header-cell>Column B</ui5-table-header-cell>
  </ui5-table-header-row>
  <ui5-table-row>
    <ui5-table-cell>Cell 1</ui5-table-cell>
    <ui5-table-cell>Cell 2</ui5-table-cell>
  </ui5-table-row>
</ui5-table>

We've also decided to apply ARIA roles, such as "row" or "gridcell", directly to the Web Components instead of hiding them in the Shadow DOM, applying the semantics directly to the component. This change in combination with the new structure enables a better accessibility and screen reader support, as the new Table component now structurally and semantically resembles the HTML table, ensuring an easier processing for assistive technologies.

Keyboard Handling​

Apart from moving the ARIA roles from the Shadow DOM to the "light" DOM, allowing you to directly reference other components (except for the table root) via aria-labelledby, accessibility has been greatly improved in other areas as well.

One major change you might notice is the updated keyboard handling for the table. While previously you were only able to navigate through the table row by row, the newly implemented keyboard specification allows you to navigate row by row and from cell to cell. This update aligns the Table component with its counterparts in UI5 in terms of keyboard handling.

Keyboard Handling

Check the SAPUI5 Accessibility for End Users for more information about the handling.

Feature Concept​

If you use the new ui5-table for the first time, you might notice that "core features" of the former Table implementation might be missing, such as growing capabilities or selection functionality.

This discrepancy is intended as we wanted to provide a lightweight component for users that might not need such features.

If you require selection or growing capabilities, you can extend your Table component by assigning Features to it. The core idea of a Feature is to provide a plug-and-play option for more complex features of the Table. This allows you to keep the Table as lightweight as possible ensuring only necessary code/functionality is being used.

The ui5-table has a dedicated features slot to enable certain features, which are dedicated components. We are currently offering the following features: TableSelectionSingle, TableSelectionMulti, TableGrowing, and TableVirtualizer.

<ui5-table>
  ...
  <ui5-table-selection-single slot="features" />
  <ui5-table-growing slot="features" />
  <ui5-table-virtualizer slot="features" />
</ui5-table>

Selection Feature​

As you may have noticed, there are now two selection features: TableSelectionSingle and TableSelectionMulti. Instead of a single, unified selection feature, we chose to separate them to keep the API lean, clean, and better suited to their respective use cases. This approach also helps manage complexity as each selection mode has distinct API requirements and behaviors.

Additionally, selection is no longer handled at the row level. Previously, ui5-table-row had a selected property, but this has been removed. Instead, selection is now decoupled from the table, and the selection feature itself maintains a selected property containing the keys of selected rows. To enable this, you need to provide a row-key for your rows to uniquely identify them.

For an example implementation, see here.

Growing Feature​

In addtion to revamping the selection behavior, we've decided to improve and adapt the growing behavior as well. TableGrowing enables growing capabilities and provides two different growing modes:

  • Button: Renders a button to load more data
  • Scroll: Scrolls to the bottom of the table to load more data

We have slightly improved the Scroll behavior: If the table is not scrollable yet, the growing button will be rendered until the table is scrollable. This will always ensure that the table offers its growing capabilities when using TableGrowing.

You can check these samples to see implementations of both growing modes:

Virtualization​

TableVirtualizer is a new feature that is currently still experimental. Its main purpose is to virtualize table rows, allowing you to display huge amounts of data without rendering everything straight to the browser compromising performance.

This feature ensures that only the rows visible in the current viewport are rendered and updated during scrolling. To achieve this, the TableVirtualizer offers a range-change event allowing you to exchange or update the row contexts and contents accordingly.

A sample implementation can be found here.

Example of the Virtualizer

New Functionalities​

Overflow Mode​

The old Table component used the popin mode by default, a responsive display option optimal for small screen sizes. Defining a minWidth for the column, a minimum table width, allows the column to move into the popin area if the table is smaller than the specified minWidth.

This overall behavior has changed now with the new ui5-table.

First of all, the Table component introduces the overflowMode. This property allows you to switch between popin mode and horizontal scrolling, giving you flexibility with the overflow behavior of your table.

Furthermore, the "popin configuration" has changed. Instead of defining a minWidth representing the "minimum table width", you can define width or minWidth for the column itself. If the table overflows, the columns that overflow, for example, if they don't fit into the table anymore, will be moved into the "popin area". This is a more natural overflow behavior allowing you to just define the widths of your columns without worrying about the general table width.

See here for a sample.

Row Actions​

The ui5-table introduces row actions. The ui5-table-row has a dedicated actions slot, which allows you to add custom row actions to your rows.

There are two row action options:

<ui5-table-row row-key="2">
  <ui5-table-cell><ui5-label><b>Astro Laptop 216</b><br><a href="#">HT-1251</a></ui5-label></ui5-table-cell>
  <ui5-table-row-action slot="actions" icon="delete" text="Delete" handler="onDelete"></ui5-table-row-action>
  <ui5-table-row-action-navigation slot="actions" handler="onNavigate" interactive></ui5-table-row-action-navigation>
</ui5-table-row>

Row Actions Sample

Drag And Drop​

The Table component is now drag-and-drop-enabled! By utilizing the Table's move-over and move event, you can now move around table rows.

This allows you to implement features such as row reordering, exchanging data between tables, and many more.

Drag And Drop

Summary​

The ui5-table and its related components (except for TableVirtualizer) are finally "graduating" from their experimental state and will move into a stable state. The new table offers new and improved features, accessibility and user experience.

For compatibility reasons, the old table is still available in the compat package, but please migrate to the new table implementation to leverage the newest features and functionalities.

If you are interested in learning more about the ui5-table, check out the documentation, or join us at UI5con!

· 4 min read

We are proud to announce that the 2.6.0 release of the web components adds support for using JSX templates.

Until now, Handlebars was the only templating language that could be used. The main goal of the project since the beginning was to have declarative renderers, and Handlebars served this purpose well. There were some drawbacks however.

Own HBS compiler​

Since handlebars originally works with strings only and cannot update the DOM effectively, we had to build our own HBS -> lit-html compiler. This added some technical debt, as not all features from Handlebars were implemented. It also added maintenance effort for a tool we had to update and evolve, when switching to TypeScript for example, or when encountering edge cases not previously considered.

Development experience​

All templating languages are by default not understood by IDEs out of the box.

Code completion is the biggest gap we were seeing - there was simply no way to tell the IDE what to do without writing a plugin, which would be further development effort.

While we added type checking (the compiled HBS code is in a .ts file so there is some typechecking), it was never complete - type errors are shown in the console, not in the IDE. They were also only top level property type checks - no typechecks inside loops, no typechecks for events and event handlers.

Code navigation was also missing - you could not click on a property in a HBS template to navigate to the property definition in the component itself.

JSX​

JSX is an embeddable HTML-like syntax that gets transformed into JavaScript. It is written inside JavaScript and transformed to JavaScript, which means the TypeScript compiler can do all of the things it does out of the box - not only typechecking, but also provide code completion suggestions and do the code transformation. IDEs also have TypeScript integration, so nothing additional is required.

JSX benefits compared to HBS templates​

What follows is a quick summary of all improvements offered by JSX.

Declarative ↔️​

No change here, both are declarative.

Type checking ↗️​

Full type checking - not only top-level properties, but also loops, events, event handlers, and code in the template as well.

Code completion ↗️​

Full code completion - TypeScript knows exactly what properties are available for each tag, and what their respective values are. Type errors are shown in the IDE and quick fixes also work out of the box.

Code navigation ↗️​

Using Cmd-Click on a property name or an event handler directly jumps to the code location in the component. This was not possible before.

Debugging templates ↗️​

While it was possible to debug lit-html templates, they were big horizontal lines of template literal code and actually kind of hard to debug. JSX templates look like function calls with whitespaces and show a much better structure that is easier to debug.

No IDE plugin needed ↗️​

All of the benefits above come without the need to write a plugin - IDEs are already integrated with TypeScript that provides all of the above features for free.

No new tooling ↗️​

Transforming the template to JavaScript code is handled by the TypeScript compiler. There is absolutely no new code for the transformation step.

Smaller template size ↗️​

Converting all of the main and fiori components (~140) reduced the gzip size of the bundle by roughly 20 kB.

Technical aspects​

The JSX transformation creates a Virtual DOM, and the actual DOM updates are handled by Preact. Preact has a big focus on performance and is very fast and small. Virtual DOM is theoretically slower when updating big lists (as their templates have to be rendered and the diff has to be run), but for the web components, this is not a problem, since the items of the components are coming from the applications and the component only renders a slot where the items will appear.

Summary​

The switch to JSX improves the web component development experience immensely. Not only is the development experience better, but in the process of migrating the existing components, a lot of bugs were caught that were simply missed in HBS. Size improvements and the good performance make this a real good step for the framework and for component developers.

For more implementation details, you can check the template docs and the PR

· 8 min read

A Journey of Innovation and Growth​

Since the release of UI5 Web Components 1.0 in 2021, our journey has been marked by unwavering innovation and a commitment to excellence. Over the past three years, we have listened to our community, refined our technologies, and expanded our capabilities.

UI5 Web Components timeline

Our project has continuously evolved, embracing new web standards, eliminating legacy code, and integrating invaluable user feedback from our community to enhance our APIs. This journey culminated in April with the unveiling of the first Release Candidate for UI5 Web Components 2.0.

Announcing UI5 Web Components 2.0! 🎉​

Today, we stand at a pivotal moment in our evolution with the official launch of UI5 Web Components 2.0. This major release marks a new era, enhancing performance and reliability while setting the stage for future innovations. Our commitment to growth and providing cutting-edge tools for web development ensures we continue to meet the evolving needs of our community.

Key Benefits of UI5 Web Components 2.0

UI5 Web Components 2.0 introduces several substantial improvements:

  • Embracing New Standards: Future-proofing UI5 Web Components.

  • Consistent APIs: Streamlined and more intuitive, albeit with some breaking changes.

  • Elimination of Legacy Code: Reducing footprint and enhancing quality by minimizing bugs.

Looking ahead, we will adhere to Semantic Versioning and release major updates more frequently to keep pace with technological advancements.

What's New in UI5 Web Components 2.0?​

Revolutionary Popover API​

Experience a standardized, consistent, and flexible mechanism for displaying popover content across all relevant components.
This API allows popups to display correctly above all other content, eliminating the need for the "static area" used in version 1.x. Previously, popups were placed in a static area within the body to ensure correct positioning despite various CSS rules. In version 2.x, the popover API simplifies the DOM structure by incorporating the popover directly within the component. This results in easier development, maintenance, and enhanced styling capabilities. It also allows components with popups to have physical children, supporting custom content and simplifying testing. The popover API is fully supported by all major browsers. Discover all the practical benefits in our blog post.

Form-Associated Custom Elements​

Harness the power of native input behavior within HTML forms. This enhancement makes the features/InputElementsFormSupport.js feature redundant, simplifying form handling and enhancing the developer experience. Refer to the ElementInternals API documentation for more details.

Seamless Time Zone Support​

Seamlessly manage time zones within your applications for a more personalized user experience. The date and time components are adapted to the time zone feature, allowing the components to present dates in different time zones. The time zone identifiers format is the one used in the IANA time zone database. See a sample on our website.

New Components​

Expand your UI toolkit with new components such as Dynamic Page, Form, Table, Text, Tokenizer, AI Button, and AI Prompt Input.

  • Dynamic Page: A layout component, representing a web page, consisting of a title, a header with dynamic behavior, a content area, and an optional floating footer. Use the Dynamic Page if you need to have a title, that is always visible and a header, that has configurable Expanding/Snapping functionality.
  • Form: The ui5-form is a layout component that arranges labels and form fields (like input fields) pairs into a specific number of columns. And, there is also "grouping" available to assist the implementation of richer UIs. The Form component reacts and changes its layout on predefined breakpoints.
  • Table: The ui5-table component provides a set of sophisticated features for displaying and dealing with vast amounts of data in a responsive manner. This Table replaces the previous Table web component, that has been part of @ui5/webcomponents version 1.x. For compatibility reasons, we moved the previous Table implementation to the @ui5/webcomponents-compat package and will be maintained until the new Table is experimental.
  • Text: The ui5-text component displays text that can be used in any content area of an application. By default, the text will wrap when the space is not enough. In addition, the component supports truncation via the max-lines property, which defines the number of lines the text should wrap before it starts truncating.
  • Tokenizer: A ui5-tokenizer is an invisible container for ui5-tokens that supports keyboard navigation and token selection.
  • AI Button: The ui5-ai-button component represents a button used in AI-related scenarios. It enables users to trigger actions by clicking or tapping the ui5-ai-button, or by pressing certain keyboard keys, such as Enter.
  • AI Prompt Input: The ui5-ai-prompt-input component allows the user to write custom instructions in natural language so that AI is guided to generate content tailored to user needs.
  • Custom Option: The ui5-option-custom component defines a custom content of an option in the ui5-select. The component accepts arbitrary HTML content to allow full customization.
  • Custom Suggestion Item: The ui5-suggestion-item-custom is a type of suggestion item, that can be used to place suggestion items with custom content in the input.
  • Notification List: The ui5-notification-list web component acts as a container for ui5-li-notification-group and ui5-li-notification, delivering the new SAP Design Notification experience.
  • List Group: The ui5-li-group is a special list item used exclusively for creating groups of list items within a ui5-list.

Preview of UI5 Web Components 2.0 new components

Enhanced Existing Components​

Benefit from improvements in List Drag and Drop, Tree Drag and Drop, Tab Container Drag and Drop, and a revamped Notifications Experience.

Preview of UI5 Web Components 2.0 new features

note

For the full list of changes, please refer to the release change log.

Revamped Documentation Site​

Explore our new documentation site featuring a live editor, playground, dark mode, and an intuitive icons view.

UI5 Web Components 2.0 new website

New logo: We are excited to introduce our new symbol and branding, reflecting the modern and dynamic nature of our project. Our new design incorporates defining elements of the feather and the flame. The feather symbolizes being lightweight, while the flame forms a connection to the phoenix, embodying the spirit of rebirth and continuous improvement.

Explore the Full-Screen Playground

Our new full-screen playground offers a range of features designed to enhance your development experience:

  • Live code editing

  • TypeScript support

  • Code completion for components in HTML

  • Sample download

  • Easy sharing

  • Theming options

  • Predefined examples

UI5 Web Components 2.0 full-screen playground

Adoption and Breaking Changes​

UI5 Web Components 2.0 is a major version and introduces breaking changes that may require updates to your code. Note: The majority of the breaking changes can be achieved with find and replace.

tip

Our comprehensive Migration Guide will assist you in making a smooth transition from UI5 Web Components v1.x to v2.0.

Notable Breaking Changes:

  • The Belize theme has been removed and is no longer available.

  • CSP (Content Security Policy) will be ensured via the adoptedStyleSheets only, which are CSP-compliant by design.

  • The static area has been removed since the browser now ensures the correct positioning of popups thanks to the popover API that is fully adopted by the UI5 Web Components.

  • The Badge component (ui5-badge) has been renamed to Tag (ui5-tag).

  • The old Table (ui5-table) has been moved to @ui5/webcomponents-compat; new Table is available with better API and accessibility.

  • Public methods for opening popovers are replaced with the open property for declarative APIs.

  • Components like Label, Text, Link, and Title now wrap by default (wrappingType="Normal" by default, wrappingType="None" optionally).

  • SelectMenu and SelectMenuOption components have been removed; standard options with the popover API make them obsolete.

  • Renaming of properties, events, and enumeration values.

  • Removed APIs without alternatives:

    • Progress Indicator (ui5-progress-indicator): Disabled property removed.

    • Select Option (ui5-option): Disabled property removed for UX and accessibility alignment.

    • Token (ui5-token): Readonly property removed; logic now within the Tokenizer.

    • The Device#isIE method has been removed and is no longer available - the IE browser is not supported anymore.

    • Notification List Group (ui5-li-notification-group): The properties showClose, showCounter, priority, the event close and the slot actions are removed due to the new better notification list design concept.

Ongoing Support for Version 1.x​

We will continue to support version 1.x until the end of June 2025, focusing on bug fixes to ensure continuity for our existing users.

Get Help and Engage with the Community​

Encountering issues? Reach out for support or report bugs on our GitHub project: Submit a bug or ask a question here.

Call to Action​

UI5 Web Components 2.0 is a testament to our dedication to innovation, quality, and community engagement. We are particularly excited about the groundbreaking features such as the Popover API, Form-Associated Custom Elements, and seamless time zone support.

We invite you to preview the new version and migrate to UI5 Web Components 2.0 to fully leverage these advancements. Together, we are entering a new era of web development, and the possibilities are endless. Thank you for being part of this exciting journey with us! 🙌

· 5 min read

UI5 Web Components 2.0 will provide greatly improved popups by taking advantage of the native browser popover API.

What is the popover API?​

The popover API is a browser-native solution to displaying popup-like components (Popovers, Dialogs, etc.). above all other content, regardless of its HTML structure and CSS applied.

Popups in version 1.x​

There used to be a so-called "static area" (<ui5-static-area>) - a DOM element directly in the <body> where the popups of all components were placed. This guaranteed that even if the HTML document had overflow: hidden, transform, or similar CSS rules applied, or the component was in a stacking context, its popup would still be positioned correctly.

Example of ui5-date-picker's DOM structure in v1.24:

<body>
    <ui5-static-area>
        <ui5-static-area-item> <!-- A static area item, associated with the DatePicker component -->
            #shadow-root
                <ui5-responsive-popover></ui5-responsive-popover> <!-- here goes the Popover part of the DatePicker component -->
        </ui5-static-area-item>
    </ui5-static-area>

    .........

    <div style="transform: translate(12rem, 12rem)"> <!-- a parent node has CSS that normally breaks popup positioning -->
        <ui5-date-picker>
            #shadow-root
                <ui5-input></ui5-input> <!-- The date Input part of the DatePicker component -->
        </ui5-date-picker>
    </div>
</body>

As you can see, the component used to be physically divided in two parts:

  • The "main" part (the ui5-date-picker tag itself) containing the date selection input
  • The "popover" part (the ui5-static-area-item tag, associated with the said date picker) containing the picker (calendar with years/months/days).

Popups in version 2.x​

There is no longer need for a "static area" since the browser now ensures the correct positioning of popups thanks to the popover API.

Example of ui5-date-picker's DOM structure in v2.0:

<body>
    <div style="transform: translate(12rem, 12rem)"> <!-- a parent node has CSS that normally breaks popup positioning -->
        <ui5-date-picker>
            #shadow-root
                <ui5-input></ui5-input> <!-- The date Input part of the DatePicker component -->
                <ui5-responsive-popover popover="manual"></ui5-responsive-popover> <!-- the Popover part of the DatePicker component -->
        </ui5-date-picker>
    </div>
</body>

The component is no longer physically divided in two parts:

  • Both the input and the popover are inside the ui5-date-picker itself
  • The popover has the popover="manual" attribute (introduced with the popover API) that ensures it will be displayed above anything else on the HTML page.

It's that simple!

The practical benefits​

Simpler and more robust components​

  • Easier to develop and maintain.
  • Everything belonging to a component is now in one place! This includes code logic, HTML and CSS.

Enhanced overstyling capabilities for apps​

  • We can now provide CSS Shadow Parts also for the "popup part", not just in the "main part" of the component!
  • CSS Custom Properties set on the component will also have effect for its "popup part"!

Consider the following example:

<body>
    <style>
        #mc::part(root) {
            background: blue;
        }
        #mc::part(list) {
            margin: 0.5rem;
        }
    </style>

    <my-component id="mc">
        #shadow-root
            <div part="root"></div>
            <ui5-popover>
                <ui5-list part="list"></ui5-list>
            </ui5-popover>
    </my-component>
</body>

Since the popover is now part of the component, component authors can provide CSS Shadow Parts for elements in the popover, in addition to the existing CSS Shadow Parts.

Components with popups can now have physical children​

Web components with popups had a hard limitation of not being able to slot children to the popup.

Example of ui5-select's (simplified) DOM structure in v1.24:

<body>
    <ui5-static-area>
        <ui5-static-area-item> <!-- static area item of the ui5-select -->
            #shadow-root
                <ui5-responsive-popover> <!-- the "dropdown" part of the ui5-select -->
                    <ui5-list> <!-- the list inside ui5-select's dropdown -->
                        <ui5-li text="Option 1"></ui5-li> <!-- list item for the 1st ui5-option -->
                        <ui5-li text="Option 2"></ui5-li> <!-- list item for the 2nd ui5-option -->
                        <ui5-li text="Option 3"></ui5-li> <!-- list item for the 3rd ui5-option -->
                    </ui5-list>
                </ui5-responsive-popover>
        </ui5-static-area-item>
    </ui5-static-area>

    .........

    <ui5-select>
        #shadow-root
            <div></div> <!-- The "box" part of the select -->

        <ui5-option>Option 1</ui5-option>
        <ui5-option>Option 2</ui5-option>
        <ui5-option>Option 3</ui5-option>
    </ui5-select>

</body>

As you can clearly see from the example, there is no way to slot the ui5-option components into the ui5-list as it is in a completely different part of the DOM, due to the need for a static area. Instead, we can only provide logical ui5-option components and just use their text content for the text property of the list items (ui5-li) in the static area.

Example of ui5-select's (simplified) DOM structure in v2.0:

<body>
    <ui5-select>
        #shadow-root
            <div></div> <!-- The "box" part of the select -->
            <ui5-responsive-popover> <!-- the "dropdown" part of the ui5-select -->
                <ui5-list> <!-- the list inside ui5-select's dropdown -->
                    <slot></slot>
                </ui5-list>
            </ui5-responsive-popover>

        <ui5-option><strong>Option</strong> 1</ui5-option>
        <ui5-option><ui5-icon name="accept"></ui5-icon> Option 2</ui5-option>
        <ui5-option><i>Option 3</i></ui5-option>
    </ui5-select>

</body>

Now that the popover is part of the ui5-select itself, it's possible to have physical ui5-options and slot their content directly into the popover or its children (ui5-list in this example).

This allows us to provide support for custom user content for components that had strict predefined APIs in the past!

Easier testing for both apps and component package authors​

  • Tests no longer need to know how to find the static area item, associated with a given component - everything is directly in the shadow root!
  • Writing tests is much simplified.

Cross-framework popup compatibility for the future​

  • Frameworks who use the native browser popover API no longer need to synchronize themselves (negotiate z-index values, etc.).
  • The last popup to be opened will always be on top (guarnateed by the browser)!

When can I start using it?​

  • The current versions of all supported browsers (Chrome, Safari, Edge, and now also Firefox as of version 125) fully support the popover API. See Can I Use report.
  • By the time v2.0 is officially released (we are at v2.0-r.c.2 as of writing this blog post) we expect that each major browser will have already released at least 3 stable versions since the introduction of the popover API.

Make sure to check our blog for future announcements, including the official release date of UI5 Web Components 2.0!

· 5 min read

U5 Web Components project has reached a pivotal stage in its evolution, geared to embrace new standards, eliminate legacy code, and integrate consumer feedback to enhance our APIs, culminating in the highly anticipated major release, version 2.0.

Today we are extremely happy to announce UI5 Web Components 2.0 Release Candidate! 🥳️ The following 2.0 RC versions have been released:

What's new​

New features​

  • Integration of popover API: Enjoy standard, consistent and flexible mechanism for displaying popover content on top of other page content with the integration of the popover API across all relevant components: #8192

  • Time zone Support: Date and time components are enhanced to seamlessly adapt to different time zones, ensuring accurate presentation of dates across various regions. The time zone identifiers format aligns with the conventions used in the IANA time zone database. : #8610

  • New Components: Explore new additions to the UI5 Web Components family, expanding your toolkit for building rich UIs:

    • Text: The ui5-text component displays text that can be used in any content area of an application. By default, the text will wrap when the space is not enough. In addition, the component supports truncation via the max-lines property, by defining the number of lines the text should wrap before start truncating. #8299

  • Components enhancements: Benefit from enhancements to existing components such:

    • ui5-message-strip: introduce custom colors #8757
    • ui5-link: introduce tooltip property #8670
    • ui5-avatar-group: update focus handling #8550
    • ui5-barcode-scanner-dialog: add support for close and open events #8753
    • ui5-li: add support for F2 key #8619
    • ui5-button: provide focus support for mobile #8414
    • ui5-tree: enable drag and drop #8477
    • ui5-tabcontainer, ui5-list: add events for reordering items by mouse #8265 #8687
    • ui5-checkbox: update focus handling #8553
    • focus: new focus handling #8590
    • add shadowRootOptions for @customElement decorator #8703

  • New Site for Documentation, Samples, and API Reference: Discover a revamped documentation site with live editor, playground, dark mode, and an intuitive icons view.

UI5 Web Components Playground

Breaking changes​

UI5 Web Components 2.0 is a new major version, including breaking changes requiring you to adjust your code accordingly.

tip

This documentation will help you to migrate from UI5 Web Components v1.x to UI5 Web Components 2.0 with ease: Migration guide 2.0

Notable breaking changes include:

  • Discontinuing support for Internet Explorer: #8494
  • CSP via adoptedStyleSheets only: #8496
  • The JSDoc plugin has been removed, and the generation of api.json has stopped. If you previously relied on the ui5-package/dist/api.json file, you can now use ui5-package/dist/custom-elements.json: #8518
  • Removed UI5Element#render method in favour of UI5Element#renderer: #8501
  • Removed all Assets-static.js modules in favour of their dynamic counterparts - the Assets.js modules: #8526
note

For the full list of changes, please refer to the release change log.

What's next​

Anticipate the official 2.0 release between mid-June to mid-July, featuring: 🚀

In-Progress Features​

  • Form Support with Form-Associated Custom Elements: Streamline form handling with support for the Form-Associated Custom Elements standard.
  • New Components: Dynamic Page, Form, and Tokenizer
  • Component Enhancements: Revamped Notifications Experience
  • Reusable component CSS styles Allow creating patterns/layouts or other common styling

In-Progress Breaking changes​

  • Theming: Removal of Belize (recommendation: migrate to Horizon)

  • Rename of properties, events and enumarion values

  • Several APIs will be replaced with more effective alternatives::

    • Replace all public methods for opening popover, such as openPicker, togglePicker with open property to promote declarative APIs
    • Grouping of Items: Instead of using ui5-li-groupheader as separator in a flat structure, the API will support true nesting of ListItems inside ListItemGroup, to easier bind hierarchical data model to the UI.
    • Menu: property starts-section replaced by ui5-menu-separator component.
    • List: property image, replaced by slot image.
    • TabContainer: show-overflow property, replaced by slot overflowButton.
    • IllustratedMessage: property titleLevel, replaced by slot title (that you can set the level on).
This properties will be removed without alternative:
  • Progress Indicator (ui5-progress-indicator): Remove disabled property
  • Selects's Option (ui5-option): Remove disabled property - UX and ACC standards suggest to not include any disabled items in the dropdown
  • Token (ui5-token): Remove the readonly property

Get help​

Encountering issues? Don't hesitate to report them or seek assistance on our GitHub project: Submit a bug or ask a question here.

Maintenance of 1.x​

While we're excited about the future with UI5 Web Components 2.0, we also understand the importance of continued support for existing users. Therefore, maintenance and support for version 1.x will continue until the end of the year, focusing solely on bug fixes.

Conclusion​

In conclusion, UI5 Web Components 2.0 represents a significant leap forward in our commitment to delivering cutting-edge web development tools. We're excited to embark on this journey with you and look forward to seeing the amazing experiences you'll create with UI5 Web Components 2.0!

Stay tuned for more updates and announcements as we approach the official release date. Thank you for being part of the UI5 Web Components community! 🙌

· 3 min read

UI5 Web Components 2.0 version is on the horizon. Here's a summary of everything you need to know (release information, key features and breaking changes) and start preparing for it.

Release Timelines​

  • Release 2.0 RC versions in April
  • Release 2.0 between mid June - mid July

Migration Support​

Maintenance of 1.x​

  • Support until the end of the year
  • Downport of bug fixes only

2.0 Features​

Framework Features​

New Components​

  • Dynamic Page
  • Form
  • Text
  • Tokenizer

Components Features​

  • List Drag and Drop (comes with TabContainer)?
  • Tree Drag and Drop
  • TabContainer Drag and Drop
  • New Notifications Experience

Reusable component CSS styles​

Styles for creating patterns/layouts or other common styling

New Site for Documentation, Samples and API reference​

See the preview.

  • Live editor
  • Playground
  • Dark mode
  • Icons view

2.0 Breaking changes​

  • 90% is pure API renaming for better consistency
  • several APIs are replaced by alternatives (listed below)
  • few APIs are removed without alternatives (listed below)

Theming​

  • Removal of Belize (recommendation: migrate to Horizon)

Framework​

  • CSP (Content Security Policy) will be ensured via adoptedStyleSheets only. The adoptedStyleSheets are CSP compliant by design and all components styles will be defined as adoptedStyleSheets.

The CSP.js module is removed and the creation of <style> and <link> tags is no longer required as all browsers now support adoptedStyleSheets.

As a result, hte following APIs are not available any more and should not be used:

import { setUseLinks } from "@ui5/webcomponents-base/dist/CSP.js"
import { setPackageCSSRoot } from "@ui5/webcomponents-base/dist/CSP.js"
import { setPreloadLinks } from "@ui5/webcomponents-base/dist/CSP.js"

Renamed APIs​

See the full list here.

Replaced APIs​

  • Methods openPicker will be replaced by open/opener properties to promote declarative API

  • Grouping of Items

Instead of using ui5-li-groupheader as separator in a flat structure:

<ui5-list>
	<ui5-li-groupheader>group<ui5-li-groupheader/>
	<ui5-li></ui5-li>
	<ui5-li></ui5-li>
	<ui5-li></ui5-li>
</ui5-list>

true nesting will be provided of ListItems inside ListItemGroup to easier bind hierarchical data model to the UI:

<ui5-list>
	<ui5-li-group header-text="group">
		<ui5-li></ui5-li>
		<ui5-li></ui5-li>
		<ui5-li></ui5-li>
	<ui5-li-group>
</ui5-list>
  • Menu: the property starts-section will be replaced by ui5-menu-separator component.
  • List: the property image will be replaced by slot image
  • TabContainer: the property show-overflow property is will be replaced by slot overflowButton.
  • IllustratedMessage: the property titleLevel will be replaced by slot title.

Removed APIs without alternative​

Progress Indicator (ui5-progress-indicator)​

  • The disabled property will be removed. Progress indicator isn't an interactive element so disabled property make no sense. Also aria-disabled is deprecated on the progressbar role since ARIA 1.2 .

Selects's Option (ui5-option)​

  • The disabled property will be removed. The UX and ACC standards suggest to not include any disabled items in the dropdown

Token (ui5-token)​

  • The readonly property will be removed.