SAP Web IDE

.consulting .solutions .partnership

SAP Web IDEIT Conference on SAP Technologies by msg

SAP Web IDE

2© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg

SAP Web IDE - A modern web-based IDE for the future1 3

Develop and Deploy applications with SAP Web IDE2 9

SAP Web IDE Hybrid Application Toolkit3 22

Conclusion & Outlook4 31

SAP Web IDE






SAP Web IDE – A modern web-based IDE for the future

What is SAP Web IDE?

© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 4

• web-based toolkit available on SAP HANA Cloud Platform

• Integrated Development Environment for HTML5/UI5 and Fiori Apps

the extension of supported apps

the creation of Hybrid Applications

• provides standard web development tools like wizards, code

/layout editors, mocking tools

• SAP Web IDE foundation itself is based on Eclipse Orion, a

JavaScript Editor written in JavaScript


Why a web-based IDE?


• Several market research companies predict that by 2020 at least 70% of new app development

will take place in the cloud.

• Developer collaboration over cloud-based development infrastructures increases every day.

• Faster and cheaper deliveries.

• Developer is not bound to a specific device. Develop everywhere and everytime.



Tool evolution and consolidation

SAP UI Development Toolkit

for HTML5

Fiori Toolkit

AppBuilder

AppDesigner

SAP Web IDE



End-to-end lifecycle support for applications

Prototyping Developing Testing Deploying Extending


SAP Web IDE key features


• Development environment Source Code editor with SAPUI5 specific code completion

Layout Editor

Instant application test

Mock data support

OData „Modeller“

IDE extensions via plugins

• Templates for creating and extending projects SAPUI5 Application templates

SAP Fiori Application templates

SAP Web IDE Plugin Development templates

Sample Applications

Own Templates

• Application extension support (via code and graphical tools)

• Deployment to SAP HANA Cloud Platform

to ABAP UI5 Repository

SAP Web IDE






Develop and Deploy applications with SAP Web IDE

Development and deployment process overview


Create Develop Preview Deploy

New Project/

Extension

Project

Coding

WYSIWYG

Layout Editor

to SAP HANA

Cloud Platform

to ABAP UI5

RepositoryTemplates

Graphical

Extensibility


Development environment overview


Menubar

Toolbar

Welcome

View

Development

View

Editor

Preferences

Repository

Search

Outline Pane

Git Pane

Git History

API

Reference


Create or Import an application



Templates


• In case an application is created using

a template, a wizard guides the

developer through the creation process

and generates the code.

• Several standard templates are

available, for instance SAPUI5 Application Project

SAP Fiori Master Detail Application

SAP Fiori Master Master Detail

Application

Empty Plugin Project

• Own templates of any kind can be

defined by the developer itself.


Code Editor


• Code Completion for words, code

fragments or entire SAPUI5 objects JavaScript

JavaScript snippets

XML

XML snippets (for XML views)

• API Reference Pane integrated API Reference

context sensitive

• Auto-Save


Layout Editor


graphical

XML View

Properties

and Data

Control

Palette

XML View

Outline


Run/Preview the application



Preview mode options


screen size

simulation

QR Code

generation

Language

Orientation

Refresh


Mock Data Editor


The Mock Data Editor allows to enter or generate mock data for an OData Service definition.


Deploy to SAP HANA Cloud Platform



Deploy to ABAP UI5 Repository



Demo

SAP Web IDE






What is the Hybrid Application Toolkit (HAT)?

• HAT enables a developer to develop and

deploy Apache Cordova hybrid applications

within SAP Web IDE

• It has three components

SAP Web IDE Plugin

Connector to the local Cordova build

environment

Companion app for application preview on

emulator and device

SAP Web IDE - Hybrid Application Toolkit


© SAP SE

SAP Web IDE Hybrid Application Toolkit

Simple Development and Deployment


Create Develop Preview Deploy

New Project Coding

WYSIWYG

Layout Editor

to iOS and

Android devices

to SMP/HCPms


Device and Plugin Configuration



Coding


• Code Completion

for

Cordova/Kapsel

plugins

• API Reference

for

Cordova/Kapsel

plugins


Preview with Companion App on Emulator or Device


• Preview on Emulator or

Device without the need of

a build

• Test of (supported) native

device APIs

• Refresh option in

Companion App

• Preview is also possible

(restricted) in browser

using Cordova Facade

Preview


Deployment to local Hybrid App Toolkit


• Deployment to local HAT

downloads the sources to the local machine

fetches Cordova/Kapsel plugins


Run App on Emulator or Device



Demo

SAP Web IDE






Conclusion & Outlook


• SAP Web IDE is a powerful tool for developing UI5/Fiori and hybrid applications.

• Support of End-to-End lifecycle for applications.

• At the moment monthly shipment of new SAP Web IDE version on cloud environment.

• Further improvements and new functionality regarding developer features (e.g. Developer

Infrastructure, OnPremise Git, improved documentation).

• Fusion of SAP Web IDE and HANA Web-Based Development Workbench.

• Cloud based build and test service for hybrid applications.

• Windows 10 (Mobile) Support for HAT.

Additional Information


• SAP Web IDE

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

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

• SAP Web IDE - Hybrid Application Toolkit

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

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

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

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


Q&A

.consulting .solutions .partnership

Florian Pfeffer

Lead IT Consultant

+49 (0) 851 / 56069 - 4278

[email protected]

msg systems ag

Dr.-Hans-Kapfinger-Str. 30, 94032 Passau

Germany

www.msg-systems.com

SAP Web IDE

Technology