OpenSAP Fiux2 Week4 All Slides

Week 4 Unit 1: Introduction to
SAP Web IDE
Introduction to SAP Web IDE

Key trends
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
Professional programmers are essential for

the development of complicated applications.
Business users need to be able to create
custom software applications
Gartner Hype Cycle for Application Development 2013
2015 SAP SE or an SAP affiliate company. All rights reserved.
Public

Speeding development by reducing effort
SAP Web IDE is a powerful web-based integrated development

tool that simplifies the end-to-end application development
lifecycle for SAP Fiori apps, Fiori-like apps, and SAPUI5 apps
Prototype
Develop
Test
Package
and Deploy
Extend
Public

Before SAP Web IDE, today, and future vision
AppBuilder
AppDesigner
SAP Web IDE

SAP HANA Cloud Platform
Gateway
Productivity
Accelerators
SAP Fiori
Toolkit
Eclipse
UI Development
Toolkit for
HTML5
SAP Fiori
Cloud
Edition
SAP HANA
Cloud
Integration
SAP Web IDE
SAP Mobile
Services
UI Theme
Designer
Development
Infrastructure
API
Management
This is the current state of planning and may be changed by SAP at any time.
Public

Key use cases
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
SAP Web IDE

Public

Product benefits
Reduce cost, complexity,
and effort through cloudbased offering (zeroinstallation)
Develop once, deploy

everywhere, & run on any
device - mobile, tablet,
desktop
Increase productivity by
simplifying development
to create great apps faster
Public

Key features
Prototype
BUILD
Layout Editor
Develop
Test
Code Editor
Instant Preview
Validations
Mock Data
Templates&Wizards
Sample Apps
Git
Package and
Deploy
HCP
HCPms
ABAP Repository
SMP
Enterprise Portal
Export
Extend
Visual Extensibility
Wizards
Layout Editor
SAP Fiori, cloud
edition
Public

SAP Web IDE plugins
SAP offers out-of the-box plug-ins and templates that
leverage SAP Web IDEs modular and extensible
framework.
Hybrid Application Toolkit
OData Model Editor
SAP Fiori overview page (OVP)
VizPacker
and more
Public

The big picture
SAPUI5 apps
SAP Fiori apps
Optional plug-ins
External services
Hybrid App Toolkit

OData Model Editor
SAP Fiori overview page
SAP HANA XS
(OData services)
Templates
SAP Web IDE
SAP Gateway
(OData services)
Plugin
Fact Sheet Editor

VizPacker
SAP Event Management
SAP HANA Cloud Platform (HCP)

Orion
Git
SAPUI5
SAP HANA Cloud Portal
Public

Whats 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
Public
10

Summary
SAP Web IDE is SAPs web-based development environment that enables customers and
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
Code Simple
Public
11

Useful 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:
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 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?e8fda
a44bb5710148368de02b150bce3.html
SCN (SAP Community Network)

SAPUI5 & SAP Web IDE:
http://scn.sap.com/community/developer-center/front-end
SAP Fiori:
SAP for Mobile:
http://scn.sap.com/community/mobile
Public
12
Thank you
Contact information:
open@sap.com

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 affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate
company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.
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 any kind, and SAP SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE 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 SE 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 SEs 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 SE 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 forwardlooking 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.
Public
14
Week 4 Unit 2: SAP Web IDE

App Development Basics
SAP Web IDE App Development Basics

Prototyping
Prototype
Capabilities
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
Wizard
Start
Import from
Layout
Editor
SAPUI5 ABAP Repository

SAP HANA Cloud Platform
Archive
Git
Import
Public

Mock data benefits
The mock server simulates back-end calls within your
client app. No back-end connection.
while (true)
Back-end-independent application development

Simulate service API and data
Decoupled development
UI First approach
Back-end-independent application tests
Unit testing
Design
Develop
Test
Offline and demo
2015 SAP AG or an SAP affiliate company. All rights reserved.

