Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5)
Tags:
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 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 |
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 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 | 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. |
*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
- 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 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 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