Skip to Content

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5)

This document provides a comprehensive introduction to the UI Development Toolkit for HTML5, also known as SAPUI5. It gives you an overview of the:

  • Key concepts behind SAPUI5
  • Benefits SAPUI5 provides
  • Web technologies SAPUI5 is built with
  • SAP and non-SAP platforms to which you can deploy your SAPUI5 applications
  • SAP applications leveraging SAPUI5

This is only a starting point; if you are interested in more specific topics please take a look at the various 'read more' and 'further information' resources linked to in this document.

Overview

SAP's HTML5 Toolkit for Quickly Building Lightweight Business UIs on Multiple Platforms

The UI Development Toolkit for HTML5 (SAPUI5) is SAP's new enterprise-ready HTML5 rendering library for client-side UI rendering and programming. It combines the advantages of being open and flexible as well as being enterprise ready supporting all SAP Product Standards. While Web Dynpro is best suited to heavyweight transactional applications for expert usage, SAPUI5 is designed for building lightweight consumer-grade UIs for casual usage. It targets developers at SAP and customers with web development skills (HTML, CSS3, JavaScript). SAPUI5 provides extensible controls and powerful theming but it is easy to consume, based on open standards and integrates with 3rd-party JavaScript libraries. SAPUI5 applications run on a wide range of devices (smartphone, tablet, desktop) and on multiple server platforms.

Key Features and Benefits

Delight USERSFoster INNOVATIONBuild on STANDARDS
Any Screen on Any DeviceUnmatched ExtensibilityEnterprise Readiness
Cutting-Edge ControlsTimeless SAP Data ConsumptionEclipse-Based Designtime
Powerful Theming & BrandingFast Cross-Platform Release Cycles

Openness and Flexibility

Efficiency and PerformanceProductivity ServicesGreat Productivity

Delight USERS

  • Any Screen on Any Device: SAPUI5 uses standards-based Web technologies to build a bridge between Web applications and mobile devices. You can now create modern HTML5 UIs with a native look and feel and run them on any device including tablets and smartphones. Both desktop and mobile applications are based on the MVC design paradigm and re-use the same core library and the same model and controller implementations. Read more: Browser Support, SAPUI5 for Mobile
  • Cutting-Edge Controls: Build beautiful and compelling HTML5 UIs with  a well-stocked, modular control library for both desktop and mobile applications.  Use standard controls such as value holders, layouts and dialogs. Take user experience to the next level with next-generation UX controls like ExAct (Explore and Act), Shell or ThingInspector. Include light analytical patterns by using  interactive business graphics based on SVG, Canvas or CVOM. Read more: Control Gallery, UX3 Controls like Shell, ThingInspector, ExactBrowser, QuickView …
  • Powerful Theming and Branding: Apply state-of-the-art theming capabilities to design beautiful UIs that meet your needs. To separate structure from layout, SAPUI5 uses CSS3-based techniques  that allow you to change the visual design of your applications without modification. SAPUI5 Tools integrated into Eclipse support you in creating and modifying themes with an enhanced CSS editor and application preview capabilities. It offers predefined themes like Gold Reflection that adhere to the latest SAP UX standards and also support various types of custom theming from color shifts or light adaptation of existing themes to newly created custom themes for the highest level of flexibility. In addition to pure CSS, we implemented advanced theming concepts like CSS parameters based on LESS, generic RTL support, runtime theme switching and base theme extension. Read more: Theming FAQ

