Post on 07-Jul-2018
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
1/52
Week 4 Unit 1: Introduction
SAP Web IDE
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
2/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Introduction to SAP Web IDEKey trends
• Professional programmerthe development of comp
• Business users need to b
custom software applicat
Gartner Hype Cycle for Applic
• “Application platform technology innovation has
moved to the cloud …”
• “aPaaS offerings begin to challenge traditional
platform middleware for mainstream projects, ...”
Gartner MQ, Enterprise Application Platform as a Service,
Mar ‘15
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
3/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Introduction to SAP Web IDESpeeding development by reducing effort
SAP Web IDE is a powerful web-based integrated dev
tool that simplifies the end-to-end application deve
lifecycle for SAP Fiori apps, Fiori-like apps, and SAP
Prototype Develop Test Package
and Deploy
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
4/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Eclipse
SAP Fiori
Toolkit
Introduction to SAP Web IDEBefore SAP Web IDE, today, and future vision
AppBuilder AppDesigner
UI Development
Toolkit for
HTML5
Gateway
Productivity
Accelerators
This is the current state of plann
SAP Web IDE
SAP HANA
Cloud
Integration
SAP HAN
SAP Fiori
Cloud
Edition
A
Mana
I
S
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
5/52© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Introduction to SAP Web IDEKey use cases
SAP Web IDE
Develop new SAP Fiori and SAPUI5
applications
Extend SAP Fiori applications
Develop SAPUI5 mobile hybrid applications
(HAT plug-in)
Extend SAP Web IDE with new plug-ins and
templates
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
6/52© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Reduce cost, complexity,
and effort through cloud-
based offering (zero-
installation)
Develop once, deploy
everywhere, & run on any
device - mobile, tablet,
desktop
Increase p
simplifying
to create gr
Introduction to SAP Web IDEProduct benefits
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
7/52© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Introduction to SAP Web IDEKey features
Prototype Develop Test Package and
Deploy
BUILD
Layout Editor
Code Editor
Validations
Templates&Wizards
Sample Apps
Git
Instant Preview
Mock Data
HCP
HCPms
ABAP Repository
SMP
Enterprise Portal
Export
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
8/52© 2015 SAP SE or an SAP affiliate company. All rights reserved.
SAP offers out-of the-box plug-ins and templates that
leverage SAP Web IDE’s modular and extensible
framework.
Introduction to SAP Web IDESAP Web IDE plugins
Hybrid Application Toolkit
OData Model Editor
SAP Fiori overview page (OVP)
VizPacker
…and more…
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
9/52© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Introduction to SAP Web IDEThe big picture
SAPUI5 apps SAP Fiori apps
SAP HANA Cloud Platform (HCP)
SAP Web IDE
Orion Git SAPUI5
Templates
Optional plug-ins
OData Model Editor
Fact Sheet Editor
VizPacker
SAP Event Management
SAP HANA Cloud Portal
Hybrid App Toolkit
SAP Fiori overview page
Plugin
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
10/52© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Introduction to SAP Web IDEWhat’s new in the latest releases of SAP Web IDE
Layout editor – productive usage
Dynamic SAPUI5 version support Editor enhancements
New templates for new UI versions
BUILD integration
Minification of the application's JavaScript files
UI facelift
For more information:
http://scn.sap.com/docs/DOC-56628
http://scn.sap.com/docs/DOC-56628http://scn.sap.com/docs/DOC-56628
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
11/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
SAP Web IDE is SAP’s web-based development environment that enables cus
partners to build and extend SAP Fiori and SAPUI5 apps.
SAP Web IDE today
Provides tools to increase developer productivity
Runs on SAP HANA Cloud Platform (HCP) which reduces cost, complexity, and effort
SAP Web IDE plans
Offer integration with additional HCP services
Support additional editor capabilities, WYSIWYG, personalization options, and more
Include quality tools
Give customers and partners the ability to use Development Infrastructure capabilities
Introduction to SAP Web IDESummary
Code Simple
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
12/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Introduction to SAP Web IDEUseful links
SAP Web IDE
• SAP HANA Cloud Platform:http://hcp.sap.com/index.html
• SCN (SAP Community Network):https://www.sapstore.com/solutions/60009/Web-IDE
• SAP Web IDE at SAP Store:http://scn.sap.com/docs/DOC-55465
• 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 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 Ki
SAPUI5 / OpenUI5):
https://sapui5.hana.ondemand.com/sd
• OpenUI5:
http://sap.github.io/openui5/
• UI Development with SAPUI5 docum
https://help.hana.ondemand.com/help
a44bb5710148368de02b150bce3.htm
SCN (SAP Community Network)
• SAPUI5 & SAP Web IDE:
http://scn.sap.com/community/develop
• SAP Fiori:
http://scn.sap.com/docs/DOC-41598
• SAP for Mobile:
http://scn.sap.com/community/mobile
http://hcp.sap.com/index.htmlhttps://www.sapstore.com/solutions/60009/Web-IDEhttps://www.sapstore.com/solutions/60009/Web-IDEhttp://scn.sap.com/docs/DOC-55465https://account.hanatrial.ondemand.com/https://help.hana.ondemand.com/https://help.hana.ondemand.com/http://help.sap.com/nwgateway20http://help.sap.com/nwgateway20https://sapui5.hana.ondemand.com/sdk/http://sap.github.io/openui5/https://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de02b150bce3.htmlhttps://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de02b150bce3.htmlhttps://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de02b150bce3.htmlhttp://scn.sap.com/community/developer-center/front-endhttp://scn.sap.com/docs/DOC-41598http://scn.sap.com/community/mobilehttp://scn.sap.com/community/mobilehttp://scn.sap.com/community/mobilehttp://scn.sap.com/docs/DOC-41598http://scn.sap.com/community/developer-center/front-endhttps://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de02b150bce3.htmlhttp://sap.github.io/openui5/https://sapui5.hana.ondemand.com/sdk/http://help.sap.com/nwgateway20https://help.hana.ondemand.com/https://help.hana.ondemand.com/https://account.hanatrial.ondemand.com/http://scn.sap.com/docs/DOC-55465https://www.sapstore.com/solutions/60009/Web-IDEhttp://hcp.sap.com/index.html
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
13/52
Thank you
Contact information:
open@sap.com
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
14/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
© 2015 SAP SE or an SAP affiliate company. All rights
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SA
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional tradema
Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of a
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate c
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein sho
constituting an additional warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related
or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategydevelopments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, cod
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Reader
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purcha
http://global12.sap.com/corporate-en/legal/copyright/index.epxhttp://global12.sap.com/corporate-en/legal/copyright/index.epx
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
15/52
Week 4 Unit 2: SAP Web ID
App Development Basics
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
16/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
SAP Web IDE App Development BasicsPrototyping
Start
Prototype
Import
Wizard
Wizard to create apps from templates
Quick Start with Layout Editor using drag & drop
Leverage mock data instead of back-end system
Import prototype from Build tool
Import from
– SAPUI5 ABAP Repository – SAP HANA Cloud Platform
– Archive
– Git
Capabilities
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
17/52
© 2015 SAP AG or an SAP affiliate company. All rights reserved.
SAP Web IDE App Development BasicsMock data benefits
Design
Develo
Test
while (true)
Back-end-independent application development
Simulate service API and data
Decoupled development
UI First approach
Back-end-independent application tests
Unit testing
Offline and demo
The mock server simulates back-end calls within your
client app. No back-end connection.
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
18/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
SAP Web IDE App Development BasicsData model
The data model is described by the Entity Data Model (edmx) of a da
It is stored in the metadata.xml file, which can be edited with the ODa
Editor of SAP Web IDE.
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
19/52
© 2015 SAP AG or an SAP affiliate company. All rights reserved.
SAP Web IDE App Development BasicsData content
Project Set
Run the application with mock data in case your
back-end service is not (yet) available.
There are two options:
Let the mock service generate data
Provide data in a JSON file
A mock data editor is availableto enter business data suitable for
your scenario (JSON format).
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
20/52
© 2015 SAP AG or an SAP affiliate company. All rights reserved.
SAP Web IDE App Development BasicsMock data features
The client-based mock server mimics OData back-end calls by
simulating an OData provider.
Its usage is transparent to your application: No changes are required to
the application, its OData model, or the data binding. The mock server
coding comes with
– App template
– Sample app
– Or is manually coded
The mock server provides mock data – Auto-generated data (based on service metadata)
– Mock data created on your own (JSON files)
The mock server supports CRUD calls,
navigations, and most other OData 2.0 options.
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
21/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
SAP Web IDE App Development BasicsCode editors (1/2)
State-of-the-art code editors for SAP Fiori and
SAPUI5 apps
JavaScript, XML, and SAPUI5 code completion
and validations
Integration with code quality tools
Collaborative development with Git project
persistency
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
22/52
© 2015 SAP AG or an SAP affiliate company. All rights reserved.
SAP Web IDE App Development BasicsCode editors (2/2)
Code completion
– For SAPUI5, JavaScript, and XML
– Context-sensitive
– Editor completes words, code fragments, or entire
SAPUI5 objects
– Code snippets for JavaScript and XML
Cross-file navigation
Customizable code validations (All, Error, Error and
Warning, Disable)
Static code checks (linting) for JavaScript and XML
Code beautification (JavaScript, XML, CSS)
Metadata completion from schema files
API Reference pane
Auto-save
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
23/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
SAP Web IDE App Development BasicsTesting
Instantly preview your application atdifferent resolutions and in different
languages
Run your app with real or mock data
Test SAPUI5 responsive design
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
24/52
© 2015 SAP AG or an SAP affiliate company. All rights reserved.
SAP Web IDE App Development BasicsRun configurations
Configure how to run the applications in the
project settings:
Application file path to the file that is used to runthe application
Preview with or without test frame
With mock data or back-end data
SAPUI5 version
Application URL parameters: name = value
ApplicationFile Path
FrameMockData
SAPUI5Version
ApplicationURL
Parameters
Web
Applicationx x x x x
Unit Test x x
SAP Fiori
Componentx x x
SAP W b IDE A D l t B i
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
25/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
SAP Web IDE App Development BasicsDeployment
Seamlessly deploy to run on any
platform
SAP HANA Cloud Platform (register to SAP
Fiori launchpad)
SAPUI5 ABAP Repository (in ABAP package
and transport request)
Mobile usage via SAP HANA Cloud Platform
mobile service (HCPms) and SAP Mobile
Platform (SMP) Export/Import
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
26/52
Thank you
Contact information:
open@sap.com
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
27/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
© 2015 SAP SE or an SAP affiliate company. All rights
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SA
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional tradema
Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of a
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate c
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein sho
constituting an additional warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related
or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategydevelopments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, cod
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Reader
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purcha
http://global12.sap.com/corporate-en/legal/copyright/index.epxhttp://global12.sap.com/corporate-en/legal/copyright/index.epx
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
28/52
Week 4 Unit 3: Creating Your Firs
Fiori App with SAP Web IDE Tem
Creating Your First SAP Fiori App with SAP Web IDE Tem
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
29/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Creating Your First SAP Fiori App with SAP Web IDE TemTemplates & sample apps
Create your own custom
application template
Templates for creating projects
Basic SAPUI5 projects
SAP Fiori apps(Master-Detail & Worklist)
SAP Fiori smart template
application
Hybrid mobile applications
SAP Web IDE plug-in development
Sample applications
SAP Fiori reference apps Easily ramp up SAP Fiori
development by audited end-to-end
sample applications as reference
Creating Your First SAP Fiori App with SAP Web IDE Tem
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
30/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Creating Your First SAP Fiori App with SAP Web IDE TemFreestyle templates: Kick-start your app development
Motivation & Benefits
Start from a running app
High flexibility for individual use cases
Best practices for routing, error handling,
busy handling, models, mock server, app
descriptor, internationalization
SAP Fiori ready
– SAP Fiori launchpad integration
– SAP Fiori UX guidelines
• Quality focus – Clear separation of test/productive
code
– Shipped with tests (OPA5 and QUnit)
Versioning according to SAPUI5 release
cycle
Shipped with SAP Web IDE
Creating Your First SAP Fiori App with SAP Web IDE Tem
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
31/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Creating Your First SAP Fiori App with SAP Web IDE TemFreestyle templates: Master-Detail & Worklist
WorklistMaster-Detail
Creating Your First SAP Fiori App with SAP Web IDE Tem
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
32/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Creating Your First SAP Fiori App with SAP Web IDE TemFreestyle templates: Get started!
Create a new project from template:
Click File New in the menu bar,
then Project from Template
and select an SAPUI5 application template SAPU App
SAPUI5 Master-Detail
Application
Creating Your First SAP Fiori App with SAP Web IDE Tem
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
33/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Creating Your First SAP Fiori App with SAP Web IDE TemTemplate customization
Alternatively use a local file
Person
ContactGroupGroup
OrganisationContact Address
Choose a data model as a basis for your app
Typically connect to SAP Gateway service
Creating Your First SAP Fiori App with SAP Web IDE Tem
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
34/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Creating Your First SAP Fiori App with SAP Web IDE TemSAP Fiori reference apps (1/2)
Please note:
The back-end service is available with SAP NetWeaver 7.40 SP10
SCN: http://scn.sap.com/docs/DOC-59963
SAP Web IDE currently offers 3 reference apps:
You can review and
approve/reject purchase
orders
You can maintain the
product master of the
shop
You can browse
products and add
them to a shopping
basket
Approve Purchase Order Manage ProductsShop
Master-detail pattern Master-detail patternFull screen pattern
Creating Your First SAP Fiori App with SAP Web IDE Tem
http://scn.sap.com/docs/DOC-59963http://scn.sap.com/docs/DOC-59963
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
35/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Creating Your First SAP Fiori App with SAP Web IDE TemSAP Fiori reference apps (2/2)
SAP Fiori reference apps are available as sample apps in SAP Web IDE:
In contrast to the templates, SAP
Fiori reference apps are complete
apps with all the coding. They can
be used as a reference or to copy
& paste coding from.
They provide exemplary coding
and comprehensive comments
Mock-server support allows
immediate look & try, even without
a back-end system
Creating Your First SAP Fiori App with SAP Web IDE Te
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
36/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Creating Your First SAP Fiori App with SAP Web IDE TeDemo
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
37/52
Thank you
Contact information:
open@sap.com
© 2015 SAP SE SAP ffili t All i ht
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
38/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
© 2015 SAP SE or an SAP affiliate company. All rights
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SA
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional tradema
Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of a
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate c
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein sho
constituting an additional warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related
or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated
for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, cod
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Reader
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purcha
Week 4 Unit 4: Enhancing You
http://global12.sap.com/corporate-en/legal/copyright/index.epxhttp://global12.sap.com/corporate-en/legal/copyright/index.epx
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
39/52
Week 4 Unit 4: Enhancing You
SAP Fiori App with SAP Web
Enhancing Your SAP Fiori App with SAP Web IDE
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
40/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
g pp Adding more SAPUI5 controls
sap.ui.layout: Library with layout
controls (screenshot: sap.ui.layout.Grid)
sap.m: Leading control library for mobile
and mixed scenarios, used on SAP Fiori
(screenshot: sap.m.ObjectHeader)
sap.ui.unified: Library with generic
controls (screenshot: sap.ui.unified.Shell)
sap.ui.ux3*: Lib
(screenshot: sap
sap.ui.table: Library with table controls
(screenshot: sap.ui.table.Table)sap.ui.common
desktop scenario
sap.ui.commons
Multiple control libraries can be combined in one app :
Enhancing Your SAP Fiori App with SAP Web IDE
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
41/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
g pp Adding more components
Depending on the context, the New menu
lets you add more project components.
Work with
Any chan
Enhancing Your SAP Fiori App with SAP Web IDE
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
42/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
g ppDemo
Enhancing Your SAP Fiori App with SAP Web IDE
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
43/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
g ppEnhancing SAP Web IDE itself
SAP Web IDE is a flexible tool environment. A wizard supports creatio
IDE plug-ins, providing custom app templates or use case-specific too
Customized SAP
My custom app template
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
44/52
Thank you
Contact information:
open@sap.com
© 2015 SAP SE or an SAP affiliate company All rights
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
45/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
© 2015 SAP SE or an SAP affiliate company. All rights
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SA
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional tradema
Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of a
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate c
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein sho
constituting an additional warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related
or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliatedfor any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, cod
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Reader
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purcha
Week 4 Unit 5: Testing an A
http://global12.sap.com/corporate-en/legal/copyright/index.epxhttp://global12.sap.com/corporate-en/legal/copyright/index.epx
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
46/52
Week 4 Unit 5: Testing an A
with Mock Data
Testing an App with Mock Data
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
47/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
S c h e m a / S t r u c t u r e Set up a
back-endconnectionin SAPHANA CloudPlatform
A p p f r o m T
e m p l a t e Create an
SAPUI5 appfrom atemplate T e
s t t h e A p p Test the
applicationwith a backend N
e x t S t e p s
OptioCustoor enthe gservicODat
Testing with back-end data – Creating an app and testing it
Testing an App with Mock Data
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
48/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Agenda
Demo Content
Process overview with mock service
Upload an EDMX file
Create an SAPUI5 app from a template
Run the SAPUI5 app with mock data (mock service-
generated data only)
Edit and individualize the mock data with the mock editor
Take advantage of JSON files for mock data Set up a Run Configuration in SAP Web IDE
Testing an App with Mock DataC ti b d EDMX fil d t ti it
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
49/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Creating an app based on an EDMX file and testing it
S c h e m a / S t r u c t u r e
Create andset up anEDMX file
A p p f r o m T
e m p l a t e
Create anSAPUI5 appfrom atemplate T e
s t t h e A p p Test the
applicationwith themock service M
o c k D a t a Edit t
mockthe a
Testing an App with Mock DataD
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
50/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Demo
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
51/52
Thank you
Contact information:
open@sap.com
© 2015 SAP SE or an SAP affiliate company. All rights
8/19/2019 OpenSAP Fiux2 Week 04 All Slides
52/52
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
p y g
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SA
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional tradema
Some software products marketed by SAP SE and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of a
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate c
services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein sho
constituting an additional warranty.
In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related
or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy
developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliatedfor any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, cod
looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Reader
undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purcha
http://global12.sap.com/corporate-en/legal/copyright/index.epxhttp://global12.sap.com/corporate-en/legal/copyright/index.epx