Skip to Content
Author's profile photo Andreas Kunz

What is OpenUI5 / SAPUI5 ?

A basic overview for anyone who has not heard of OpenUI5 / SAPUI5 before

[Note: this blog post has been written in December 2013, when UI5 was open-sourced. However, I have added updates where required. – January 2015]

Intro

So now this JavaScript library named “OpenUI5” (the Open-Source-licensed version of SAPUI5) has left its SAP niche and stepped into public. And you are web developer and wonder what to make of it.

The easiest thing would be to just ignore it. You know, it comes from that big business software company, so it hardly can be cool or useful. And there are plenty of other libraries, so why care?

Because you might be missing something. Seriously.

First of all, relax: UI5 is in no way limited to business software and its developers are a bunch of people like you who just happen to work for that company named SAP. And who happen to love Open Source, so they not only used LOTS of Open Source libraries when building UI5, but also fought for open sourcing UI5 itself.

So now what is OpenUI5 / SAPUI5?

It is a JavaScript UI library consisting of a feature-rich core and a really large number of UI controls which are organized in a handful of libraries.

By “feature-rich” I mean stuff like data binding and models for different data sources, an efficient engine for creating and updating the HTML of the controls, support for a Model-View-Controller concept, support for declarative UI construction and HTML templates, automatic loading of the appropriate language resources and many other features along these lines.

The controls (around 100 or 140 of them? Hard to count exactly… [as of January 2015 there are roughly 200 controls, as of May 2018: 360 controls]) range from simple Button controls to complex ones like the sap.m.SplitContainer (with a responsive master-detail behavior and animated page navigation) and provide support for accessibility, keyboard navigation, touch interaction, right-to-left languages etc. out of the box. Different visual themes are available and can be adapted by either modifying the CSS or using the Theme Designer (a WYSIWYG tool, which is currently not yet released as Open Source, though [but a special free version for users of OpenUI5 will be offered]).

SAP is using this UI library for business applications, where standards like security and supportability are crucial, so protection against cross-site scripting and other attacks and a powerful error analysis/inspection tool is integrated. And for sure SAP is investing a lot into automated and manual tests, from unit tests to screenshot comparisons.

UI5 is based on jQuery, which of course can be directly used in UI5 applications, but there’s a lot on top of it, so most of the time you might rather find yourself working with the controls.

Many other Open Source libraries are used in UI5 and come bundled with it, e.g. LESS, the famous CSS processor, or datajs, the OData library.

This blog entry is not going to be a programming introduction, but if you want to see more code and more about the usage of UI5, you will find links with plenty of resources at the end of this blog entry.

A bit of History

Even though UI5 is only now stepping out into the Open Source space, it has in fact been developed and matured for years (initially under the codename “Phoenix”, hence the bird-like logo). So don’t expect a beta.

