SlideShare a Scribd company logo

SAP Web IDE

Download as PPTX, PDF
msg systems ag - Custom Development, profile picture
msg systems ag - Custom Development

The document discusses SAP Web IDE, a modern web-based integrated development environment for developing HTML5, UI5, and Fiori applications. It provides an overview of key SAP Web IDE features like code editing, layout editing, templates, and deployment. The document also describes the Hybrid Application Toolkit which enables developing and deploying Apache Cordova hybrid apps within SAP Web IDE.

Technology
1 of 35
Downloaded 56 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.consulting .solutions .partnership SAP Web IDE IT 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 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
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
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.
© 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
© 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
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
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
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
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
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
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.
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
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
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
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
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.
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
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
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 21 Demo
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
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
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
SAP Web IDE Hybrid Application Toolkit Device and Plugin Configuration © msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 25
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
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
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
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
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 30 Demo
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
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.
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
© msg | September 2015 | SAP Web IDE - IT Conference on SAP Technologies by msg 34 Q&A
.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

More Related Content

PDF
An Introduction to Software Architecture
RahimLotfi
 
PDF
2016 06 - design your api management strategy - axway - Api Management
SmartWave
 
PDF
Software Architecture Document Final
Ali Ahmed
 
PPT
ASAP Methodology in Implementing ERP
Abdul Baquee Muhammad Sharaf
 
PDF
SaaS Architecture.pdf
Simform
 
PPTX
Metodologia Incremental
JOHNNY SURI MAMANI
 
PPTX
SAP Overview and Architecture
Ankit Sharma
 
PDF
Software Product Engineering Services | Digital Transformation
Skizzle Technolabs
 
An Introduction to Software Architecture
RahimLotfi
 
2016 06 - design your api management strategy - axway - Api Management
SmartWave
 
Software Architecture Document Final
Ali Ahmed
 
ASAP Methodology in Implementing ERP
Abdul Baquee Muhammad Sharaf
 
SaaS Architecture.pdf
Simform
 
Metodologia Incremental
JOHNNY SURI MAMANI
 
SAP Overview and Architecture
Ankit Sharma
 
Software Product Engineering Services | Digital Transformation
Skizzle Technolabs
 

What's hot (20)

PPTX
MODELO DE PROCESOS DEL SOFTWARE
Micky Jerzy
 
PPTX
Azure data platform overview
James Serra
 
PPTX
The Cloud and Amazon Web Services 2014 AWS
psrpatnaik
 
PPTX
Microsoft Azure Logic apps
CloudFronts Technologies LLP.
 
DOC
SAP ABAP CONSULTANT CV
Gini Androse
 
PPTX
Introduction to SAP BTP
SureshSuresetti
 
PPTX
Power BI.pptx
Raisha Ali Ritu
 
PPTX
Introduction to Azure Service Bus Presentation
Knoldus Inc.
 
PPTX
Custom vision
Pushkar Saraf
 
DOCX
Modelo 4+1
Israel Rey
 
PDF
Cutover Plan V2
Mahesh Vallampati
 
PPT
Presentation on Crystal Reports and Business Objects Enterprise Features
InfoDev
 
PPTX
Event Mesh: The architecture layer that will power your digital transformation
SAP Cloud Platform
 
PPTX
V model
Vaibhav Dash
 
PPTX
SAP Learning Hub - SAP Activate - 20 September 2016
Lejlaseperovic
 
PPTX
Spiral model
Noraphyusin
 
PDF
API Governance
Sunil Kuchipudi
 
PPTX
Oracle Cloud With Azure DevOps Pipelines
Johan Louwers
 
PPT
Ch 6
Mohammed Romi
 
PPT
Introduction to ABAP
sapdocs. info
 
MODELO DE PROCESOS DEL SOFTWARE
Micky Jerzy
 
Azure data platform overview
James Serra
 
The Cloud and Amazon Web Services 2014 AWS
psrpatnaik
 
Microsoft Azure Logic apps
CloudFronts Technologies LLP.
 
SAP ABAP CONSULTANT CV
Gini Androse
 
Introduction to SAP BTP
SureshSuresetti
 
Power BI.pptx
Raisha Ali Ritu
 
