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: 

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



 

 

 

 
14 Comments
Former Member
Nice evolution of UI5, along with other popular frameworks like React, Vue etc.

Thanks.
DimoUzunov
Participant
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.
DavidsonIzefler
Explorer
Very good news!! Congrats to all who are involved in this journey!!
wridgeu
Participant
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!
0 Kudos

Thank you Davidson! 🙂

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.
0 Kudos
Thank you Marco! 🙂
0 Kudos
Thank you! We indeed put a big focus on evolving our product family. 🙂
jvanattenhoven
Participant
0 Kudos
Could you describe the benefits of using UI5 Web Components when you're just using UI5 / Fiori (no React of Vue...)?
former_member617152
Discoverer

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

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

 
OliverGraeff
Product and Topic Expert
Product and Topic Expert
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).
sindhu_s
Explorer
0 Kudos
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.
marcusnotheis
Associate
Associate
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