SAP Web IDE Solution Overview

(1)

June 2015

SAP Web IDE 1.12 with Hybrid Application Toolkit 1.5

SAP Web IDE

Solution Overview

(2)

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.

(3)

Agenda

Introduction and overview

Developing applications

Developing and deploying hybrid mobile applications

SAP Fiori extensibility concept and extending SAP Fiori applications

System components

Getting started

(4)

(5)

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

(6)

From today to vision

Eclipse

Fiori

Toolkit

AppBuilder

AppDesigner

UI Development

Toolkit for

HTML5

Gateway

Productivity

(7)

Vision

Delivering a web-based development tool designed to support

the end-to-end lifecycle for SAPUI5 based applications

(8)

What is SAP Web IDE?

 Browser-based (Web) toolkit available on SAP HANA Cloud Platform

 An Integrated Development Environment to

– create new SAPUI5/HTML5 or custom Fiori apps

– extend SAP Fiori apps resp. SAPUI5 apps

 Provides standard Web development tools like code editors, wizards, and WYSIWYG tooling that are optimized for building responsive

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

 Everything is source code-based – the tool never gets in the way of the developer

(9)

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

–

Application developers

–

Business experts

(10)

Product benefits

 Develop once, deploy everywhere and run on any device - mobile, tablet, desktop

 Reduces cost, complexity and effort through cloud-based 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

(11)

Key features 1/2

Development environment

 Source code editor with SAPUI5 specific code completion

 Layout Editor (WYSIWYG)

 Instant application preview in browser

 Mock data support for testing purposes

 Import and deploy to HANA Cloud Platform and ABAP repository

 User-friendly interactive app extension mechanisms

 Extension possibilities via plugins

(12)

Key features 2/2

Create your own custom template

Templates for creating and extending projects

 Basic SAPUI5 project

– SAPUI5 Application Project

 SAP Fiori Application

– SAP Fiori Master Detail Application

– SAP Fiori Master Master Detail Application

– SAP Fiori Full Screen Application

 SAPUI5 Mobile Application

– SAPUI5 Master Detail with Photos

– SAPUI5 Master Detail Kapsel Application

– SAPUI5 Master Detail Kapsel Offline Application

– SAPUI5 Mobile Kapsel App Project

 Plugin Development

 Extensibility of SAPUI5 applications

Sample applications

(13)

(14)

Development process overview

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

WYSIWYG Design Design the UI in the Layout Editor

New project

Extensibility project

Visual Extensibility

While running the SAPUI5/Fiori app select an element and apply an extension, modification, replacement

Create Develop Git integration Preview Deploy to HCP to ABAP repository

Create Develop Preview Deploy

to

Mobile Platform

Sample application

(15)

Demo

Title of the demo

(16)

Welcome screen

Introducing the home perspective

Quick and easy access to the most common creation actions Link to external resources and tools Notification every time an update is pushed.

Users can read about new features Developer

(17)

Development environment overview

Menu Bar _Search

 Find in files

(file name or content)

Git

 Manage your development objects in your Git repository

API Reference  Context sensitive  Dynamic support Toolbar  Save  Create file  Create folder  Delete  Undo  Redo  Run User Name Development Perspective Preferences History

 Tag, Cherry-Pick, Revert

Editor

Collaboration

 Integration with SAP Jam

 Collaborate with project members

(18)

Create

Templates

Various options are available for the developer to create a new project: Create a new project

Create a project from an existing archive

Create a new extension project, e.g. for SAPUI5 resp. SAP Fiori extensibility

File > New > Project

File > Import > Archive

File > Git > Clone Repository File > New > Extension Project

Create a project by importing the application from the divers repositories

File > Import > Application from SAPUI5 ABAP Repository File > Import > Application from SAP HANA Cloud Platform

(19)

Templates

The template wizard guides the user

through the definition of an application and then generates the code

Standard templates are provided  Basic SAPUI5 project

– SAPUI5 Application Project

 SAP Fiori Application