Data model
The data model is described by the Entity Data Model (edmx) of a data source.
It is stored in the metadata.xml file, which can be edited with the OData Model
Editor of SAP Web IDE.
<?xml version="1.0" encoding="iso-8859-1" standalone="yes"?>
<edmx:Edmx Version="1.0" xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx">
<edmx:DataServices xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" m:DataServiceVersion="2.0">
<Schema Namespace="ODataDemo" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" ...snip...>
<EntityType Name="Product">
<Key>
<PropertyRef Name="ID" />
</Key>
<Property Name="ID" Type="Edm.Int32" Nullable="false" />
<Property Name="Name" Type="Edm.String" Nullable="true" m:FC_TargetPath="SyndicationTitle" m:FC_KeepInContent="false" />
<Property Name="Description" Type="Edm.String" Nullable="true" m:FC_KeepInContent="false" />
<Property Name="ReleaseDate" Type="Edm.DateTime" Nullable="false" />
<Property Name="DiscontinuedDate" Type="Edm.DateTime" Nullable="true" />
<Property Name="Rating" Type="Edm.Int32" Nullable="false" />
...
Public

Data content
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
Project Settings:
A mock data editor is available

to enter business data suitable for
your scenario (JSON format).

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

Code 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
Public

Code 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

Testing
Instantly preview your application at

different resolutions and in different
languages
Run your app with real or mock data
Test SAPUI5 responsive design
Public

Run configurations
Configure how to run the applications in the
project settings:
Application file path to the file that is used to run
the application
Preview with or without test frame
With mock data or back-end data
SAPUI5 version
Application URL parameters: name = value
Application
File Path
Web
Application
Unit Test
SAP Fiori
Component
Frame
Mock
Data
SAPUI5
Version
Application
URL
Parameters
x
x
10

Deployment
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
Public
11
Thank you
open@sap.com

Public
13
Week 4 Unit 3: Creating Your First SAP

Fiori App with SAP Web IDE Templates
Creating Your First SAP Fiori App with SAP Web IDE Templates
Templates & sample apps
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
Create your own custom

application template
Public
Freestyle 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
Public
Freestyle templates: Master-Detail & Worklist
Master-Detail
Worklist
Public
Freestyle 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
SAPUI5 Master-Detail
Application
SAPUI5 Worklist
Application
Public
Template customization
Choose a data model as a basis for your app
Typically connect to SAP Gateway service
Alternatively use a local file
Email
Address
Group
Contact
ContactGroup
Organisation
Person
Public
SAP Fiori reference apps (1/2)
SAP Web IDE currently offers 3 reference apps:
Shop
Approve Purchase Order
Manage Products
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
Please note:
The back-end service is available with SAP NetWeaver 7.40 SP10
SCN: http://scn.sap.com/docs/DOC-59963
Public
SAP 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
Public
Demo
Public
Thank you
open@sap.com

Public
11
Week 4 Unit 4: Enhancing Your

SAP Fiori App with SAP Web IDE
Enhancing Your SAP Fiori App with SAP Web IDE

Adding more SAPUI5 controls
Multiple control libraries can be combined in one app :
sap.m: Leading control library for mobile

and mixed scenarios, used on SAP Fiori
(screenshot: sap.m.ObjectHeader)
sap.ui.table: Library with table controls

(screenshot: sap.ui.table.Table)
sap.ui.layout: Library with layout

controls (screenshot: sap.ui.layout.Grid)
sap.ui.ux3*: Library with UX3 pattern

(screenshot: sap.ui.ux3.Shell)
sap.ui.unified: Library with generic

controls (screenshot: sap.ui.unified.Shell)
sap.ui.commons*: Library for pure
desktop scenarios (screenshot:
sap.ui.commons.Panel)
*library is in maintenance
Public

Adding more components
Depending on the context, the New menu
lets you add more project components.
Work with the code editors.

Any changes are possible.
Public

Demo
Public

