SAP Web IDE
Solution Overview
October 2014
Provided by SAP Customer Experience Group (CEG)
Legal disclaimer
The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the
permission of SAP. This presentation is not subject to your license agreement or any other service or subscription
agreement with SAP. SAP has no obligation to pursue any course of business outlined in this document or any related
presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation
and SAP's strategy and possible future developments, products and or platforms directions and functionality are all
subject to change and may be changed by SAP at any time for any reason without notice. The information in this
document is not a commitment, promise or legal obligation to deliver any material, code or functionality. This
document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied
warranties of merchantability, fitness for a particular purpose, or non-infringement. This document is for informational
purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in this
document, except if such damages were caused by SAP´s willful misconduct or gross negligence.
All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ
materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements,
which speak only as of their dates, and they should not be relied upon in making purchasing decisions.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
2
Agenda
Introduction and Overview
Developing Applications
Technical View
Additional Information
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
3
Introduction and Overview
Key trends
 By 2020 at least 70% of new app development will
happen on cloud1
 Developers collaborate more over cloud-based
infrastructures2
 Professional programmers are critical for the
development of complicated applications. They are
expected to deliver applications faster, with less
expensive and less need for a complex
infrastructure.2
 Business users needs to be abled to create custom
software applications that once required the
assistance of professional programmers2
1 Gartner
Application Architecture, Development & Integration Summit Dec. 2013
2 Gartner
Hype Cycle for Application Development 2013
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
5
From today to vision
AppDesigner
AppBuilder
Gateway
Productivity
Accelerators
SAP Web IDE
Eclipse
UI Development
Toolkit for
HTML5
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Fiori
Toolkit
6
Vision
Delivering a web-based development tool designed to support
the end-to-end lifecycle for SAPUI5 based applications
Prototyping*
Developing
Testing
Packaging*
Deploying
Extending
* not in current GA release, planned innovation
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
7
What is SAP Web IDE?
 A development environment to
• extend SAP Fiori apps and UI5 apps
• build new UI5/HTML5 or custom Fiori apps
 Browser-based (Web) tool available on SAP HANA Cloud Platform
and on SAP HANA XS*
 Provides standard Web development tools like code editors,
wizards, and WYSIWYG tooling that are optimized for building
responsive HTML5 apps with SAPUI5 (e.g., code completion)
 Application templates act as the foundation for highly efficient app
development
 Supports the E2E application lifecycle: UI design, development,
testing, deployment, and customer extensions for responsive
SAPUI5 apps
* not in current GA release, planned innovation
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
 Everything is source code-based – the tool never gets in the way
of the developer
8
Who is the target user?
 Anyone looking for a modern and secure IDE
 Users who want their code online and accessible from
anywhere so they work more efficiently
 Users who want to design, build, test, and deploy
responsive SAPUI5 and Fiori-like apps using SAP
HANA or Gateway OData services
–
–
–
–
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
SAP developers (SAP HANA, UI, etc.)
Non-SAP developers
Business experts
Designers
9
Product benefits
 Develop once, deploy everywhere & run on any
device - mobile, tablet, desktop
 Reduces cost, complexity and effort through cloudbased offering (zero installation)
 Increases developer productivity by simplifying
development to create apps faster
 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
* not in current GA release, planned for future release
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
10
Key features 1/2
Development environment
 Source code editor with SAPUI5
specific code completion
 Project persistency
 Layout Editor (WYSIWYG)
 Mock data support for testing purposes
 Instant preview in browser
 Search capabilities
 User-friendly interactive extension
mechanisms
 Import and deploy to ABAP repository
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
11
Key features 2/2
Templates for creating and extending projects
 New project:
– Empty SAPUI5 Application template
– SAP Fiori Application template
– SAP Web IDE Plugin Development templates
 Extensibility of SAPUI5 applications:
