UI5 Applications Development on the

HANA Cloud Platform

2012 IBM Corporation

Supported scenarios of SAP HANA Cloud Platform

BUILD New Cloud Apps

EXTEND On-Premise Apps

ON-PREMISE
SOLUTION
Data

EXTEND Cloud Apps

CLOUD
SOLUTION
Data

RUN Application Management and Runtime

2013 IBM Corporation

BUILD New Cloud Applications

SAP PRECISION MARKETING

SAP Precision Marketing helps the Socit de
Transport de Montral inspire customer loyalty by
delivering real-time personalized offers to
passengers at hundreds of local merchants.

2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

BUILD New Analytic Applications

SAP LUMIRA
SAP Lumira helps business users access,
transform and visualize data, so they can
deliver immediate, fact-based answers to
complex business questions.

2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

EXTEND SAP On-Premise Solutions

DANONE
SAP HANA Cloud Platform helps
Danone call center employees
deliver a more personalized
experience to its customers with an
intuitive application connected to
SAP on-premise systems.
2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

EXTEND SAP On-Demand Applications

SAP SUCCESSFACTORS
By creating extensions to SAP
SuccessFactors, companies can
add new functionality tailored to
their business, while providing a
harmonized end user experience.

2014 SAP AG or an SAP affiliate company. All rights reserved.

Customer

SAP HANA Cloud Platform

Seamlessly extend and integrate

business processes to the cloud for greater agility
Rapidly build and deploy applications
in the cloud for quicker time to value
Instantly analyze and respond with real-time apps
that enable you to succeed in the window of opportunity
Build mobile ready, feature-rich applications
to drive productivity and customer satisfaction

2013 IBM Corporation

Who do you need to build a new custom application

UX Designer / Business Experts
Create app mock-up
(layout and interactions)

App Administrator
Define app roles
Insert app into application catalog
Assign app role to the users

UI Developer
Create SAPUI5 project using a template
Select the data service and bind the fields
Implement controller events (e.g., navigation)
Execute tests
Deploy project to front-end system (GW Hub)
Create and execute tests
Data Modeler
Define OData model
Gateway Developer
Import OData model
Map OData entities to ABAP structures
Map BAPIs to REST operations
Implement performance and transnational patterns if required
2013 IBM Corporation

How to build a new custom application

Build native SAP HANA applications on SAP HANA Cloud Platform.
Eclipse-based tools for connecting to your SAP HANA instance on SAP
HANA Cloud Platform.
Use of SAP HANA studio features for SAP HANA development.
Develop, deploy and use Java applications in a cloud environment.
Applications run on a run-time container where they can use the platform
services APIs and Java EE APIs according to standard patterns.
Develop and run lightweight HTML5/SAPUI5 applications in a cloud
environment.
HTML5 applications consist of static resources (HTML, JS, CSS, ...)
Connect to any existing on-premise or on-demand REST services.

2013 IBM Corporation

SAP UI Development Toolkit for HTML5 (aka SAPUI5)

The UI Development Toolkit for HTML5 (SAPUI5) is an
extensible JavaScript-based HTML5
control rendering library for business applications.

It comes with:
Runtime
Interactive documentation
Eclipse-based Tooling

SAP contributes key elements of SAPUI5 to

Open Source community:
http://sap.github.io/openui5/

2013 IBM Corporation

SAPUI5 Main Characteristics

Uses the jQuery library as a foundation
Supports the development of custom controls as an extension to the
standard offering
Provides full control of UI themes for customer branding
Allows usage of own JavaScript and HTML
Fully supports SAP Product standards
Platform independent
The development of SAPUI5 is not tied to any other code lines thus
enabling short shipment cycles

2013 IBM Corporation

UI development toolkit for HTML5 (SAPUI5)

2013 IBM Corporation

SAPUI5 Key Components

Server component
SAPUI5 Core
Includes core,base and model modules
Dependency / Class-Loader to load control libraries
Render manager creates HTML strings for the instantiated
controls
Extension libraries
Controls
Themes

2013 IBM Corporation

Model-View-Controller Concept in SAPUI5

