SAP Web IDE, SAP Web IDE Hybrid Application Toolkit

1. .consulting .solutions .partnership
SAP Web IDE
IT Conference on SAP Technologies by msg

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

3. SAP Web IDE
3© 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

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

5. SAP Web IDE – A modern web-based IDE for the future
Why a web-based IDE?
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 5
• 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.

6. © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 6
SAP Web IDE – A modern web-based IDE for the future
Tool evolution and consolidation
SAP UI Development Toolkit
for HTML5
Fiori Toolkit
AppBuilder
AppDesigner
SAP Web IDE

7. © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 7
SAP Web IDE – A modern web-based IDE for the future
End-to-end lifecycle support for applications
Prototyping Developing Testing Deploying Extending

8. SAP Web IDE – A modern web-based IDE for the future
SAP Web IDE key features
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 8
• 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

9. SAP Web IDE
9© 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

10. Develop and Deploy applications with SAP Web IDE
Development and deployment process overview
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 10
Create Develop Preview Deploy
New Project/
Extension
Project
Coding
WYSIWYG
Layout Editor
to SAP HANA
Cloud Platform
to ABAP UI5
Repository
Templates
Graphical
Extensibility

11. Develop and Deploy applications with SAP Web IDE
Development environment overview
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 11
Menubar
Toolbar
Welcome
View
Development
View
Editor
Preferences
Repository
Search
Outline Pane
Git Pane
Git History
API
Reference

12. Develop and Deploy applications with SAP Web IDE
Create or Import an application
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 12

13. Develop and Deploy applications with SAP Web IDE
Templates
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 13
• 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.

14. Develop and Deploy applications with SAP Web IDE
Code Editor
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 14
• 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

15. Develop and Deploy applications with SAP Web IDE
Layout Editor
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 15
graphical
XML View
Properties
and Data
Control
Palette
XML View
Outline

16. Develop and Deploy applications with SAP Web IDE
Run/Preview the application
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 16

17. Develop and Deploy applications with SAP Web IDE
Preview mode options
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 17
screen size
simulation
QR Code
generation
Language
Orientation
Refresh

18. Develop and Deploy applications with SAP Web IDE
Mock Data Editor
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 18
The Mock Data Editor allows to enter or generate mock data for an OData Service definition.

19. Develop and Deploy applications with SAP Web IDE
Deploy to SAP HANA Cloud Platform
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 19

20. Develop and Deploy applications with SAP Web IDE
Deploy to ABAP UI5 Repository
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 20

21. © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 21
Demo

22. SAP Web IDE
22© 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

23. 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
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 23
© SAP SE

24. SAP Web IDE Hybrid Application Toolkit
Simple Development and Deployment
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 24
Create Develop Preview Deploy
New Project Coding
WYSIWYG
Layout Editor
to iOS and
Android devices
to SMP/HCPms

25. SAP Web IDE Hybrid Application Toolkit
Device and Plugin Configuration
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 25

26. SAP Web IDE Hybrid Application Toolkit
Coding
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 26
• Code Completion
for
Cordova/Kapsel
plugins
• API Reference
for
Cordova/Kapsel
plugins

27. SAP Web IDE Hybrid Application Toolkit
Preview with Companion App on Emulator or Device
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 27
• 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

28. SAP Web IDE Hybrid Application Toolkit
Deployment to local Hybrid App Toolkit
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 28
• Deployment to local HAT
 downloads the sources to the local machine
 fetches Cordova/Kapsel plugins

29. SAP Web IDE Hybrid Application Toolkit
Run App on Emulator or Device
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 29

30. © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 30
Demo

31. SAP Web IDE
31© 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

32. Conclusion & Outlook
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 32
• 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.

33. Additional Information
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 33
• 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

34. © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 34
Q&A

35. .consulting .solutions .partnership
Florian Pfeffer
Lead IT Consultant
+49 (0) 851 / 56069 - 4278
florian.pfeffer@msg-systems.com
msg systems ag
Dr.-Hans-Kapfinger-Str. 30, 94032 Passau
Germany
www.msg-systems.com