– Create extension project
– Extend controller
– Hide a control
– Extend a view
– Replace a view
– Replace a service
– Customize text of i18n resources
– Add new views to existing project
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Create your own custom template
12
Developing Applications
Development process overview
Create
New project
Develop
Coding
Source Code Editor with code
completion, dynamic API reference,
etc.
Templates
Wizards guiding the user through a
step-by-step process, automatically
generating needed files and code
Create
Preview
Develop
Preview
Deploy
Deploy
to
SAP HANA Cloud
Extensibility
project
to
WYSIWYG Design
Design the UI in the Layout Editor
ABAP repository
to
Visual
Extensibility
While running the UI5/Fiori app
select an element and apply an
extension, modification, replacement
Mobile Platform*
Git integration
* not in current GA release, planned for future release
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
14
Development environment overview
Create
Develop
Preview
Menu bar
User name
Toolbar
Search
 Save
 Create file
Deploy
 Find in files
(file name or content)
 Create folder
 Delete
Git
 Undo
 Manage your
development objects in
your Git repository
 Redo
 Run
History
Development
view
 Tag, Cherry-Pick, Revert
Collaboration
User
Preferences
 Integration with SAP Jam
Editor
API Reference
 SAPUI5 code editor
 Context sensitive
 Code completion
 Dynamic support
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
 Collaborate with project
members
15
Create
Create
Develop
Preview
Deploy
Various options are available for the developer to create a new project:
Create a new project
Create a project by importing the application from the
divers repositories
Create a project from
an existing archive
File > Import > Application from SAPUI5 ABAP Repository
File > Import > Application from SAP HANA Cloud Platform
File > New > Project
File > Import > Archive
Templates
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Create a project in an
existing Git repository
Create a new extension
project, e.g. for SAPUI5 or
SAP Fiori extensibility
File > Git > Clone Repository
File > New > Extension Project
16
Templates
Create
Develop
Preview
Deploy
the template wizard guides the user
through the definition of an
application and then generates the
code
Standard templates are provided







SAPUI5 Application Project
SAPUI5 Master Detail Application
SAP Fiori Starter Application
SAP Fiori Extension Project
Empty Plugin Project
New Component
Extensions
Additional templates of any kind can
be created, added and managed
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Template selection for new project
Template selection for new component
17
Template library
Create
Develop
Preview
Deploy
The Template Library displays all
the available templates
Tools > Template Library
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
18
Layout Editor (WYSIWYG)
Design your view graphically in the Layout
Editor and display the content of the XML view
Right-click the XML file and open with Layout Editor
 Design the view in the graphical display (Canvas)
 Drag & drop the SAPUI5 controls from the Palette to the
Canvas
 Configure the properties of the controls
 Bind the data fields to the OData service entity sets
 Check the outline of the XML view in the Outline pane
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
19
Layout Editor (WYSIWYG)
Canvas
Outline pane
 Content of the XML
view
 Outline of the XML
view
 Graphical display
Icon to open
Outline pane
Palette
 SAPUI5 controls
 drag & drop
controls to the
canvas
Properties and
Data pane
 Shows properties
and data of
selected control
 Entity sets and
propertise of
OData service
 OData binding
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
20
Coding (Assisted development)
Create
Develop
Preview
Deploy
 Code completion
– For JavaScript and XML
– Context sensitive
– Editor completes words, code fragments
or entire SAPUI5 objects
– JS snippets
 Insertion of XML code snippets
 Metadata completion from schema files
 API Reference pane
– Integrated API reference
– Context sensitive, dynamic support
 Auto-save
Consistent use of terminology is
provided by Application Domains and
localized strings (translation)*
* not in current GA release, planned for future release
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
21
New extensibility project
Create
Develop
Preview
Deploy
When creating a new extension project, you need to identify the parent SAPUI5 or standard Fiori
application being extended
File > New > Extension Project
Two options. Either you can:
1. import the parent app to the workspace
2. or, access the parent app remotely
The tool creates the extension project in your
workspace and generates the files such as
 Component.js
 index.html
 Etc.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
22
Extensibility by means of a template
Create
Develop
Preview
Deploy
The template for extending an SAPUI5 or SAP Fiori
app guides the user through a step-by-step process
All extension options of the SAPUI5 / SAP Fiori
extensibility concept are provided in the template:
 Create extension project
 Extend controller
 Hide a control
 Extend a view
 Replace a view
 Replace a service
 Customize text of i18n resources
 Add new views to existing project