Enhancing SAP Web IDE itself
SAP Web IDE is a flexible tool environment. A wizard supports creation of SAP Web
IDE plug-ins, providing custom app templates or use case-specific tools.
Customized SAP Web IDE
My custom app template
Public
Thank you
open@sap.com

Public
Week 4 Unit 5: Testing an App

with Mock Data
Testing an App with Mock Data
Test the
application
with a back
end
Next Steps
Create an
SAPUI5 app
from a
template
Test the App
Set up a
back-end
connection
in SAP
HANA Cloud
Platform
App from Template
Schema / Structure
Testing with back-end data Creating an app and testing it
Optional:
Customize
or enhance
the gateway
service for
OData
Public

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 servicegenerated 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
Public
Test the
application
with the
mock service
Mock Data
Create an
SAPUI5 app
from a
template
Test the App
Create and
set up an
EDMX file
App from Template
Schema / Structure
Creating an app based on an EDMX file and testing it
Edit the local

mock data of
the app
Public

Demo
Public
Thank you
open@sap.com

Public

OpenSAP Fiux2 Week4 All Slides

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

OpenSAP Fiux2 Week4 All Slides

Uploaded by

Copyright:

Available Formats

Week 4 Unit 1: Introduction to

SAP Web IDE

Introduction to SAP Web IDE

Professional programmers are essential for

2015 SAP SE or an SAP affiliate company. All rights reserved.

Introduction to SAP Web IDE

SAP Web IDE is a powerful web-based integrated development

2015 SAP SE or an SAP affiliate company. All rights reserved.

Introduction to SAP Web IDE

SAP Web IDE

SAP Web IDE

2015 SAP SE or an SAP affiliate company. All rights reserved.

Introduction to SAP Web IDE

Develop new SAP Fiori and SAPUI5

SAP Web IDE

Introduction to SAP Web IDE

2015 SAP SE or an SAP affiliate company. All rights reserved.

Develop once, deploy

Introduction to SAP Web IDE

2015 SAP SE or an SAP affiliate company. All rights reserved.

Introduction to SAP Web IDE

2015 SAP SE or an SAP affiliate company. All rights reserved.

Introduction to SAP Web IDE

SAP Fiori apps

Hybrid App Toolkit

SAP Web IDE

Fact Sheet Editor

SAP HANA Cloud Platform (HCP)

SAP HANA Cloud Portal

2015 SAP SE or an SAP affiliate company. All rights reserved.

Introduction to SAP Web IDE

2015 SAP SE or an SAP affiliate company. All rights reserved.

Introduction to SAP Web IDE

SAP Web IDE plans

Offer integration with additional HCP services

2015 SAP SE or an SAP affiliate company. All rights reserved.

Introduction to SAP Web IDE

SCN (SAP Community Network)

2015 SAP SE or an SAP affiliate company. All rights reserved.

2015 SAP SE or an SAP affiliate company. All rights reserved.

Week 4 Unit 2: SAP Web IDE

SAP Web IDE App Development Basics

SAPUI5 ABAP Repository

2015 SAP SE or an SAP affiliate company. All rights reserved.

SAP Web IDE App Development Basics

Back-end-independent application development

Offline and demo

2015 SAP AG or an SAP affiliate company. All rights reserved.

SAP Web IDE App Development Basics

2015 SAP SE or an SAP affiliate company. All rights reserved.

SAP Web IDE App Development Basics

A mock data editor is available

2015 SAP AG or an SAP affiliate company. All rights reserved.

SAP Web IDE App Development Basics

The mock server provides mock data

The mock server supports CRUD calls,

2015 SAP AG or an SAP affiliate company. All rights reserved.

SAP Web IDE App Development Basics

State-of-the-art code editors for SAP Fiori and

2015 SAP SE or an SAP affiliate company. All rights reserved.

SAP Web IDE App Development Basics

API Reference pane

2015 SAP AG or an SAP affiliate company. All rights reserved.

SAP Web IDE App Development Basics