sapui5 Tutorial

What is SAPUI5?

Based on the theory above, SAP introduced an HTML5-based development toolkit, SAPUI5, which encourages one consistent user experience. By utilizing the theory above, apps built using SAPUI5 are responsive across browsers and devices - they run on smartphones, tablets, and desktops. The UI controls automatically adapt themselves to the capabilities of each device. To do this, SAPUI5 provides robust development concepts to create apps with consumer-grade, browser-based business applications. In a nutshell, UI5 is a client UI technology based on JavaScript, CSS and HTML5. Servers come into play for deploying your applications, storing the SAPUI5 libraries, and connecting to a database. Depending on the environment in which you are using SAPUI5, the libraries and your applications are stored for instance on SAP HANA Cloud Platform or another application server. The favored means to access business data for your application is by using the oData model.

The SAP UI development toolkit for HTML5 is a user interface technology that is used to build and adapt client applications. The runtime is a client-side HTML5 rendering library with a rich set of standard and extension controls and a lightweight programming model.

There are two flavours, OpenUI5 (the Open Sourced version) and SAPUI5 (the original licenced version). Both have the same technical core mechanisms and are collectively referred to as UI5.

UI5 provides many features to enable you to easily create and extend state-of-the-art user interfaces:

  • It supports RIA like client-side features based on JavaScript
  • It supports CSS3, which allows you to adapt themes to your company’s branding in an effective manner
  • It is based built-in extensibility concepts at code and application level
  • It uses the open source jQuery library as a foundation
  • It fully supports SAP product standards
  • It complies with OpenAjax and can be used together with standard JavaScript libraries
  • It offers extensive responsive controls to create platform independent user interfaces with less effort
  • It offers full Translation/i18n support
  • It features the Fiori Design language that is based on extensive UX research

You can get your first UI5 page started here. Also for more information see the developer guide and API reference, available in the respective SDK references: OpenUI5 SDK, SAPUI5 SDK. Demo Apps can be found be here