– Fiori Master Detail Application

– Fiori Master Master Detail Application

 Plugin Development

 Extensibility of SAPUI5 applications

Sample applications

 easily ramp up Fiori development by audited ready-to-run end to end samples

Additional templates of any kind can be

(20)

Template library

The Template Library displays all

the available templates

Tools > Template Library

(21)

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. Search for data field available.

 Outline view of the application structure in the Outline pane on the right can be displayed.

(22)

Layout Editor (WYSIWYG)

Palette

 SAPUI5 controls

 drag & drop controls to the canvas

Canvas

 Content of the XML view

 Graphical display

Properties and Data pane

 Shows properties and data of selected control

 Entity sets and properties of OData service

 OData binding

Icon to open Outline pane

(23)

Coding (Assisted development)

 Code completion

– For JavaScript and XML

– Context sensitive

– Editor completes words, code fragments or entire SAPUI5 objects

– JavaScript snippets

– Property files

 Insertion of XML code snippets

 Validators and Linting (JavaScript, XML)

 Code check levels can be defined

(All, Error, Error and Warning, Disable)

 Beautification (JavaScript, XML, CSS)

 Metadata completion from schema files

 Context menu support

 API Reference pane

– Integrated API reference

– Context sensitive, dynamic support

 Auto-save

(24)

New extensibility project

Two options. Either you can:

1. import the parent app to the workspace

2. or, access the parent app remotely

When creating a new extension project, you need to identify the parent SAPUI5 or standard SAP Fiori application being extended

The tool creates the extension project in your workspace and generates the files such as

 Component.js

 index.html

 Etc.

File > New > Extension Project

(25)

Extensibility by means of a template

The template for extending an SAPUI5 resp. 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.

(26)

Extensibility via template:

Replace view example

This example illustrates the sequence of screens

(27)

Visual extensibility

 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

(28)

Run the application

There are various ways to run your application:

 Run as

– Web Application: Application Preview in browser (see separate slide)

– Unit Test: run the application as a unit test

– SAP Fiori Component: run in the SAP Fiori launchpad environment)

 Run Configurations (see separate slide)

 Run with Mock Data (see separate slide)

– Automatically generated data

– Mock data provided in JSON files

 Run on ABAP Server: run applications that were deployed to an ABAP Server, e.g. SAP Gateway

 Run on the SAP HANA Cloud: run applications that were deployed to SAP HANA Cloud Platform

(29)

Application Preview in browser

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

Orientation

 The orientation of the screen can be toggled between landscape and portrait view

QR Code generation

 A QR Code is generated for the URL by

clicking the rectangle

Refresh

 The application can be reloaded without needing to rerun it from the development environment

Language

 If the application supports multiple languages (i18n properties), then the language text can be changed on the fly

(30)

Run configurations

You can configure how to run the applications in the project settings:

 Application file path to the file that is used to run the application

 Run the application preview with or without frame

 Open the application with mock data

 Application resource mapping, i.e. where to search for application resources

 Application URL Parameters: name = value

Application

File Path Frame Mock Data

Application Resource Mapping Application URL Parameters Web application x x x x x Unit Test x x SAP Fiori Component x x x

(31)

Run the application with mock data

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

Edit Mock Data is available that allows to create a JSON file

(32)

Deploy the application

Multiple options are available for the developer to deploy the application:

 Deploy the application to the SAPUI5 ABAP Repository, e.g. SAP Gateway, SAP Fiori front-end server

 Deploy the application to SAP HANA Cloud Platform (HCP)

You may either deploy a new application or update an existing application on the target system

Additional options are available for HCP:

 Register the application to SAP Fiori launchpad

– Once registration is complete, a new tile is created in SAP Fiori launchpad, assigned to a group (optional), category, and content package

 See the application status

– Check if your application has been deployed to HCP. If not, you may directly deploy from here.

– Check if your application has been registered to SAP Fiori launchpad

(33)