To add a new extension, select the extension
project and choose one of the available templates.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
23
Extensibility via template:
Create
Develop
Preview
Deploy
Replace view example
This example illustrates the sequence of screens
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
24
Visual extensibility
Create
Develop
Preview
Deploy
 The Outline pane is displayed next to
the app
 While running the app, you can select
an element either in the Outline pane
or directly in the app when in
Extensibility mode
 Appropriate extension options can be
chosen
 Show all application elements, or filter
by extensible or extended elements
 Switch displayed language making
use of i18n features
 Application can get data online from
backend or use mock data
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
25
Run the application
Create
Develop
Preview
Deploy
You can run the application to test functionality and design
There are various ways to run your application:





Run with a frame
Run without a frame
Run with mock data
Run on the SAP HANA Cloud
Run your SAP Fiori application in a SAP Fiori launchpad sandbox
Additional ways can be provided via plugins, e.g.
 Run Fact Sheet
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
26
Simulator (Application Preview)
Create
Develop
Preview
Deploy
Language
Choice of simulator
 Desktop (large)
 Mobile devices, e.g. iPad
(medium), iPhone (small),
Android, etc.
 Define a custom size
 The application is
responsive – will adapt its
appearance to the screen
size
 Multiple screen sizes are
predefined
 If the application supports
multiple languages (i18n
properties), then the
language text can be
changed on the fly
QR Code generation
 A QR Code is generated for
the URL by
clicking the
rectangle
Orientation
 The orientation of the screen
can be toggled between
landscape and portrait view
Refresh
 The application can be
reloaded without needing to
rerun it from the
development environment
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
27
Run the application with mock data
Create
Develop
Preview
Deploy
You can run the application with mock data, e.g. in case your
backend systems are not ready or not available
There are two options available:
 Let the mock service generate data
 Provide data in a JSON file
A mock data editor is available that allows to create a JSON file
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Project Settings:
28
Deploy the application
Create
Develop
Preview
Deploy
Two options are available for the developer to deploy the application:
#1 Deploy to SAP HANA Cloud
#2 Deploy to ABAP Repository
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
• Deploy
as a new application
• Update
an existing application
29
Technical View
SAP Web IDE on SAP HANA Cloud Platform
• Architecture Overview
• Git Integration
• Technical Overview
System context
Any SAPUI5 apps
SAP Fiori apps
External Services
Plug-ins
SAP HANA XS
(OData Services)
SAP Web IDE
Templates
Orion
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Git
SAPUI5
SAP Gateway
(OData Services)
31
Delivery options
There are multiple options on how to run SAP Web IDE
SAP Web IDE
SAP HANA Cloud Platform
(HCP)
• Provided by HCP (AppServices)
• Develop in the cloud
• Connect to your cloud or
on-premise backend systems
• Deploy apps to the cloud or
on-premise systems, e.g.
SAP Gateway
Local Installation*
• Develop on developer’s computer
• Deploy apps to on-premise
systems, e.g. SAP Gateway
• Only for trial purposes (test and
evaluation)
* not in current GA release, planned for future release
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
32
SAP Web IDE on HANA Cloud Platform
Architecture Overview
SAP Web IDE on SAP HANA Cloud Platform
System context
Any SAPUI5 apps
SAP Fiori apps
External Services
Plug-ins
Templates
Orion
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
SAP Web IDE
SAP HANA XS
(OData Services)
SAP HANA
Cloud Platform
SAP Gateway
(OData Services)
Git
SAPUI5
34
SAP Web IDE on SAP HANA Cloud Platform
Architecture Overview
SAP HANA Cloud Platform
Cockpit
Browser
SAP Web IDE
Orion
Internet / Cloud
Corporate Network / Intranet
Git
(App Projects)
SAPUI5
Version
Permanent File
System
HTTPS
SAP HANA Cloud Connector
Windows OS
Linux OS
Mac OS X
(all 64-bit)
HTTP(S)
SAP Gateway
Trusted RFC

For more details: SAP Web IDE Developer Guide
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Business Suite / ERP
35
SAP Web IDE on SAP HANA Cloud Platform
Running HTML5 Apps on SAP HANA Cloud
SAP HANA Cloud Platform
SAP Web IDE in
browser
Deploy
SAP Web IDE
HTML5 Apps
Dispatcher
Application
Push / Fetch
Orion
Git
(App Projects)
OData
User Workspace
OData
Internet / Cloud
Corporate Network / Intranet
HTTPS
SAP Gateway
Via Cloud Connector
Trusted RFC
Business Suite / ERP