SAP has been using UI5 in a couple of products already, most notably the family of “Fiori” applications revealed earlier this year (see https://experience.sap.com/fiori for information and screenshots). Decoupling UI development (where customers expect frequent iterations to follow web UI trends and to get support for the newest devices) from backend updates (where typical SAP customers expect to run the same version for many years without expensive and disruptive upgrades) has been a major driving force behind the development and adoption of UI5. As well as the desire for a UI technology which is more standards-based, flexible and extensible than before and at the same time still fulfills all the stability, accessibility and security standards required from business software.

If you do a Google Image Search on “sapui5 fiori”, or just on “sapui5”, you will get an impression of SAP’s software using UI5 as well as prototypes and applications of customers/partners.

Why is UI5 Open Source now?

One reason was there from the very beginning of UI5, when it was still called “Phoenix”: we always felt it should be Open Source. It just felt right and in line with the basic principles of UI5 which were all about openness and standards. But as you can imagine, in big companies and considering all the legal implications, open-sourcing something is not an easy task, so among all the pressure for features this topic got pushed back again and again.

However, with the growing popularity of SAPUI5 within the SAP developer community demand to open it up has increased (e.g. Jan Penninkhof and others have compiled a list of good reasons to open-source UI5).

And we also felt it was time to do it before it was too late – UI5 will profit when more people are using it. Be it due to feedback, bug reports, contributions, or simply because there is a bigger pool of UI5-aware developers in the world who can help each other.

How and why is “OpenUI5” different from “SAPUI5”?

“OpenUI5” is the free version available under the Apache 2.0 Open Source license.

“SAPUI5” is the version that may only be used by SAP customers with a certain kind of license. (It’s still free for them, but they have paid some other SAP product.)

The good news is: most importantly, the entire core of “OpenUI5” and “SAPUI5” (containing all central functionality) is identical. The most-commonly used control libraries, containing the vast majority of all existing controls, are identical. All of this can now be used for free, when using OpenUI5.

The difference is in some more exotic control libraries which have not (or not yet) been put under an Open Source license. There are several reasons, including legal issues, organizational clarifications (developed in different parts of SAP) – and after all SAP is still a company which has to pay its employees (thanks! ;-)), so it may choose not to give everything away for free. You find the same pattern with other Open Source libraries and products…

But anyway, the vast majority of all things UI5, including all things which have been developed close to the core of it are free. And there are no paid extensions. There is no intention to make any money with UI5.

This was the technical perspective. Beyond that, there is a difference regarding support: for SAP customers with that certain sort of license the “commercial version” SAPUI5 comes with support agreements, so SAP guarantees bug fixing (don’t ask me for the terms in detail…). These support guarantees are naturally not coming with the completely free Open Source version of UI5. But still, it is not a fork or so:OpenUI5 also gets the bug fixes done for SAPUI5. It’s the same thing, just a subset. A big one.

How open is OpenUI5?