Deploy to SAPUI5 ABAP repository

• Deploy as a new application

• Update an existing application

• If it requires transport, select a transport request. The request ID will be automatically

(34)

Deploy to HANA Cloud Platform

• View application status on HCP

• Define the version number

• You may define to automatically active the application on HCP

• Once the application is

successfully deployed, you may check the application status

•State (started, stopped)

•Version numbers

(35)

What are the SAP Fiori sample apps?

 Developers

Enable developers to easily ramp up Fiori development by audited ready-to-run end to end samples.

 Designers

Enable designers to demonstrate design and interaction patterns in real life

The SAP Fiori reference apps are sample applications that help developers

and designers with their development projects.

(36)

What is available today?

Starting with SAP Web IDE 1.7 there are 3 sample apps (more to come):

Please note:

The backend part will be available with SAP Netweaver 7.40 SP10 (RTC March 2015)

Shop Approve Purchase

Order

Manage products

- Transactional app - Transactional app - Transactional app with edit master data and drafts - Full screen pattern - Master detail pattern - Master detail pattern

You can browse

products and add them to a shopping basket

You can review and

approve/ reject purchase orders

You can maintain the product master of the Shop

(37)

How can I make use of the SAP Fiori sample apps?

The SAP Fiori reference apps are available as samples in SAP Web IDE:

 In contrast to the templates, SAP Fiori reference apps are complete apps with all coding. They can be used as a reference or to copy&paste coding from.

 They provide exemplary coding and comprehensive comments

(38)

Optional plugins

 VizPacker

 OData Model Editor

 SAP HANA Cloud Portal

 Fact Sheet Editor

(39)

Developing and deploying

hybrid mobile applications

(40)

Mobile application types

Native

Mobile App

Mobile Web

Web Browser

Hybrid

Mobile App Kapsel

(41)

Building apps with SAP Web IDE

SAP Web IDE

Hybrid Application

Toolkit

(SAP Fiori) hybrid mobile app SAP Fiori application

(42)

What is Hybrid Application Toolkit (HAT)?

 Enables developers to develop and build Apache Cordova hybrid apps in SAP Web IDE

 HAT has 3 components that are provided as a plugin and an add-on to SAP Web IDE:

1. The SAP Web IDE plugin for Hybrid App Toolkit

2. HAT Connector to local build environment (Cordova CLI)

3. HAT Companion application

SAP HANA Cloud Platform

SAP Web IDE

HAT (add-on)

Android SDK Tools

XCode

HAT Connector

HAT Companion app

Hybrid Application

Toolkit (plugin)

(43)

Hybrid App Toolkit Connector

HAT Connector will be setup by the HAT Installer

Startup the HAT Connector

 On Windows, double-click run.cmd

 On Mac, (first chmod +x *.sh) run ./run.sh Strengthen the connection security with the API key

 Menu Tools > Preferences

 Replace the default <apiKey> value in the project config.json file with an

alphanumeric string

Test connection from SAP Web IDE to the HAT Connector running locally on the

(44)

Hybrid App Toolkit Companion app

The Hybrid App Toolkit Companion app is a mobile application that runs on a mobile device or device emulator.

 Enables a live preview of a Web application created with SAP Web IDE

 Cordova based mobile app

 Contains Cordova, SAP mobile (Kapsel) and SAPUI5 libraries

 Automatically built during HAT installation for iOS and Android

 You may also use a QR code to load the corresponding application onto the mobile device. (double-click on

Companion app and select Scan)

Companion

app

(45)

Simple steps to develop & deploy hybrid apps

New project

Create Develop

Git integration

Build & Preview Package & Deploy Create Develop Preview Deploy

Templates

Coding

WYSIWYG Design

Source Code Editor with code

completion, dynamic API reference, etc.

Additional support for Cordova & Kapsel

Drag & Drop UI controls for layout design

to

SAP HANA Cloud

to

iOS and Android devices

to

(46)

Templates for Hybrid apps

