Skip to Content
Product Information
Author's profile photo Stanislava Baltova

Lift-off: UI5 Web Components 1.0.0 Launched!

The Big Picture and The Need 

When it comes to enterprise software, creating a delightful user experience is a cornerstone of every product success. Having an appealing, coherent experience that allows any tasks to be easily achievable is a must. And so, an essential step is to get nice UX crafted into the product User Interfaces.

This looks like a straightforward task but accomplishing it for enterprise software can have multiple and sometimes unexpected dimensions: One needs not only achieve a superior visual and interaction design, but also be able to answer questions like: “Is my UI accessible to visually impaired people?”, “How it is translated on many languages, so it covers my product customer base?”, “Is it secure enough?”, “Do I have a Japanese calendar?..

Furthermore, when talking about UI technology, everyone is passionate about their own framework of choice and would like to be able to easily integrate enterprise qualities with it. Having that in mind, together with the collected knowledge of what it means to create enterprise ready UI elements, we launch our new offering – UI5 Web Components.

UI5 Web Components Release 1.0.0

Today the UI5 Web Components team is thrilled to announce that the first stable release 1.0.0 is available for your consumption!

A while ago we at UI5 introduced the newest member of our product family, UI5 Web Components – an independent, open source offering with minimal footprint, then still in an earlier beta phase.

From then on, we continuously learned from stakeholder’s feedback and responded to their needs by evolving and shaping the product.

  • We created new components and gradually enhanced the existing ones with new features.
  • We evolved our APIs making them stable, and future-proof.
  • We enriched our documentation and tutorials.
  • UI5 Web components support accessibility so that must-haves like screen reader support and keyboard navigation are smooth and compliant to industry standards.
  • We continued to evolve alongside with the SAP Fiori design language and therefore, we recently introduced the preview version of the new SAP Fiori theme called Horizon.

Now it’s time to graduate from the UI5 Web Components beta phase and officially declare the project as mature and ready for your productive applications.

What Do Our Front Runners Say?

Along the way we partnered with several stakeholders who were our product front runners. Together we achieved great results and so we are glad to share their impressions.

SAP Mobile Development Kit is stepping on UI5 Web Components to deliver their web apps.

“I absolutely loved working with the UI5 web components since they are very easy to plug into any application. It made our MDK Web runtime development much easier and more productive so that we were able to smoothly deliver our first Web channel in a short time.” (SAP Mobile Development Kit)

SAP Graph is also using UI5 Web Components for their solutions.

“UI5 Web Components keep our focus on delivering product features instead of re-implementing UI primitives while staying consistent with Fiori design system and giving us an opportunity to use React as our base framework. Great job!” (SAP Graph)

SAP Success Factors home page is now developed with UI5 Web Components.

“The UI5 Web Components are well documented and easy to re-use, making for quick and consistent development.” (SAP SuccessFactors)

SAP SuccessFactors Home Page

UI5 Web Components in a Nutshell

The UI5 Web Components are lightweight, self-contained, enterprise ready UI elements. Based on the Web Components technology they can be integrated with any UI framework, being React, Angular, Vue or just plain HTML. They come with minimal footprint so that you can easily add individual components to your app.

With UI5 Web Components we aim to provide the main building blocks needed for enterprise UI so that a consistent SAP Fiori user experience can be achieved. We offer more than 60 UI elements starting from basic ones, such as Button, Label and Checkbox and going further to more complex ones like Date Picker integrating many calendar types (remember the Japanese calendar?), Barcode Scanner, Illustrated Message and Tree.

When we say enterprise ready, we mean it. UI5 Web Components add value by providing a visual and behavioural characteristic giving this enterprise flavour of any app. They are compliant to SAP Fiori design language and evolve with it. They also support SAP’s enterprise qualities and standards such as accessibility, globalization, security etc. Have you thought of what is the required keyboard navigation for Date Picker? Try it out here.