Introduction to Azure Service Bus Presentation
Knoldus Inc.
 
Custom vision
Pushkar Saraf
 
Modelo 4+1
Israel Rey
 
Cutover Plan V2
Mahesh Vallampati
 
Presentation on Crystal Reports and Business Objects Enterprise Features
InfoDev
 
Event Mesh: The architecture layer that will power your digital transformation
SAP Cloud Platform
 
V model
Vaibhav Dash
 
SAP Learning Hub - SAP Activate - 20 September 2016
Lejlaseperovic
 
Spiral model
Noraphyusin
 
API Governance
Sunil Kuchipudi
 
Oracle Cloud With Azure DevOps Pipelines
Johan Louwers
 
Ch 6
Mohammed Romi
 
Introduction to ABAP
sapdocs. info
 
Ad

Similar to SAP Web IDE (20)

PDF
Developing mobile apps with HCPms
msg systems Romania
 
PDF
SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDE
Markus Van Kempen
 
PPT
Mho Web Dynpro Abap
thomas_jung
 
PDF
BTP+Onboarding+Webinar+-+SAP+Build+Apps+January+2024.pdf
samimbangalore
 
PDF
Implementing API-led Cloud-native apps on OCI
Sven Bernhardt
 
PDF
Z sap boe-2016-techws-04_vs_fiori-app-with-eclipseluna-accessing-zsap-system
Nagendra Babu
 
PDF
Delivering New Digital Experiences Fast - Introducing Choreo
WSO2
 
PDF
Intro to the HTML5 Application Repository Service
Marius Obert
 
PDF
Implementing API-led Cloud-native apps on OCI
Sven Bernhardt
 
PDF
Cd168 (3)
Ravi Varma
 
PDF
Implementing API-led Cloud-native apps on OCI
Sven Bernhardt
 
PPTX
HANA Cloud Platform Overview
Victor Ionescu
 
PPTX
The HANA Cloud Platform
msg systems ag - Custom Development
 
PPTX
2018 ui5con amiram
Amiram Wingarten
 
PDF
GenAI_ABAP_Overview for the Sap begginer
shiatalmali
 
PDF
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Alen Leit
 
PDF
44779e8c 5b7c-0010-82c7-eda71af511fa
Nagendra Babu
 
PPTX
apidays Helsinki & North 2025 - Running a Successful API Program: Best Practi...
apidays
 
PDF
API-first design - Basis for an consistent API-Management approach
Sven Bernhardt
 
PDF
The S/4 HANA Programing Paradigm
msg systems Romania
 
Developing mobile apps with HCPms
msg systems Romania
 
SAPTechED 2015 UX114 -Building custom SAP Fiori Apps Using SAP Web IDE
Markus Van Kempen
 
Mho Web Dynpro Abap
thomas_jung
 
BTP+Onboarding+Webinar+-+SAP+Build+Apps+January+2024.pdf
samimbangalore
 
Implementing API-led Cloud-native apps on OCI
Sven Bernhardt
 
Z sap boe-2016-techws-04_vs_fiori-app-with-eclipseluna-accessing-zsap-system
Nagendra Babu
 
Delivering New Digital Experiences Fast - Introducing Choreo
WSO2
 
Intro to the HTML5 Application Repository Service
Marius Obert
 
Implementing API-led Cloud-native apps on OCI
Sven Bernhardt
 
Cd168 (3)
Ravi Varma
 
Implementing API-led Cloud-native apps on OCI
Sven Bernhardt
 
HANA Cloud Platform Overview
Victor Ionescu
 
The HANA Cloud Platform
msg systems ag - Custom Development
 
2018 ui5con amiram
Amiram Wingarten
 
GenAI_ABAP_Overview for the Sap begginer
shiatalmali
 
Kendo UI workshop introduction - PUG Baltic Annual Conference 2017
Alen Leit
 
44779e8c 5b7c-0010-82c7-eda71af511fa
Nagendra Babu
 
apidays Helsinki & North 2025 - Running a Successful API Program: Best Practi...
apidays
 
API-first design - Basis for an consistent API-Management approach
Sven Bernhardt
 
The S/4 HANA Programing Paradigm
msg systems Romania
 
Ad

Recently uploaded (20)