Very simple:

  • It is now available under an Open Source license. So you can use it without any payment to do more or less whatever you want. (So it is “free as in ‘free beer'”.)
  • A contribution process has not been set up yet and the sources are not yet available on Github [Update: this has changed in 2014, see the following bullet point]
  • The sources are available at GitHub and:
    • you can browse them and follow development directly, which is all happening there
    • you can report bugs and propose enhancements
    • you can contribute changes and bugfixes

…so it is also “free as in ‘freedom'”.

So what should I use OpenUI5 for? And for what shouldn’t I?

When you want to put a clickable button on an otherwise entirely static web page, or when you want to layout a couple of HTML elements on the screen, using UI5 (or any other similar JS library, for that matter) would probably be too much overhead.

But when you want to access JSON or XML data from a server, present it nicely with a rich set of controls, when you want an interactive app to inspect or edit data, when you want users to be able to sort and filter, when you want all these things to happen in a solid and proven way, then you have good reasons to use UI5.

Especially when you want this to happen on all kinds of platforms, from mobile phones to big desktop PC screens.

Comparing OpenUI5 to other JavaScript UI toolkits is a huge task… I’ll leave it for later. It is definitely more feature-rich – sure: and bigger – than low-level toolkits like jQuery or slim UI toolkits like Bootstrap. There are advantages and disadvantages on both sides which have to be considered case by case.

And now?

What I would suggest is:

  • go to the OpenUI5 web page and explore it from there.
  • if you are into code, study this small example mobile app (not in IE9 and lower due to cross-domain issues) and try to understand how it works. Should not be too hard, actually, it’s just 1-2 screens of code but already giving you master-detail page animations, data binding etc.
  • if you rather want to try it right away, check out the demo apps
  • if you prefer understanding the concepts first, start with the Developer Guide which describes loads of things from the first steps to really advanced topics

Be open for new things!

We are open for feedback and comments.

Assigned Tags

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

      This is great news, and thanks to the team for the development of such a cool and very flexible and usable framework.

      Author's profile photo Tobias Munk
      Tobias Munk

      Very nice!

      Maybe the OpenUI5 team can try to trigger a post in http://www.heise.de/open/

      for addressing a bigger community.

      Author's profile photo Andreas Kunz
      Andreas Kunz
      Blog Post Author

      Yeah, well, we might.

      But since after waiting so long the actual Open Source release was kind of rushed, we'd like to fix some issues first and make sure we are ready for a broader audience and also have some answers for the typical questions as well as a more concrete plan moving forward (e.g. related to issue tracking and contributions).

      Regards

      Andreas

      Author's profile photo Tomasz Mackowski
      Tomasz Mackowski

      Great news!

      Author's profile photo Zhichao Chen
      Zhichao Chen

      Very good, I'm looking forward to seeing it replacing webdynpro!

      Author's profile photo Former Member
      Former Member

      It's really fantastic news! Is it possible to make UI5 and Extjs work together? e.g. for grid control, the rendering performance of UI5 is much slower than Extjs if lazy rendering is disable intentionally(in UI5, by default only the first 7 rows will be rendered), we are thinking the possibility to leverage both library. Thanks!

      Author's profile photo Madhu Vadlamani
      Madhu Vadlamani

      Super.

      Author's profile photo Abhijeet Kulkarni
      Abhijeet Kulkarni

      This is a godsend! We have been thinking of building our non-ERP apps in SAPUI5, so that as and when the ERP (and EP) migrates entirely to SAPUI5, the end users would get a seamless interface. With OpenSAP, this, and much more is possible.

      I am sure the developer community will love this initiative. 🙂

      Author's profile photo Former Member
      Former Member

      Great work, especially the "part Especially when you want this to happen on all kinds of platforms, from mobile phones to big desktop PC screens."

      Is it really true? Per my understanding even jQuery requires a different "light" lib when you want to build mobile UIs. Does it mean your based the code on jQuery mobile? If so, maybe make that clearer in the post would solve doubts like mine immediately.

      I checked out the controls, really really useful, will try to build things on this.

      On the open source part, I agree with Christian Grail in certain points, the open source spirit must thrive (though you need to figure out how), and here I guess the view of management is very important, they have to understand the benefits to give you guys full support. Keep the stake high 😉

      Keep my fingers crossed for news, updates, new projects basing on this great kit.

      Author's profile photo Michael Graf
      Michael Graf

      Hello Ge,

      yes it is really true and AFAIK we are currently the only library that covers Phone, Tablet, and Desktop with one set of responsive controls. To be more specific, the responsive controls are in the library "sap.m" shipped in OpenUI5 and SAPUI5. UI5 is built using features of jQuery, but not jQuery mobile.

      Kind Regards,

      Michael

      Author's profile photo Former Member
      Former Member

      Thanks Michael for resolving my doubt. I was looking for such lib but without luck. This will be definitely one winning point for this lib to go viral ➕

      Author's profile photo Former Member
      Former Member

      Maybe one more point to add to this - actually jQuery Mobile is also cross-platform, but of course it has a different focus. I would say now it has a rival from SAP 😎

      Since UI5 is created by SAP teams, I would expect you guys have a focus on enterprise UI framework (well maybe not only for that, but I would say a strong focus), while jQuery Mobile continues to be general platform. Anyone interested might need to understand his needs to decide which framework to use (or load both libs but not good for performance and might have limitations since both frameworks are not necessarily using the same jQuery core version?).

      So here comes to a wild idea - why not move the core technology on jQuery part to jQuery Mobile (which again also builds on jQuery core)? Don't know if it can be done due to the license but do think so - after all it's open source. Just thinking loud, I guess the move would be great from a technical point of view, but maybe less attractive when we think about all the released software SAP already sold... Anyways, just a thought.

      Author's profile photo Andreas Kunz
      Andreas Kunz
      Blog Post Author

      Hi,

      jQuery mobile has a quite different approach for UI construction which is very much focused on declaration and close to the HTML of the page. While with UI5 you CAN use a similar declarative way to build the UI, the overall concept of UI5 is broader and more open (like people can plug in their own View types which may be declarative but using a different notation) and internally based on programmatic UI construction, so I don't think it would be easy to combine them.

      But parts of UI5 (the lower-level components that do not depend on our UI control model) are indeed built as jQuery plug-ins (search for files starting with "jQuery*"...) and the initial idea was to contribute them to jQuery if there is enough interest, or to provide them as standalone jQuery plug-ins. Well, this has not happened yet... it's additional effort and given that the whole thing is Open Source now, I'm not sure whether anyone would benefit from this.

      Regards

      Andreas

      Author's profile photo Former Member
      Former Member

      From example with ODataModel:

      var oDataModel = new sap.ui.model.odata.ODataModel("http://services.odata.org/Northwind/Northwind.svc");

      Default to load odata metadata, http request method is options, as a result response 501 Not Implemented.


      What ways to change the http request method?

      Author's profile photo Christian Jianelli
      Christian Jianelli

      Hi Linjiang,

      Check this link http://scn.sap.com/thread/3367409

      Regards,

      Christian

      Author's profile photo Former Member
      Former Member

      Fantastic news!!!

      Read  little late on this...

      Camn't wait to get my hands play on UI5 🙂

      --thank you.

      --Divyesh

      Author's profile photo Juri Bauer
      Juri Bauer

      Great overview, thanks a lot!

      Author's profile photo Krishna Kishor Kammaje
      Krishna Kishor Kammaje

      Andreas,

      Will the new features in OPENUI5 get ported to SAPUI5? I see that OpenUI5 has new controls in the latest release, will those be available in SAPUI5?

      Author's profile photo Michael Graf
      Michael Graf

      Hello Krishna,

      yes, we will release all features for SAPUI5 also to OpenUI5 and vice versa.

      The most recent version for OpenUI5 is 1.22.4 (2014-07-16) and the next patch set will be released soon. Check our official home page on www.openui5.org for further details.

      Cheers,

      Michael

      Author's profile photo Avinash Chilukuri
      Avinash Chilukuri

      Thank you

      Author's profile photo Former Member
      Former Member

      hi!

      why is the sap.m.explored-App not available anymore?

      br alex

      Author's profile photo Virinchy Panangipalli
      Virinchy Panangipalli

      Alexander, There is a new documentation available now and can be found here

      Author's profile photo Former Member
      Former Member

      thanks!

      br alex

      Author's profile photo Andreas Kunz
      Andreas Kunz
      Blog Post Author

      Hi Alexander,

      you already got the link, but the "why" is: because it is now not only about "sap.m", but about other libraries as well, so it was moved to a more central place and got its own toplevel entry in the sdk.

      The OpenUI5 version of the link is https://openui5.hana.ondemand.com/explored.html

      Andreas

      Author's profile photo rajeesh o
      rajeesh o

      Hi Andreas Kunz,

           How to clear/delete android application data in sapui5?

      Regards

      Author's profile photo Former Member
      Former Member

      Thanks

      Author's profile photo Saurabh Parikh
      Saurabh Parikh

      Awesome post... Really helpful....

      Thanks

      Author's profile photo Former Member
      Former Member

      Hi Andreas,

      can you answer me some questions?:

      sapui5 is on special Netweaver Releases on the system, or on older versions it can be added with some patches.

      • which patches do i need, or which system requirements do i need for installing sapui5 on the system?
      • how can openui5 resources be used on SAP Systems? are there batches for them or do we need to upload the resources manually in a mime repository?
      • is there still support from SAPUI5 or are there only updates, features and bugfixes on OPENUI5?

      thanks and br,

      Alex

      Author's profile photo Abhijeet Kulkarni
      Abhijeet Kulkarni

      Hello Alex,

      SAP UI5 can be brought into SAP ABAP stack through a component CA-UI5 (SAP UI development toolkit for HTML5 - Rendering library). This is supported between SAP NW ABAP 7.0 to 7.31. It is a pre-installed component in SAP NW ABAP 7.4. Refer SAP Notes 1747308, 1666368 and 1666369.

      SAP UI5 artifacts are best built on Eclipse, connected to your SAP ABAP landscape through ADT (Refer notes 1708020 and 1718399). This setup moves the Eclipse project to a SAP BSP application. However, you can build SAP UI5 based BSP application by hand, pointing the bootstrap url to the pre-defined installation location of SAP UI5 libraries.

      To my knowledge, OpenUI5 lags behind SAP UI5 in features by certain release cycles. That is, OpenUI5 is SAP UI5 - minus proprietary libraries like charting - after a gap of few weeks.

      Author's profile photo Andreas Kunz
      Andreas Kunz
      Blog Post Author

      No, OpenUI5 and SAPUI5 are completely in sync!

      There are no separate codelines, same version means identical code, just with a different label on it and different license headers.

      But you are right that the overall functionality is not exactly the same: SAPUI5 contains some control libraries that are not contained in OpenUI5. This is not a matter of versions lagging, but those libraries are just not Open Source. This is the case for the chart library as most significant example and some others that are anyway less relevant outside SAP scenarios. So all the important stuff is in OpenUI5 as well, and in the same version. This includes the entire UI5 core with all framework-like functionality.

      Regards

      Andreas

      Author's profile photo Andreas Kunz
      Andreas Kunz
      Blog Post Author

      Hi Alex,

      • Abhijeet already answered the patch question better than I could.
      • There is no special mechanism to import OpenUI5 resources on SAP systems, but it's really not required because you get the same code with SAPUI5 (plus some more that is not in OpenUI5).
      • SAPUI5 and OpenUI5 are both fully supported with features and bugfixes. As written in my reply to Abhijeet, they are both built from the identical codeline.

      Regards

      Andreas

      P.S.: regarding "identical" OpenUI5 and SAPUI5 one has to be aware that the version numbering is a bit confusing: SAPUI5 has an overall version AND a version for each of the libraries inside, which can be slightly different! So SAPUI5 in version 1.24.5 contains the UI5 core in version 1.24.4(!). And OpenUI5 is using the core version number. So OpenUI5 1.24.4 is identical to SAPUI5 1.24.5. But both were build from exactly the same code at the same time.

      Just a minor detail to confuse everyone. 😉

      Author's profile photo Former Member
      Former Member

      Thanks for your fast and detailed response. it did help me to understand that more clearly!

      br Alex

      Author's profile photo To Sha
      To Sha

      Hi Andreas,

      The newest version of openui5 is 1.26.X,

      But sapui5 still remains the version 1.24.X.

      Do you have any idea when the sapui5 1.26.X will be release?

      thanks.

      To, Sha

      Author's profile photo Andreas Kunz
      Andreas Kunz
      Blog Post Author

      Hi To Sha,

      SAPUI5 is available (for SAP customers) since about a week from the usual channels.

      If you refer to the online installation at sapui5.hana.ondemand.com, this deployment is handled by some other team. I don't know their update schedule, but some internal documents suggest that it might happen in the next few days...

      Regards

      Andreas

      Author's profile photo To Sha
      To Sha

      I have confirmed the new version of sapui5.

      Thank you for your information.

      Regards,

      To Sha

      Author's profile photo Durga Rao Vaddadi
      Durga Rao Vaddadi

      This is great news for the SAP community.Good Information.

      Author's profile photo Rekha D R
      Rekha D R

      This is a great explanation about the SAPUI5. Thank you Andreas !

      Author's profile photo Former Member
      Former Member

      Very good explanation given by this author. SAPUI5 is a tool, combination of HTML5 and JavaScript.

      Author's profile photo Former Member
      Former Member

      The question was not only answered, but given a detailed analysis. Well done sir.

      Author's profile photo Former Member
      Former Member

      Nice article. Thank you.

      Author's profile photo Ashutosh Moharir
      Ashutosh Moharir

      Great information!

      Author's profile photo Former Member
      Former Member

      Hello Sir,

      Great work! But through some light on other apps

      Author's profile photo Former Member
      Former Member

      Great! I will develop my first Application under SAPUI5

      Author's profile photo Former Member
      Former Member

      Hello Andreas,

       

      thank you for comparing SAPUI5 and OpenUI5. While reading this blog, I recognised that some people see SAPUI5 as a UI library and other people see it as a framework or even better as a toolkit.

      Is there a clear differentiation between them?

       

      Regards,

      Timo

       

      Author's profile photo Andreas Kunz
      Andreas Kunz
      Blog Post Author

      Hi Timo,

      There is no clear and unique definition of these terms...

      Anyway, I think UI5 can be all of them, depending on how it is used. It can be a library of a couple UI controls you spread across an HTML page or of utility functions you call for formatting Dates etc. It can be a framework where you declare many things like models and routes and views in the manifest, the UI in XML files and just implement some lifecycle method and event callbacks. And whatever a toolkit officially is, I'm sure it can also be used as such.

      Because it contains framework aspects and covers different levels of abstraction, I guess calling it a framework overall isn't that wrong, but I'd never try to argue with anyone who disagrees. 😉

       

      Regards,

      Andreas

      Author's profile photo Mike B.
      Mike B.

      Thanks for the post, one more question, comparing «Samples Explore and download code samples» page:

      I paid attention that OpenUI5 lacks such useful components as Charts and Maps which seems have no direct ties with SAP environment.

      Are there any plans to bring these to modules to OpenUI5?

      Thanks.

      Author's profile photo Andreas Kunz
      Andreas Kunz
      Blog Post Author

      Hi Mike,

      the reason for them not being in OpenUI5 is mostly organizational: different libraries are developed in a modular/federated way in different teams, departments, countries, continents. Being responsible for their code, they can decide on their own whether they want to go that additional step to open-source their library, with all benefits and additional duties that come with this step.

      There are libraries which are open-sourced after a while, the sap.suite library is a current example on this way. But to be honest, I haven't heard of the same thing happening with the charts or maps soon.

      However, there are thirdparty UI5 libraries like the Google Maps one at https://ui5lab.io/: https://ui5lab.io/browser/index.html#/Samples/openui5.googlemaps and integrating d3 or other visualization/chart libraries for your specific use-case is also not that difficult.

      Regards

      Andreas

      Author's profile photo Renaldo Louis
      Renaldo Louis

      hello, thanks for the blog, this is very informative and very helpful. but i do have some question, lets say i want to develop website using SAPUI5(not the openUI the free source one), what do i need to have so that i can give that website that i have created to my client? do i need some license? you do say that they have already pay some other sap product, can you give what product for example? thank you.

      Author's profile photo Andreas Kunz
      Andreas Kunz
      Blog Post Author

      Hi Renaldo, I'm sorry, but being purely on the technical side of things, I cannot answer this question. I'd ask around if there is a simple answer, but your best bet would be to let the customer ask their contacts at SAP. Those will be more on the business/contract side of things.

      Author's profile photo Margot Wollny
      Margot Wollny

      Hi Renaldo,

      If you develop something with SAP software involved (like SAPUI5) and plan to distribute it commercially, first of all, you need a licence that allows you to do so. There are special licences for partners so they can develop, test and demonstrate their solutions based on SAP Software. I found here a nice overview about the SAP Partner Licencing Services available but would recommend to get in contact with the SAP Partners for further details.

      Only as a second step, also the customer that buys your solution needs to have a license grant of a SAP product that contains SAPUI5 and allows the deployment of your SAPUI5 app to its platform as part of the agreement (your website or whatever you developed with SAPUI5 needs to be severed from an SAP granted platform/sever). SAP BTP, Cloud Foundry Runtime or S/4HANA are such products as far as I know. But also here best ist to get in contact with your or your customers SAP Account Representative.