Another major aspect is theming. They come with all SAP Fiori themes including their accessible variants High Contrast Black and High Contrast White. On top of that, all components are themable so custom themes can be applied.

Horizon Preview Theme

Get Started with UI5 Web Components

Use the Getting Started guideComponents and the Code Sandbox to play around and plug the UI5 Web Components into your project in under a minute.

 

Upcoming Events | Where to Meet Us?

To continue the talk we planned several sessions, so you are welcome to join us at

SAP Community Call on Nov 30

SAP Open Source Webinar on Dec 14

 

For more information on UI5 Web Components

 

 

 

 

Assigned Tags

      14 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Nice evolution of UI5, along with other popular frameworks like React, Vue etc.

      Thanks.

      Author's profile photo Stanislava Baltova
      Stanislava Baltova
      Blog Post Author

      Thank you! We indeed put a big focus on evolving our product family. 🙂

      Author's profile photo Dimo Uzunov
      Dimo Uzunov

      Congrats on the huge progress you've made with that part of UI5 framework! I'm looking forward into using Web Components in a real productive environment.

      Author's profile photo Stanislava Baltova
      Stanislava Baltova
      Blog Post Author

      Thank you Dimo! UI5 Web Components are technically separate offering from UI5 Framework, but we also plan to enable them back into the UI5 Framework so it benefits from this offering too.

      Author's profile photo Jeroen Vanattenhoven
      Jeroen Vanattenhoven

      Could you describe the benefits of using UI5 Web Components when you're just using UI5 / Fiori (no React of Vue...)?

      Author's profile photo Oliver Graeff
      Oliver Graeff

      If you are using SAPUI5 in a classic SAP Fiori context (e.g. SAP S/4HANA), you are good. UI5 Web Components come into the picture if you want to leverage UI5 values / SAP Fiori design / enterprise qualities on top of 'other' UI technologies like Angular, React, Vue (be it in SAP or non-SAP solutions).

      Author's profile photo Davidson Matos Izefler
      Davidson Matos Izefler

      Very good news!! Congrats to all who are involved in this journey!!

      Author's profile photo Stanislava Baltova
      Stanislava Baltova
      Blog Post Author

      Thank you Davidson! 🙂

      Author's profile photo Marco Beier
      Marco Beier

      Congratulations! 🥳 The UI5 Web Components have come a long way since their announcement and I'm excited to see many more people getting involved and using them more actively now that it has it's first stable release!

      Author's profile photo Stanislava Baltova
      Stanislava Baltova
      Blog Post Author

      Thank you Marco! 🙂

      Author's profile photo Binh Luu Huy Thai
      Binh Luu Huy Thai

      Can you fix the URL of the Getting Started guide and Tutorials? They show Page not found.

      Author's profile photo Stanislava Baltova
      Stanislava Baltova
      Blog Post Author

      Hey thanks for letting us know and apologize for the inconvenience! The URLs are fixed now! 🙂

       

      Author's profile photo Sindhu S Shivaram
      Sindhu S Shivaram

      Hi,

      I just started checking on UI5 web components for React and went through below link and got the gist of it but was desperately looking for similar link or examples where some examples are shown on how to bind/query/consume oData services in UI5 web component for React applications.

      Get Started with UI5 Web Components for React | Tutorials for SAP Developers

      P.S: I am developing a responsive dashboard to display some charts and data counts based on date time (here date time is filter).

      Thanks and Regards.

      Author's profile photo Marcus Notheis
      Marcus Notheis

      Hi Sindhu,

      as UI5 Web Components (for React) is purely focused on rendering components, we don't provide any build-in mechanism to fetch/bind data.

      My personal recommendation is using TanStack Query which is a powerful library that is optimized for data fetching.
      Here's a codesandbox showing an example implementation of UI5 Web Components for React consuming an oData Service using TanStack Query: Example on CodeSandBox

      Best regards,
      Marcus