Get to Know the UI Development

Toolkit for HTML5 (aka SAPUI5)

created by Bertram Ganz on Sep 13, 2012 1:47 PM, last modified by Bertram Ganz on Apr 22, 2014 3:50 PM
Version 11
inShare23

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
Key Features and Benefits
Delight USERS
Foster INNOVATION
Build on STANDARDS
Built with Leading Web Technologies
Runs on Various SAP and Non-SAP Platforms
SAP Applications Built with SAPUI5
SAP Fiori - Keeping Simple Things Simple
SAP ERP Add-Ons - HR renewal 1.0 SP03 (RTC 9/2012):
SAP Customer Engagement Intelligence powered by SAP HANA
SAP Liquidity Risk Managment powered by SAP HANA
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
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 USERS Foster INNOVATION Build on STANDARDS
Any Screen on Any Device Unmatched Extensibility Enterprise Readiness
 Delight USERS Foster INNOVATION Build on STANDARDS
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
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
HTML5 jQuery CSS3 OData OpenAJAX LESS D3.js ARIA
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 Java and Portal

SAP NetWeaver AS ABAP*
Since September 2012, delivered withUI Add-On Starting with SP stack 5 for SAP NetWeaver 7.31, October 2012. Read more
1.0 SP01 for SAP NetWeaver ....
7.0/7.01/7.02/7.03/7.31. SAP NetWeaver Portal 7.3 SPS9 offers integration with SAP UI5 on two
levels: Unified Framework Page, integration via new SAPUI5 iViewtemplate
from the portals 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.
OpenUI5 for Open Source Platforms
SAP Mobile Platform
Starting with upcoming release of SMP 3.0 NOTE: OpenUI5, the open source variant of SAPUI5, is available
onGithub 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 All Things 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
SAPUI5 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 Build a SAP HTML5 Application Using MVC with the SAPUI5 Application Development Tool:
This document explains how to create and run a simple SAP HTML5 application from scratch by using the SAPUI5 Application
Development Tool. The Eclipse-based tool provides wizards to create application projects and views according to the UI5 Model-
View-Controller concept, supports the developer with JavaScript code completion for the UI5 controls and offers an in-place
preview.
SAP Tutorial on SCN: How to Create and Run a Simple SAPUI5 Application from Scratch within 20 SecondsThis 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