PPTX
MYSQL Presentation for SQL database connectivity
Swati270511
 
PDF
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
PDF
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
PDF
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
PDF
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
PDF
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
PDF
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
PDF
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
PDF
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
PDF
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
DOCX
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
PDF
KodekX | Application Modernization Development
KodekX
 
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
PDF
CIFDAQ's Market Insight: SEC Turns Pro Crypto
CIFDAQ
 
PPT
Teaching material agriculture food technology
LiaRayya
 
PPTX
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 
MYSQL Presentation for SQL database connectivity
Swati270511
 
Electronic commerce courselecture one. Pdf
OmerMohamed64
 
Dropbox Q2 2025 Financial Results & Investor Presentation
Dropbox
 
How UI/UX Design Impacts User Retention in Mobile Apps.pdf
SynapseIndia
 
Advanced methodologies resolving dimensionality complications for autism neur...
IAESIJAI
 
Review of recent advances in non-invasive hemoglobin estimation
IAESIJAI
 
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
SOFTTECHHUB
 
Peak of Data & AI Encore- AI for Metadata and Smarter Workflows
Safe Software
 
Empathic Computing: Creating Shared Understanding
Mark Billinghurst
 
Spectral efficient network and resource selection model in 5G networks
IAESIJAI
 
NewMind AI Monthly Chronicles - July 2025
NewMind AI
 
Machine learning based COVID-19 study performance prediction
IAESIJAI
 
Diabetes mellitus diagnosis method based random forest with bat algorithm
IAESIJAI
 
Agricultural_Statistics_at_a_Glance_2022_0.pdf
SandeepSingh286037
 
The AUB Centre for AI in Media Proposal.docx
GAONE9
 
KodekX | Application Modernization Development
KodekX
 
Per capita expenditure prediction using model stacking based on satellite ima...
IAESIJAI
 
CIFDAQ's Market Insight: SEC Turns Pro Crypto
CIFDAQ
 
Teaching material agriculture food technology
LiaRayya
 
Understanding_Digital_Forensics_Presentation.pptx
ImranKhan423233
 

SAP Web IDE

  • 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

Editor's Notes

  • #5: Monthly shipment of Web IDE releases
  • #6: Monthly shipment of Web IDE releases
  • #7: Existing tools before SAP Web IDE UI Development Toolkit for HTML5 – Eclipse plugin with basic code completion support (still maintained but no new features) Fiori Toolkit – Eclipse plugin on top of UI5 toolkit; first template based approach for Fiori app creation AppBuilder/AppDesigner – web-based tools to implement mobile HTML5 applications SAP Web IDE Consolidated and evolved tool.
  • #11: Create New project or Extension project based on templates Develop Coding: Source Code Editor with Code Completion WYSIWYG Layout Editor: Drag and Drop for Controls Graphical Extensibility Preview PC mode Tablet mode Phone mode Deploy to SAP HANA Cloud Platform to ABAP UI5 repository
  • #12: Menubar Toolbar Save Create File Create Folder Delete Undo Redo Run Back Forward Welcome View What‘s new? Create Applications Import Options Links to documentations Development View Access to Editor and further options Editor Preferences (e.g. editor settings) Repository Search Search for files or content Git Pane Manage objects regarding git (staging, commit, push, …) Git History Do e.g. reverts API Reference Outline View
  • #16: Graphical XML View Control Palette Properties and Data Displays properties and data of selected control Binding of Odata Services XML View Outline Structured outline of controls stacked in XML view
  • #18: Screen Size Simulation Simulate Desktop, Tablet, Smartphone
  • #25: Create New project, based on Kapsel Templates Develop Coding: Source Code Editor with Code Completion, also for Cordova and Kapsel Plugins WYSIWYG Layout Editor: Drag and Drop for Controls Preview (with Companion App) On PC Emulator Device Deploy to iOS and Android devices to SAP Mobile Platform/HANA Cloud Platform mobile services
  • #26: „Project Settings“ menu entry brings up the Device Configuration options App Information Platforms Plugins (Cordova/Kapsel)
  • #29: Deploy to local Hybrid Application Toolkit downloads sources to local machine and fetches Cordova/Kapsel plugins Run App on Emulator or Device starts build of application + installation and execution of app