For more details: SAP Web IDE Developer Guide
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
36
SAP Web IDE on SAP HANA Cloud Platform
Running HTML5 Apps on SAP Gateway
SAP HANA Cloud Platform
SAP Web IDE
SAP Web IDE
Push / Fetch
Orion
OData
Git
(App Projects)
User Workspace
Deploy
Internet / Cloud
Corporate Network / Intranet
HTTPS
SAP Gateway
Via Cloud Connector
Trusted RFC
Application
Business Suite / ERP

For more details: SAP Web IDE Developer Guide
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
37
SAP Web IDE on SAP HANA Cloud Platform
Git Integration
What is Git ?
Git is a widely used revision control and source code management system
that records snapshots of all your files over time.
 Most popular version control system for software development
– Used by several major open source projects (Eclipse,…)
 Distributed and independent of network, user works offline (contrary to ABAP)
 No exclusive locking but conflict detection & powerful merge algorithms/tools
 Powerful branching options allow to develop several things independently
Available in SAP HANA Cloud and supported by SAP Web IDE
* not in Beta Release, planned for future release
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
39
Git on HANA Cloud Platform
Used by SAP Web IDE
 Source code is stored in Git repositories
SAP HANA Cloud Platform
 Every developer has a local clone of a central remote
repository. Clone is only executed initially to create
the local Git repository. (If clone is executed again,
then local Git repository will be overridden)
Remote
Git
Repository
 A specific state of the repository is checked out into
the developer’s workspace
Clone
Fetch
4
 Changes are collected in commits (≅ ABAP transport)
 Commits can be pushed to and fetched from the
remote repository
 Git allows to branch or the merge branches at any
time
Push
1
Checkout
Workspace
Files
2
3
Local Git
Repository
Commit
* not in Beta Release, planned for future release
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
40
SAP Web IDE and Git Integration
SAP Web IDE enables collaborative
development by providing seamless
integration with your Git repository
via the Orion Git client plugin
Git client pane
Commit & Push
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
41
SAP Web IDE on SAP HANA Cloud Platform
Technical Overview
SAP Web IDE on SAP HANA Cloud Platform
How to set up and access SAP Web IDE on HCP
High Level Steps:
1) Register for a developer account on SAP HANA Cloud Platform website
https://account.hana.ondemand.com/. You may also use the trial version
https://account.hanatrial.ondemand.com/
2) Follow this document link to subscribe & setup SAP Web IDE
https://help.hana.ondemand.com/help/frameset.htm?234b2c0184b0489b8b67e955f8fe51d5.html
3) After setting up SAP Web IDE, you are ready to install and setup SAP HANA Cloud Connector to
connect to your on-premise NW Gateway system. Continue to next section.
Link to additional information: SAP Web IDE - Enablement: http://scn.sap.com/docs/DOC-55465/ Try It!
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
43
SAP Web IDE on SAP HANA Cloud Platform
SAP HANA Cloud Connectivity Service
SAP Web IDE
Destinations
Cloud
(on-demand)
Internet
Secure Integration with the SAP Web IDE, Business
Suite, and Other On-Premise Systems

Establishes secure SSL tunnel between the
SAP HANA Cloud and on-premise systems

Connectivity created by on-premise agent through
reverse-invoke process

Supports pre-configured “Destination API” and
certificate inspection to safeguard against forgeries

Complementary to SAP NetWeaver Gateway,
SAP HANA Cloud Integration and 3rd party integration
suites both on-premise and in the cloud
Customer
(on-premise)
SAP HANA
Cloud Connector
ERP NW Gateway Others
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
44
SAP HANA Cloud Connector
How it works with SAP Web IDE
High Level Steps:
Once you have access to the HANA Cloud Platform and set up SAP Web IDE, you
would like to connect to on-premise system:
SAP Web IDE
3
Destinations
Cloud
1)
2)
(on-demand)
Internet
2
Download & install the SAP HANA Cloud Connector
on a machine behind the firewall
From SAP HANA Cloud Connector:
1)
Perform initial configuration to connect the cloud connector to your
SAP HANA Cloud Platform developer account(s).
2)
Configure the on-premise resources for NW Gateway, which shall be
made accessible to the SAP Web IDE running in your cloud account.
Reverse Invoke
Customer
(on-premise)
SAP HANA
Cloud Connector
HTTPS
1
3)
Configure destinations for each resource paths mapped in step 3
above.
Details on how to set up:
1)
2