Foster INNOVATION

  • Unmatched Extensibility: Extensibility was built into SAPUI5 from the outset. It allows to to quickly include all other innovations: You can create new controls, copy and modify existing ones or integrate non-SAP controls from other JS control libraries. The lifecycle of the new controls is decoupled from that of the SAPUI5 core library.  Every feature can be modified or replaced to suit the individual needs of the application. Based on Open AJAX compliance UIs built with SAPUI5 parts can be combined across UI technology borders for example with jQuery parts. Read more: Writing a Core Plugin, How to Develop Your own custom controls in SAPUI5
  • Timeless SAP Data Consumption: To adapt your application UIs without jeopardizing the integrity of the business logic, SAPUI5 decouples the business logic from the user interfaces, even across platforms and business process lifecycles (timeless software principle).This is achieved by means of a front-end model layer that implements a RESTful OData model for optimized interaction with the back end via SAP NetWeaver Gateway. SAPUI5 supports two-way data bindings from UI controls to various data sources (raw XML, JSON and oData) that hold the application data. Read more: Introduction to Data Binding, OData Model , Rebooting your User Interfaces with SAP NetWeaver Gateway (SCN blog from SAP Mentor John Moy) 
  • Fast Cross-Platform Release Cycles: SAPUI5 is independent of any SAP back-end release and can run on top of existing SAP systems so. It willl be available on the major SAP delivered plattforms and will therefore be available not only for SAP products built on these platforms but also for customer projects. Read more: Release Notes
  • Productivity Services: Your SAPUI5 application content can be enriched with enterprise qualities by consuming productivity services (for integration and interoperability) from the non-modifying UI add-on for SAP NetWeaver. Productivity services facilitate the interoperability of technologies and infrastructures across shell (such as SAP NWBC) and standalone browser scenarios. Services for navigation, launchpads, PFCG content, UI adaptations, building pages, authoring and content provisioning are available today (with SAP NetWeaver UI services v1.0 part of UI add-on for SAP NetWeaver), more UI integration services are planned and will be delivered quarterly  (e.g. navigation URLs for Portal or PFCG content, UI adaptation functions like personalization and customizing). Communication between SAPUI5 application frontend and the UI integration backend is done via RESTful OData services based on SAP NetWeaver Gateway. In the SAPUI5 application front end the services are available via JavaScript-based APIs. Read more: Introducing the new UI Add-On for SAP NetWeaver,  Developer's Guide for SAP NetWeaver User Interface services, JavaScript Docs for SAP NetWeaver User Interface Services

Build on STANDARDS

  • Enterprise Readiness: SAPUI5 in an industrial-strength solution making it the first choice when building enterprise applications. It goes beyond adherence to Web standards by complying with  all SAP product standards including security, globalization (right-to-left support), accessibility (ARIA support), software lifecycle and performance. SNOTE support allows you to deliver non-disruptive enhancements efficiently across multiple platforms (for SAP HANA XS, SAP NetWeaver Cloud, SAP NetWeaver AS ABAP and Java). To keep pace with the newest UI technology innovations the SAPUI5 is delivered with the quarterly updates. Read more: Security Guide, Right-To-Left (RTL) Support
  • Eclipse-Based Design Time: The SAPUI5 toolkit provides Eclipse-based application development tools that guarantee the best possible integration with various SAP IDEs and SAP server technologies. Our homogeneous Eclipse tools and editors support SAPUI5 application and control development with code-completion for HTML5 and JavaScript, built-in documentation, HTML5 templates support and wizards. This helps you to create and structure applications according to MVC. SAPUI5 tools are integrated into the ABAP Developer Tools for SAP NetWeaver (aka ABAP in Eclipse). An Eclipse Team Provider helps you use ABAP systems for managing source code and the integrated SAP Note and Modification Assistant allows you to consume the latest updates from SAP's Online Support System. Read more: SAPUI5 ABAP Repository, Translating texts of SAPUI5 applications in an ABAP system
  • Openness and Flexibility: We embraced Open Source Web technologies like JQuery, LESS and data.js  and standards like HTML, JavaScript and CSS wherever possible to make it easier to learn, to increase adoption and tighten integration. As applications built with the UI Development Toolkit for HTML5  are standards-compliant, they are future-proofed to work with browsers as they evolve.
  • Great Productivity: SAPUI5 is built for high productivity. It offers SAP developers and customers with Web developer skills a toolkit to design, build and adapt modern Web applications. It makes use of HTML5, JavaScript and CSS3 and is designed with developer  ergonomics in mind. Its well-designed APIs and comprehensive documentation help you get your job done fast. SAPUI5 has a built-in modularization concept that allows you to split larger JavaScript development into so-called modules. SAPUI5 also supports an optional lightweight model view controller (MVC) programming model that guarantees a clear separation between layout, structure and interaction. This allows several developers to work on the same page in a  distributed environment. Read more: The Model View Controller (MVC) Approach in SAPUI5, Component Concept,  Modularization and Dependency Managment

Built with Leading Web Technologies

HTML5jQueryCSS3ODataOpenAJAXLESSD3.jsARIA
New HTMLJS LibraryStyle/LayoutConnectivityInteroperabilityThemingData-Driven DocsAccesibility

Runs on Various SAP and Non-SAP Platforms

Rapid Cross-Platform Deployment: The UI Development Toolkit for SAPUI5 is independent from any SAP backend release and can run on top of existing SAP systems. With OpenUI5 SAP contributes key portions of the SAPUI5 framework as open source code on the GitHub site under an Apache Version 2.0 license.  Read more ...

SAP NetWeaver AS ABAP*SAP NetWeaver AS Java and Portal

Since September 2012, delivered with UI Add-On 1.0 SP01 for SAP NetWeaver 7.0/7.01/7.02/7.03/7.31.

