Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
petya_begovska
Employee
Employee
1,724

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. Today, we stand at a pivotal moment in our evolution with the launch of UI5 Web Components 2.0. 

petya_begovska_0-1719475701963.png

Picture 1: UI5 Web Components timeline

The Evolution of UI5 Web Components 

 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 are thrilled to officially launch UI5 Web Components 2.0. This major release signifies our commitment to providing cutting-edge tools for web development. Version 2.0 not only enhances performance and reliability but also sets the stage for future innovations.  

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. 

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. 

New Components: Expand your UI toolkit with new components such as Dynamic Page, Form, Table, Text, Tokenizer, AI ButtonAI Prompt Input, Custom Option and Custom Suggestion Item. 

petya_begovska_0-1719784577000.png

Picture 2: 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. 

petya_begovska_1-1719784798665.png

Picture 3: Preview of UI5 Web Components 2.0 new features

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

petya_begovska_0-1719782642639.png

Picture 4: UI5 Web Components 2.0 new website

New logo: We are excited to introduce our new logo 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 

petya_begovska_1-1719782921843.png

Picture 5: 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. Our comprehensive Migration Guide will assist you in making a smooth transition from UI5 Web Components v1.x to v2.0. Note: The majority of the breaking changes can be achieved with find and replace.

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 the year, 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! 🙌 

 

 

 

6 Comments
satyajitonline
Discoverer

@petya_begovska  Thanks for the info. When we can see some standard applications also using UI5webcomponent in S4 HANA.
Currently customers are developing UI5 Web component apps on BTP for custom solutions. 

MikeB
Contributor
0 Kudos

@petya_begovska, such great news!

Currently, the UI5 Project consists of three wings:

  • SAPUI5
  • OpenUI5
  • UI5 Web Components

Wouldn't it better to consolidate the resources and starting using UI5 Web Components as a base for the SAPUI5 and OpenUI5 projects? To avoid double development and ensuring the cutting-edge technologies for the entire UI5 codebase?

Ideally, to have a unified UI5 codebase (based the latest JS/TS APIs, language versions, UI5WC with minimum of legacy code & dependencies) and the only distinguishing between SAPUI5 and OpenUI5 would be done based on legal & marketing reasons.

petya_begovska
Employee
Employee

Hi @satyajitonline,

All new UI elements will be developed exclusively as Web Components. We are working on a seamless integration which makes it easy to embed Web Components into SAPUI5 applications.

 

petya_begovska
Employee
Employee

Hi @MikeB,

We are indeed working towards making UI5 Web Components the standard for control development for both OpenUI5 and SAPUI5, aiming to streamline development and use cutting-edge technologies. You can learn more in the UI5con session: Bring Your Own Design System - Integration of Web Components in SAPUI5

While Web Components will serve as the foundation, OpenUI5 and SAPUI5 will continue to offer additional features like data binding and connectivity. We recognize the importance of these features for building robust applications.

Transitioning to a unified codebase with minimal legacy code is our goal, but we must also consider existing users who rely on sap.m controls. Therefore, we should support these controls a long period of time.

MikeB
Contributor
0 Kudos

@petya_begovska, thanks for your prompt response!

BTW, does UI5WC 2.0 use jQuery?


OpenUI5 and SAPUI5 will continue to offer additional features like data binding and connectivity


And if to bring data binding and connectivity into UI5WC?


we must also consider existing users who rely on sap.m controls

This can be solved by switching sap.m controls to UI5WC under the hood (of course, at the cost of some performance), but then the overall development process of UI5 can get a significant boost, since there will be no need for development & maintenance of both: UI5WC and the legacy sap.m/sap.ui controls and UI5 can better compete with React and many other similar solutions.

petya_begovska
Employee
Employee

Hi @MikeB, UI5 Web Components do not use jQuery. They are designed to be lightweight, modern, and to integrate seamlessly with various frameworks and libraries without depending on jQuery. UI5 Web Components are built with native web technologies like HTML, CSS, and JavaScript, ensuring they are fast and efficient. They focus on providing a modern web component experience compliant with the Web Components standards.