Hybrid templates are provided

 SAPUI5 Mobile Kapsel Application Project

 SAPUI5 Master Detail Kapsel Application

 SAPUI5 Master Detail Kapsel Offline Application

 SAPUI5 Master Detail with Photos *

 SAPUI5 Master Detail with Photos (Annotations) *

Create a new project

File > New > Project

(47)

Configuring devices

 Basic app information

 Platform (iOS, Android)

 Plugins used in the application

 Application icon

 Application splash screen

 SAP mobile services system for testing

(48)

Coding (assisted development)

 “Ctrl + Space” to activate code

completion

 Additional code completion – For Cordova plugins

– For Kapsel plugins  API Reference pane

– For Cordova plugins

– For Kapsel plugins

(49)

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

(50)

Preview and test options

SAP Web IDE and HAT provide multiple options to preview the hybrid application

Option Short description

Preview in browser with Cordova Facade

The hybrid application runs in a normal browser window within a Cordova container. Some functions/plugins might not work due to missing capabilities of the desktop browser.

Preview on device emulator or device connected via USB to developer workstation

The HAT Companion app is installed to the emulator or device and the hybrid app is pulled via URL into the Companion app.

Preview from device using

Companion App and scan QR-code

of application URL

The HAT Companion app installed on the device is used to scan a barcode from the browser that displays the URL to the application as QR-code. No cables required.

Run on device emulator or device connected via USB to developer workstation

The complete hybrid app is built into a Cordova container and installed to the emulator or device.

(51)

Preview in browser with Cordova Facade

Live Preview & Testing

 Use browser with Cordova Facade

 Quickly validate hybrid app functionality without deploying to an emulator or device

 Allow/Deny access to mobile features, i.e. camera of laptop

Note: you must enable Cordova Façade previews in Hybrid App Toolkit preferences

Create Develop Preview Deploy

(52)

Live preview to test native device APIs

Live Preview & Testing

 Use pre-built hybrid companion app

 Test native device APIs

 Double-click the app and refresh

 Give instant response without build the project

Note: you must configure device settings so the application can properly consume native APIs

Emulator

(53)

Run on emulator or device

“Run on Emulator or Device” does

 Download the project to local machine

 Fetches the specified Cordova plugins to create a Cordova project

 Build mobile app for Android or iOS

 Install it on emulator or mobile device

 Run the app

Note: You must also have configured device properties, otherwise you will not have any contexts displayed for

Emulator

(54)

Preview vs. Run

SAP Web IDE

HAT Connector

App

Preview on

2

3

1. In SAP Web IDE: Preview on simulator or device

2. Install and launch the Companion app

3. Load application from HCP by URL to the application

4. Possibility to refresh the application after modifications have been

made to the application in SAP Web IDE

SAP Web IDE

HAT Connector

Run on

1. In SAP Web IDE: Deploy to local HAT

(download the application to local workstation)

2. In SAP Web IDE: Run on simulator or device 3. Build hybrid app into Cordova container

4. Install and launch hybrid mobile app

1

Preview

2

Run

4

Companion app URL App

1

3

Hybrid mobile app App Hybrid mobile app App Companion app URL HAT Companion app

4

Refresh Scan QR code *

(55)

Deploy the application

When the optional plugin of HAT is activated, multiple options are available for the developer to deploy the application:

 Deploy the application to the local Hybrid App Toolkit. The package can then be built locally and run on the simulator or device.

 Deploy to SAP Mobile Platform (SMP 3.0)

 Deploy to HCP Mobiles Services (HCPms)

Deploy a hybrid app to HCPms or SMP so that application updates can be pushed to a registered device with the Kapsel AppUpdate mechanism.

 The plugin AppUpdate must be configured in the Device Configuration of the project

 Only the HTML5 part of the application will be updated in the mobile app. No need to reinstall or update the entire mobile app.

 The mobile app must be installed on the device and registered in HCPms/SMP prior to be able to deploy

(56)