Starting with SP stack 5 for SAP NetWeaver 7.31, October 2012. Read more ....
SAP NetWeaver Portal 7.3 SPS9 offers integration with SAP UI5 on two levels: Unified Framework Page,  integration via new SAPUI5 iView template from the portal’s GPAL repository.

SAP HANA Cloud
SAP HANA XS

Since August 2012

Starting with SP5 stack for SAP HANA Appliance Software in Nov 2012. Watch SAP HANA Acadamy videos with exercises 7,8, 9, 13 and 14 related to SAPUI5.

SAP Mobile PlatformOpenUI5 for Open Source Platforms

Starting with upcoming release of SMP 3.0

NOTE: OpenUI5, the open source variant of SAPUI5, is available on Github to be used on non-SAP platforms under the Apache 2 license. Read more ...

SAPUI5 supports the standard deployment procedures as they are available.
Apache Tomcat Server 6.x as  recommended Java web container.
Static web servers  like Apache HTTPD server or Internet Information Services (IIS) for Windows Server.

*Note:  In order to deploy SAPUI5 applications built with the Eclipse-based Tools to an ABAP environment, there are 2 options depending on the SAP NetWeaver release:

  • SAP NetWeaver 7.03/7.31: Direct integration via the SAP Repository Team Provider allows easy and fast deployment. For more information, see the User Interface Add-on for SAP NetWeaver Developer Guide.
  • SAP NetWeaver 7.00, 7.01, 7.02 and 7.03/7.31 < SPS04: In these releases, it is not possible to directly deploy or upload applications from the local Eclipse installation to the ABAP server. Deployment must take place manually by using an up-/download-report to connect the local SAPUI5 project from Eclipse to the SAPUI5 ABAP Repository. For more information see SAP Note 1793771.

SAP Applications Built with SAPUI5

Amazing new SAP applications are built with the UI Development Toolkit for HTML5. Look at the following examples ...

SAP Fiori  - Keeping Simple Things Simple

SAP Fiori is a collection of apps with a simple, easy to use consumer-grade user experience for broadly and frequently used SAP software functions that work seamlessly across devices - desktop, tablet, or smartphone. SAP Fiori applications leverage SAP UI5 (with its mobile library, responsive layouts, the new Bue Chrystal theme and the Productivity Services for SAPUI5) and SAP NetWeaver Gateway. The UI foundation of SAP Fiori is the UI add-on 1.0 SPS4 for SAP NetWeaver. See more: SAP Fiori on experience.sap.com, SAP HANA Marketplace - SAP Fiori, SAP Fiori Design Guidelines, SCN Docs SAP Fiori learning materials (2013 June edition) and What is SAP Fiori

SAP ERP Add-Ons - HR renewal 1.0 SP03 (RTC 9/2012):

The new web based solution leverages the SAPUI5 technology as well as a completely redesigned theme to fulfill the expectations of the new generation of users from a visual but also from an interaction point of view. The HCM start page utilizing the new lanes concept is built with the UI development toolkit for HTML5, the Productivity Services for SAPUI5 and the Suite Page Builder (as part of UI add-on for SAP NetWeaver). Read more: SAP Online Help - HR renewal 1.0 SP03, SCN blogs New SAP HCM Functionality - HR Renewal 1.0 and SAP New HR Renewal Functionality and Roadmap, by SAP Mentor @Jarret Pazahanick


SAP Customer Engagement Intelligence powered by SAP HANA

Read more: Announcing 3 New Customer Centric HANA Powered Applications Watch 3 min video: SAP Customer Engagement Intelligence powered by SAP HANA

SAP Liquidity Risk Managment powered by SAP HANA

Read more: SAP Liquidity Risk Management Powered by SAP HANA - product overview . Watch 5 min product demo

Further Information

UI Development Toolkit for HTML5 - General Resources

Using UI Development Toolkit for HTML5 on SAP NetWeaver AS ABAP

Using UI Development Toolkit for HTML5 on other SAP Platforms

Tags:
  • sapui5
  • sap_business_suite
  • beginner
  • css3
  • user_interface_technology
  • netweaver
  • sap_netweaver_gateway
  • fiori
  • abap
  • ui5
  • sap_interactive_forms_by_adobe
  • html5
  • sap_netweaver_7.3
  • improving_my_experience
  • sap_netweaver_platform
  • odata
  • sap_netweaver
  • netweaver_user_interface_technology
  • gateway
  • ui2
  • mobile_ux
  • toolkit
April 22, 2014 at 15:50 PM
96 Likes

32 replies