SAP Gateway
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
In SAP HANA Cloud Cockpit:


Prerequisites
Download SAP HANA Cloud Connector at HANA Cloud Platform Tools
How to Set up your SAP Web IDE on HANA Cloud
SAP HANA Academy - SAP Web IDE: 00. Getting Started - Connect Remote Systems
45
Connecting Cloud Applications with On-Premise Systems
Accessing on-premise systems from the cloud can be achieved in two ways:
Reverse proxy approach
-
existing network infrastructure can
be used
•
configuration of DMZ and firewall
needed, attacks from Internet
possible, not all protocols can be
supported
-
on-premise systems not reachable from Internet, easy setup and
configuration
-
additional on-premise component
On-Premise
HANA Cloud
Platform
SAP
Application
Firewall
Proxy
Firewall
DMZ
Public
Internet
Usage of SAP HANA Cloud Connector as on-premise agent
HTTPS
On-Premise
SAP
Cloud Firewall Proxy
Application Connector
DMZ
SSL
Firewall VPN
HANA Cloud
Platform
Public
Internet
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
46
Identity Service
Delegated Authentication and Authorization Across SAP Applications
■
Access protected
resource
Application(s) on
HANA Cloud
■
User
Delegate
Authentication
Authentication
Identity Provider
(e.g. SAP ID Service, SAP NetWeaver IdM,
Microsoft ADFS 3.0, …)
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
■
■
SAML-based single sign-on (SSO) for
delegated authentication and identity
federation
Support for 3rd party Identity Providers (IdP)
in the cloud or on-premise
Authentication against common 3rd party
LDAP user directories, e.g. Microsoft Active
Directory
Flexible permissions model enables mapping
from external group or roles memberships
to web roles in the Cloud
47
Additional Information
Useful links
SAP Web IDE
SAPUI5
 SAP Web IDE on HANA Marketplace:
 UI Development Toolkit for HTML5 - Demo Kit (interactive doc
on SAPUI5 / OpenUI5):
http://marketplace.saphana.com/p/3334
 SAP HANA Cloud Platform:
http://hcp.sap.com/index.html
 SAP HANA Cloud Platform (SAP Web IDE trial beta):
https://account.hanatrial.ondemand.com/
 Official documentation:
https://help.hana.ondemand.com/
under Platform Solutions choose SAP SAP Web IDE
 Documentation within SAP Web IDE:
Choose Help > Documentation
https://sapui5.hana.ondemand.com/sdk/
 OpenUI5:
http://sap.github.io/openui5/
 UI Development with SAPUI5 documentation:
https://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de
02b150bce3.html
SCN (SAP Community Network)
 SAPUI5 & SAP Web IDE:
http://scn.sap.com/community/developer-center/front-end
Additional related information to SAP Web IDE
 SAP HANA Cloud Platform:
https://help.hana.ondemand.com/
Go to SAP HANA Cloud Platform > Getting Started
 SAP Fiori:
http://scn.sap.com/docs/DOC-41598
 SAP for Mobile:
http://scn.sap.com/community/mobile
 SAP Gateway:
http://help.sap.com/nwgateway20
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
49
Thank You!
Provided by SAP Customer Experience Group
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
© 2014 SAP AG or an SAP affiliate company.
All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG or an
SAP affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG
(or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark
information and notices.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP AG or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP AG or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP AG or
SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and
services, if any. Nothing herein should be construed as constituting an additional warranty.
In particular, SAP AG or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or
release any functionality mentioned therein. This document, or any related presentation, and SAP AG’s or its affiliated companies’ strategy and possible future
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP AG or its affiliated companies at any time for
any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forwardlooking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
51