Deploy & publish the app

 Manually send your app (with profile for iOS) to the Administrator of the SAP Mobile

Secure server

 Upload and Sign the app

 Publish it to SAP Mobile Place for distribution

 User selects the app in the store and installs it to the mobile device

SAP Mobile Secure Server SAP Mobile Place Publish

.apk file (Android) .ipa file + profile (iOS)

Developer workstation

SAP Web IDE

Manual upload Mobile App Mobile Device

App

Store

Install app

(57)

Demo

Title of the demo

(58)

Installation and setup

Install and setup

prerequisite software

Install and setup

HAT add-on

Start up

HAT Connector

1

2

3

• Open Source software to be downloaded and installed locally

• Windows: Android

• Mac: Android and iOS

• Download from SAP Store

• Run GUI based Installer

• HAT Connector needs to run to enable the communication between Web IDE and the local environment

(59)

Set up local environment – install prerequisites (HAT 1.5)

Prerequisites on Windows machine for Android development

 node.js version 0.10.38

 Git client command line

 Cordova version 4.2.0

 SMP Kapsel SDK version 3.0 SP08 PL01

 Android tools required

– JDK 1.7 or later

– Apache Ant 1.8 or later

– Android SDK r23.0.2, then upgrade to r23.0.5

– (Optional) the Google USB Driver

Prerequisites on Mac machine for iOS & Android development

 node.js version 0.10.38

 Git client command line

 Cordova version 4.2.0

 SMP Kapsel SDK version 3.0 SP08 PL01

 iOS tools required

– Xcode and command line tools

– (Optional) iOS sim tool

– (Optional) iOS deploy tool

– (Optional) iOS signing profile

(60)

Set up local environment – install prerequisites

Tips for installation of prerequisites

 Configure correct proxy on your PC

 Configure correct proxy device emulators, e.g., inside corporate network

 Specifically enable Intel VT-x in your BIOS and then install Intel x86 Emulator Accelerator for your Android Emulator on Windows

 Set correct environment variables

(61)

GUI based Installer

Install Hybrid App Toolkit add-on

 Extract the content of the SAP_HAT_local.zip to your specified folder

Run the installer

 On Windows, double-click setup.cmd file

 On Mac, run chmod +x setup.sh, then run ./setup.sh

The installer will

 Check the prerequisite software

 Install HAT software

(62)

SAP Fiori extensibility concept

and extending SAP Fiori

(63)

SAP Delivered Standard Application

Custom Application (extending standard)

New Field New Function

(64)

Extension Project

Parent Application

SAP Fiori extensibility concept

UI Extensibility

Component.js

declare

load

extend

Extensions

Component.js

(65)

SAP Fiori extensibility concept

Component.js

jQuery.sap.declare("<app name>.Component");

sap.ui.component.load({

name: “<parent app name>", url: “<parent app url>" });

