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.
- e.g. look at the “Hello World” code examples
- download the runtime to build your own apps
- By the way: the “Demo Kit” / SDK available on https://openui5.hana.ondemand.com/ and containing all documentation is the same thing you can download as “UI5 SDK”. So basically that “UI5 SDK” is a copy you can install locally to have it always with you.
- 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
- e.g. the Samples area explaining the most important controls
- or the “Browse Orders” app which is a typical small UI5 application
- 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.
This is great news, and thanks to the team for the development of such a cool and very flexible and usable framework.
Very nice!
Maybe the OpenUI5 team can try to trigger a post in http://www.heise.de/open/
for addressing a bigger community.
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
Great news!
Very good, I'm looking forward to seeing it replacing webdynpro!
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!
Super.
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. 🙂
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.
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
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 ➕
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.
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
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?
Hi Linjiang,
Check this link http://scn.sap.com/thread/3367409
Regards,
Christian
Fantastic news!!!
Read little late on this...
Camn't wait to get my hands play on UI5 🙂
--thank you.
--Divyesh
Great overview, thanks a lot!
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?
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
Thank you
hi!
why is the sap.m.explored-App not available anymore?
br alex
Alexander, There is a new documentation available now and can be found here
thanks!
br alex
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
Hi Andreas Kunz,
How to clear/delete android application data in sapui5?
Regards
Thanks
Awesome post... Really helpful....
Thanks
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.
thanks and br,
Alex
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.
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
Hi Alex,
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. 😉
Thanks for your fast and detailed response. it did help me to understand that more clearly!
br Alex
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
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
I have confirmed the new version of sapui5.
Thank you for your information.
Regards,
To Sha
This is great news for the SAP community.Good Information.
This is a great explanation about the SAPUI5. Thank you Andreas !
Very good explanation given by this author. SAPUI5 is a tool, combination of HTML5 and JavaScript.
The question was not only answered, but given a detailed analysis. Well done sir.
Nice article. Thank you.
Great information!
Hello Sir,
Great work! But through some light on other apps
Great! I will develop my first Application under SAPUI5
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
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
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.
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
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.
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.
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.