2013 IBM Corporation

Model-View-Controller Concept in SAPUI5 (Contd.)

View Types:
XML (sap.ui.core.mvc.XMLView)
JavaScript (sap.ui.core.mvc.JSView)
JSON (sap.ui.core.mvc.JSONView)
declarative HTML (sap.ui.core.mvc.HTMLView)
Controller:
Are defined in JavaScript
Can be bound to view (view controller)
Can be unrelated to any specific view (application controller)
Model Types:
XML, supports 2-way-binding
JSON, supports 2-way-binding
OData, experimental 2-way-binding

2013 IBM Corporation

SAP Web IDE - Speeding development by reducing effort

2013 IBM Corporation

SAP Web IDE - Product Benefits

Increases developer productivity by simplifying development to
create apps
Develop once, deploy everywhere & run on any device - mobile,
tablet, desktop
Reduces cost, complexity and effort through cloud-based offering
Enables business experts and designers via highly efficient tools
Improves team productivity with the ability to code and collaborate anywhere
Profit from code templates and SAP best practices to rapidly build applications

2013 IBM Corporation

SAP Web IDE - In the SAP Technology Portfolio

2013 IBM Corporation

SAP Web IDE - Simplify UI5 development

2013 IBM Corporation

Get accurate prototypes from designers/analysis

Empowering Business Analysts and Designers to build and extend
Fiori/SAPUI5 applications that once required the assistance of
developers. Tighter collaboration between Developers, Business experts
and Designers by working closely together.
Drag-and-drop
UI building blocks
Binding apps to SAP data
Palette for mobile

Integration with prototyping tools planned innovation

Generating SAPUI5 apps from mockups
The app will be the base app application for the developer making a the hand-off
from business expert to developer seamless

2013 IBM Corporation

SAP Web IDE Development Tools

Increasing Developer productivity by simplifying development to create more apps
faster. SAP Web IDEs modular architecture offer extending it by adding your own
plug-ins.
Templates and wizards for creating Fiori/UI5 Apps
Project templates for creating new apps
Wizards for creating components as single logical units
Template library grouped by categories containing
technical details on delivered templates
Plug-in and template creation
Wizard of creating new plug-ins and templates
Ability to reuse existing template screens and created new templates
Auto complete for editing template files in code editor
Test plugin projects within SAP Web IDE

2013 IBM Corporation

SAP Web IDE Development Tools

Increasing Developer productivity by offering a robust code editor with code
completion (XML, JavaScript and SAPUI5) and an embedded API reference
pane.
Code Editor
Code Editor for JS and XML
Content/File search and replace (all) function pane
Syntax check with error / warning indicators
API reference pane for control documentation
Personalization to choose a different SAP themes
for code editor
Code completion
Context-based XML and JS code completion
for SAPUI5 controls
Snippet-based XML and JS auto-completion
Code completion for customer-defined global
variable/function/object cross different JS files
2013 IBM Corporation

Instant Preview in SAP Web IDE

Increasing Developer productivity providing an instant preview of the application
with real and mock data
Instant preview of application in the browser
for different resolutions and in different languages
Option to preview app in Fiori Launchpad sandbox
Preview with real or mock data
Mock data can be generated or created manually
QR code generation and display

2013 IBM Corporation

Supports all platforms

Seamlessly deploy to run on any device
Automatically renders for phone, tablet, desktop
Deploy to
SAP Mobile Platform
ABAP
SAP HANA Cloud Platform
SAP HANA XS

2013 IBM Corporation

SAP Web IDE Key Points

Evolve from development scenario to end to end lifecycle support
Enhanced layout editor with drag & drop capabilities
Continuous improvement of code editor
Additional plug-ins & templates
Management for plug-ins
Analytic integration
SAP Web IDE on HANA XS
Integration Gateway for Backend Access to SAP and Non SAP sources
Support for additional source code repository

2013 IBM Corporation

Thank you
Contact information:
Mohamed Hisham
IBM LSS Volunteer Program
SAP Technology Consultant
mohamed.hisham@cz.ibm.com

2013 IBM Corporation