<app name>.Component.extend(“<app name>", { metadata: { version : "1.0", config: { }, customizing: { } } });

JavaScript

namespace of custom app

loading parent application

extending custom app

(66)

SAP Fiori extensibility concept

Model-View-Controller (MVC) & extension possibilities

Models

(OData) OData Extension in NetWeaver Gateway

Views

(XML Views)

Controllers

(JavaScript) implementation data binding interface implementation • View Modification

Modify certain properties, i.e. hide a control in the standard view

• View Extension

Custom view content in a predefined extension point of the standard view

• View Replacement

Custom view replacing a standard view

• Controller Extension

Runtime merging of standard and custom controller

Add controller customer functions Override standard controller functions

a

c

b

(67)

Fiori Extensibility Concept overview

UI

Extensibility

 Configuration of Components

oCustomization is based on the configuration of Components. A special area of their configuration is dedicated to customization information. This configuration is located in a JavaScript file named

Component.js (or Configuration.js).

 Custom extension project

oCustomization can be performed on a custom application that extends a delivered standard

application. The custom application is located in a separate project. Both applications contain the Component.js (or Configuration.js) file and the custom application contains all the changes.  Modification free

oThe delivered standard application remains unchanged and hence the extension is considered to be modification free.

 Custom application

oThe custom application becomes the start-up project which then launches the delivered standard application with the additional customizing configuration.

(68)

•

Extension configuration exists within Component.js of the extended application by utilizing the

following

properties

:

• sap.ui.viewExtensions is used for providing custom view content in a specified extension point in the standard delivered application.

• sap.ui.viewModifications is used for overriding certain properties of controls in the standard delivered application.

• sap.ui.viewReplacements is used for replacing a view in a delivered standard application with a custom view.

• sap.ui.controllerExtensions is used for replacing a controller in a delivered standard application with a custom controller.

(69)

Component.js example

jQuery.sap.declare("cus.sd.salesorder.monitor.SD_SO_MONExtension.Component");

// use the load function for getting the optimized preload file if present

sap.ui.component.load({

name: "cus.sd.salesorder.monitor",

// Use the below url to run the extended application when SAP-delivered application located in a local cloud environment: //url: jQuery.sap.getModulePath("cus.sd.salesorder.monitor.SD_SO_MONExtension") + "/../SD_SO_MON"

// Use the below url to run the extended application when SAP-delivered application is deployed on a BSP

url: "/sap/bc/ui5_ui5/sap/SD_SO_MON"

// Use the below url to run the extended application when SAP-delivered application located in a cloud environment:

//url: jQuery.sap.getModulePath("cus.sd.salesorder.monitor.SD_SO_MONExtension") + "/../orion/file/xxxxxxxx-OrionContent/SD_SO_MON"

// we use a URL relative to our own component

// extension app is deployed with customer namespace

}); …

(70)

Component.js example (continued)

…

cus.sd.salesorder.monitor.Component.extend("cus.sd.salesorder.monitor.SD_SO_MONExtension.Component", {

metadata: { version : "1.0", config: { }, customizing: { "sap.ui.viewModifications": { "cus.sd.salesorder.monitor.view.S3": { "InProcessSchedules": { "visible": false } } }, "sap.ui.viewExtensions": { "cus.sd.salesorder.monitor.view.S3": { "extSOChangePaymentInfo": { className: "sap.ui.core.Fragment", fragmentName: "cus.sd.salesorder.monitor.SD_SO_MONExtension.view.extSOChangePaymentInfoCustom", type: "XML" } } }, "sap.ui.viewReplacements": { "cus.sd.salesorder.monitor.view.S4": { viewName: "cus.sd.salesorder.monitor.SD_SO_MONExtension.view.S4Custom", type: "XML" } }, "sap.ui.controllerExtensions": {

(71)

(72)

Demo

Title of the demo

(73)

(74)

System context

SAP Web IDE

Orion Git SAPUI5

Plug-ins

Templates

Any SAPUI5 apps SAP Fiori apps

SAP HANA XS (OData services)

SAP Gateway (OData services)

External services

SAP HANA Cloud Portal Fact Sheet Editor

VizPacker

OData Model Editor

(75)

Delivery options

SAP HANA Cloud Platform (HCP)

SAP Web IDE

Local Installation

There are multiple options on how to run SAP Web IDE

• 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

• Develop on developer’s computer

• Deploy apps to on-premise ABAP repository, e.g. SAP Gateway

• Only for trial purposes (test and evaluation)

Trial Trial only

HANA XS

HANA Workbench

Production

plugins

• Develop and deploy HANA XS native HTML5 apps

(76)

SAP Web IDE Releases 2014

2014

JUN 1.0 AUG 1.2 OCT 1.4 NOV 1.5 DEC 1.6 Initial release to HCP Trial at SAPPHIRE

SAP River RDE

First release to HCP for productive use

• SAPUI5 ABAP repository integration • Plugin development • Fact Sheets • Other enhancements SEP 1.3 Only on Trial: • Layout Editor (experimental)

Name changed: SAP Web IDE

• Extend apps on HCP

• Edit mock data

• Personalization

• Other enhancements

• Local installation (via SCN)

• Activate app in HCP

• HCP auto-subscription of SAP Web IDE

• Additional external plugins (VizPacker, HANA Cloud Portal)

• Sample applications

• Predefined URL parameters

(77)

SAP Web IDE Releases 2015

2015

JAN 1.7 MAR 1.8

• Hybrid App Toolkit

• App registration to SAP Fiori launchpad

• Add custom content at Finish

• Generate pseudo-translation

• Extensibility enhancements and Fragment support

• Code editor enhancements

• SAP Fiori Full Screen template

• Defining languages

• Defining run configuration

• Code snippets in extension project fragments

• Option to fetch mock data recourses from other projects

• Menu link to HCP Cockpit

1.9

• Welcome page

• Performing actions on multiple items

• Syntax validation for XML

• Beautification of JSON

• JavaScript validator

• Code completion for property files

• Context menu support for code editors

• Configuring how to run unit tests

APR

1.10

• UI control hooks

• Application status page

• Code check levels

• XML and CSS beautifier • Tab navigation • Other enhancements MAY 1.11 • Feedback form

• Access to SAP HANA Cloud UI Theme Designer

JUN

1.12

• Layout Editor with enhancements for productive use • Configurable library versions • Hiding workspace • Git stash • Other enhancements

(78)

System context for SAP HANA Cloud Platform

SAP Web IDE

Orion Git SAPUI5

SAP HANA XS (OData services) SAP Gateway (OData services) Plug-ins Templates External services

Any SAPUI5 apps SAP Fiori apps

SAP HANA

Cloud Platform Dispatcher

(79)

System overview for SAP HANA Cloud Platform

SAP Web IDE

SAP Gateway

SAPUI5 Version Orion

SAP HANA Cloud Connector

Git

(App Projects)

HTTP(S)

Corporate Network / Intranet

Windows OS Linux OS Mac OS X (all 64-bit) HTTPS Cockpit Permanent File System Trusted RFC Internet / Cloud Developer/ Designer/ Functional Specialist Application User

(80)

SAP HANA Cloud Platform account

Running HTML5 Apps on SAP HANA Cloud Platform

SAP Web IDE

SAP Gateway Via Cloud Connector

Orion Git

(App Projects)

Corporate Network / Intranet HTTPS

HTML5 Apps Dispatcher User Workspace Internet / Cloud OData OData Push / Fetch

Business Suite / ERP

Trusted RFC

Deploy

SAP Web IDE in browser

(81)

Running HTML5 Apps on SAP Gateway

SAP Web IDE

SAP Gateway Via Cloud Connector

Orion Git

(App Projects)

Corporate Network / Intranet HTTPS

User Workspace

SAP Web IDE

Internet / Cloud

Application

Push / Fetch OData

Deploy

Business Suite / ERP

(82)

SAP HANA Cloud Connectivity Service

SAP HANA Cloud Connector

Internet

SAP Web IDE Destinations

NW Gateway

ERP Others



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 Gateway,

SAP HANA Cloud Integration and 3

rd

_{party integration}

suites both on-premise and in the cloud

Cloud

(on-demand)

Customer

(on-premise)

Secure Integration with the SAP Web IDE, Business

Suite, and Other On-Premise Systems

(83)

How SAP HANA Cloud Connector works with SAP Web IDE

SAP HANA Cloud Connector

Internet

SAP Web IDE Destinations

SAP Gateway

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:

1. Download & install the SAP HANA Cloud Connector

on a machine behind the firewall

2. 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 SAP Gateway, which shall be

made accessible to the SAP Web IDE running in your cloud account.

3.

In SAP HANA Cloud Platform Cockpit:

1) Configure destinations for each resource paths mapped in step 3

above. Cloud (on-demand) Customer (on-premise) 2 1 2 3 HTTPS Reverse Invoke

(84)

Connecting Cloud Applications with On-Premise Systems

Accessing on-premise systems from the cloud can be achieved in two ways: Reverse proxy approach

Usage of SAP HANA Cloud Connector as on-premise agent Firewall Proxy _Firewall

DMZ On-Premise SAP Application HANA Cloud Platform Public Internet Cloud Connector On-Premise SAP Application HANA Cloud Platform Public Internet SSL VPN

+

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 reach-able from Internet, easy setup and configuration

–

additional on-premise component

Firewall

HTTPS

Proxy _Firewall

(85)

 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

Identity Service

Delegated Authentication and Authorization Across SAP Applications

User

Identity Provider

(e.g. SAP ID Service, SAP NetWeaver IdM, Microsoft ADFS 3.0, …) Application(s) on HANA Cloud Access protected resource Delegate Authentication Authentication

(86)

Project persistency by using Git

What is Git?

Git is a widely used version 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

Git is available in SAP HANA Cloud Platform and supported by SAP Web IDE

Version control system

Distributed versioning

Created 2005 for Linux kernel development

Enables collaborative workflows

(87)

SAP HANA Cloud Platform

Git on HANA Cloud Platform used by SAP Web IDE

 Source code is stored in Git repositories

 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)

 A specific state of the repository is checked out into the developer’s workspace

 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

Remote Git Repository Local Git Repository Push Clone Fetch

Workspace

Checkout Commit Files 1 2 3 4

(88)

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 Pane

(89)

(90)

(91)

Getting started with SAP Web IDE

SAP Web IDE prerequisite: HCP account

 Web IDE on HCP Trial

https://account.hanatrial.ondemand.com

after logon, open subscription tab to subscript sapwebide

SAP Web IDE

 SAP Web IDE online help

https://help.hana.ondemand.com/SAP_RDE/frameset.htm?6284a94889db4f3ca d001ba674282f20.html

 This will explain:

– opening SAP Web IDE

– entering the Git settings

– connecting remote systems,

including installation and setup of HANA Cloud Connector

– setting SAP Web IDE preferences

– enabling external plugins

Additional resources:

How to setup your SAP Web IDE on HCP

http://scn.sap.com/community/developer-center/front-end/blog/2015/02/11/set-up-your-sap-web-ide-on-hana-cloud-part-1

Prerequisites for HANA Cloud Connector

https://help.hana.ondemand.com/help/frameset.htm?e23f776e4d594fdbaeeb1196d4 7bbcc0.html

Download SAP HANA Cloud Connector

https://tools.hana.ondemand.com/#cloud

(92)

Getting started with Hybrid Application Toolkit

Additional resources:

How to enable HCPms trial

http://scn.sap.com/community/developer-center/mobility-platform/blog/2014/12/18/how-to-enable-hana-cloud-platform-mobile-services-trial

How to use SAP HCPms with an ABAP system

http://scn.sap.com/community/developer-center/mobility-platform/blog/2015/02/03/how-to-use-hcpms-with-an-abap-system

Get HAT package in SAP Store

https://store.sap.com/sap/cp/ui/resources/store/html/SolutionDetails.html?pid=0000 013586

Hybrid Application Toolkit (HAT)

 HAT online help

https://help.hana.ondemand.com/webide_hat/frameset.htm

go to Installing and Setting Up

 The online help contains:

– What’s new in the latest release

– Installing and setting up

– Getting started

– Testing

– Delivering and deploying

– Troubleshooting

(93)

(94)

Useful links

SAP Web IDE

 SAP Web IDE at SAP Store:

https://www.sapstore.com/solutions/60009/Web-IDE

 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

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 Gateway:

http://help.sap.com/nwgateway20

SAPUI5

 SAPUI5 Developer Center- Demo Kit (interactive doc on SAPUI5 / OpenUI5):

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

 SAP Fiori:

http://scn.sap.com/docs/DOC-41598

 SAP for Mobile:

(95)

(96)

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.epxfor 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 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.