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.
- SAP's HTML5 Toolkit for Quickly Building Lightweight Business UIs on Multiple Platforms
- Key Features and Benefits
- Built with Leading Web Technologies
- Runs on Various SAP and Non-SAP Platforms
- SAP Applications Built with SAPUI5
- Further Information
SAP's HTML5 Toolkit for Quickly Building Lightweight Business UIs on Multiple Platforms
Key Features and Benefits
|Delight USERS||Foster INNOVATION||Build on STANDARDS|
|Any Screen on Any Device||Unmatched Extensibility||Enterprise Readiness|
|Cutting-Edge Controls||Timeless SAP Data Consumption||Eclipse-Based Designtime|
|Powerful Theming & Branding||Fast Cross-Platform Release Cycles|
Openness and Flexibility
|Efficiency and Performance||Productivity Services||Great Productivity|
- 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
- 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
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
Built with Leading Web Technologies
|New HTML||JS Library||Style/Layout||Connectivity||Interoperability||Theming||Data-Driven Docs||Accesibility|
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 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 Platform||OpenUI5 for Open Source Platforms |
Starting with upcoming release of SMP 3.0
SAPUI5 supports the standard deployment procedures as they are available.
*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
UI Development Toolkit for HTML5 - General Resources
- UI Development Toolkit for HTML5 Developer Center: SCN Community for 'UI Development Toolkit for HTML5'
- Download Evaluation Package for UI Development Toolkit for HTML5 for a free 90 days trial
- SAP Documentaion - UI Development Toolkit for HTML5 Demokit: UI Development Toolkit for HTML5 - Demo Kit with Developer Guide Documentation, Control Library and API-Reference (in SAP NetWeaver Cloud)
- SAP Tutorial on SCN: How to Create and Run a Simple SAPUI5 Application from Scratch within 20 Seconds This Document explains how to create and run a simple SAP HTML5 application from scratch within twenty seconds (with some practice… the current record is 16 seconds). If you are interested in exactly doing this without reading too much, you can jump right down to the next chapter on this page.
- SCN Blog: How to Write Testable SAPUI5 Applications, MVC aspects of SAPUI5, TodoMVC app implemented in SAPUI5, simple module testing
- SCN Blog series: Consume NetWeaver Gateway services via SAPUI5 - Part 1, Part 2, Part 3, by Ivan Femia
Using UI Development Toolkit for HTML5 on SAP NetWeaver AS ABAP
- SCN Blog and Tutorial PDF: New E2E Tutorial: Gain Hands-on Developer Experience with SAPUI5 and SAP NetWeaver Gateway
- SCN Blog: Introducing the new UI Add-On for SAP NetWeaver: Introducing the new UI Add-On for SAP NetWeaver, by Filip Misovksi, SAP AG: UI Decoupling at SAP, What to Expect in the Product, When and Where
- SAP Online Help - User interface add-on 1.0 for SAP NetWeaver: Entry page to all Guides for Installation and Upgrade, Development, Security, System Administration and Maintenance and to central SAP Notes.
- SAP Online Help (PDF) - Developer Guide User Interface Add-on for SAP NetWeaver AS ABAP: Chapters: UI development toolkit for HTML5 Installation Guide, UI development toolkit for HTML5 Security Guide
- SAP Online Help - Master Guide User Interface Add-on for SAP NetWeaver AS ABAP: Developing applications with the UI development toolkit for HTML5 on SAP NetWeaver AS ABAP using UI Add-On for SAP NetWeaver: find related information, software units, Software Component matrix, system landscape, overall implementation sequence.
- SAP Note 1666367 - Release strategy for UI add-ons 1.0 for SAP NetWeaver: UI Add-Ons for SAP NetWeaver Realease Strategy
- SAP Note 1666368 - Installing UI add-ons for SAP NetWeaver: Describes the installation of the ABAP components of UI add-on for SAP NetWeaver
- SAP Note 1666369 - SPs for UI add-ons for SAP NetWeaver: Contains information about add-on support packages for UI add-on for SAP NetWeaver
- SAP Note 1686090 - Translation Object for SAPUI5 (ABAP): If you use the SAPUI5 ABAP team provider function in the UI add-on in an SAP NetWeaver 7.03/7.31 system and want to use the translation feature, this note must be implemented in the translation system to enable the translation of SAPUI5 text elements.
Using UI Development Toolkit for HTML5 on other SAP Platforms
- SCN Blog: SAP HANA Extended Application Services , by Tom Jung
- SAP HANA Extended Application Services - Developer Guide - Chapter 11: Building UIs with SAPUI5
- SCN Blog and tutorial doc: SAP HANA Cloud Application Development Scenario End-to-End Tutorial
- SAP Help: SAP HANA Cloud Platform Documentation - UI Development with SAPUI5, You can download the documentation as PDF file by pressing the link 'Documentation as PDF' in the page header toolbar of the SAP Help page.
- SCN Blog: Using SAP NetWeaver Cloud and SAPUI5 Part 1 - System setup, Part 2 - Hi SAP UI5, may I introduce you to Neo?
- SCN Blog: What's new in NetWeaver BPM 7.31 SP05 - UI5 Integration, by Christian Loos, SAP AG
- SCN Blog: Developing SAP UI5 applications in SAP NetWeaver Developer Studio - Part 1/2, Part 2/2 , Christian Loos, SAP AG
- SAP Note 1708020 - Support of UI5 based on ABAP applications in the portal