OpenSAP Fiux1 Week 5 Extend SAP Fiori Apps

Week 5 Unit 1: Introduction to SAP
Fiori Extensibility with SAPUI5

Introduction to SAP Fiori Extensibility with SAPUI5
Example 1
New Field
Hide Control
New Function
© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Example 2
New Function
New Field
It seems that practically

all customers extend
SAP’s standard
delivery!
Hide Controls

Extensibility by Application Layer
SAP Fiori applications can be extended by enhancing Application Layer When an Extension Is Required
The back-end logic and content required for the app
one or multiple layers, depending on the extension
extension exists in the gateway layer, but is not exposed in
requirements. UI
the app's UI.

SAP Gateway extension exists in the SAP Business Suite layer, but is not
exposed in the app's gateway service.
The back-end logic and content required for the application
SAP Business
enhancement does not exist in the SAP Business Suite
Suite
layer.
The back-end content required for the app extension exists
in the SAP HANA models, but is not exposed in the app's
SAP HANA
OData service.
Application Layer ABAP SAP Business SAP Gateway SAP HANA Native SAPUI5 SAP Fiori-specific
Skills needed Suite Development OData, UI Development
JavaScript
UI X X
SAP Gateway X X
SAP Business Suite X X
SAP HANA X X

Extensibility Powered by SAPUI5
SAP-internal (industries, local versions), partners, and customers need to be able to easily
add a field to specific parts of a business object, such as the sales order header to a sales
order line item, for example.
These custom extensions use a mechanism to

 keep SAP’s standard unchanged (no modification)
 enable the custom app to survive future standard deliveries
 benefit from upgrades or support packages
With SAP Fiori extensibility, SAP identifies specific areas where an

application can be extended. In the UI, this is implemented with SAPUI5 extensibility
mechanisms.

SAP Fiori Apps Reference Library
http://www.sap.com/fiori-apps-library
Extensibility information per app

Extension points
Technical documentation
& much more…

SAPUI5 Extensibility Concept
Parent application Extension project

(SAP standard) (customer)
Component.js Component.js
declare
load
extend
Standard Extensions
coding only

Application Component.js Being ‘Customized’
jQuery.sap.declare("<app name>.Component");
namespace of custom app JavaScript

sap.ui.component.load({
name: “<parent app name>",
url: “<parent app url>"
}); loading parent application
<app name>.Component.extend(“<app name>", {
metadata: {
version : "1.0",
config: { extending custom app
},
customizing: {
} Customization
} (= extensions) go here
});

Modification-Free Extension of SAP’s Standard Apps
SAP standard Extended custom

application application
Load parent application
Extend parent application
Adapt UI elements

Model View Controller (MVC) & Custom Extensions
Gateway Extension
(OData)
Data Model
data binding implementation
View implementation Controller

(XML layout) interface (JavaScript)
a • View Extension d• Controller Extension

Custom view content in a predefined extension point of
Controller extension hooks to
the standard view layout
 add custom controller functions
b• View Modification
Modify certain properties like visibility, that is, hide a  override standard controller
control of the standard view functions such as lifecycle
methods
c • View Replacement
Custom view layout replacing a standard view Runtime merging of standard and custom
controller
Thank You
Thank you
Contact information:
open@sap.com
© 2015 SAP SE or an SAP affiliate company. All rights reserved.
Copyright
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 SE’s 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 forward-
looking 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.

Week 5 Unit 2: Extensibility with SAP
Web IDE – UI Extensibility Basics
Extensibility with SAP Web IDE – UI Extensibility Basics
Extension App Versus Standard App: Where Is It?
Extension project in the user’s

SAP Web IDE workspace
Parent project in …

Extension App Versus Standard App: The Coding
SAP Web IDE creates a small extension project

containing the customer extensions to the original
app. It is NOT a full copy of the original app.
Extend (design time)
Parent (runtime)

Extension App Versus Standard App: The Benefit
While running, the extension app executes the parent standard app and
includes the extensions, such as hiding a button.
Standard changes from SAP like support packages or new versions are
still reflected in the extension app.

Create a New Extensibility Project in SAP Web IDE
When creating a new extension project, you identify the parent application being extended
File > New > Extension Project
2 options for the parent app

1. Refer to the workspace
2. Refer to a remote app
SAP Web IDE creates a small extension project with files like
 Component.js
 index.html
but it does NOT copy all application files

Extensibility via Wizards
The wizards for adding extensions guide the

user through a step-by-step process
All extension options of the SAPUI5
extensibility concept are provided in the
wizards:
 Create extension project
 Hide a control
 Extend a view
 Replace a view
 Extend a controller
 Replace a service
 i18n resource text customization
 Add new views to existing project

Visual Extensibility via the Extensibility Pane I
The Extensibility pane has two modes:

 Preview Mode to run the app and
navigate to the different screens.
Then switch to the
 Extensibility Mode to select UI
elements and extend them.

Visual Extensibility via the Extensibility Pane II
1. The Extensibility pane runs the app with

real or mock data
2. The Outline pane is displayed next to the
app. It shows the structure of all UI
elements, or filtered by extensible or
extended elements
3. While running the app, you can select a UI
element either in the Outline pane or
directly in the app when in Extensibility
Mode
4. Appropriate extension options can be
created -> Hide / extend / …
5. Direct navigation to the respective
extension coding

How Else Does SAP Web IDE Support Extending an App?
If you need more freedom than provided by the wizards or the visual Extensibility
pane, you can use the code editors:

Thank you
Thank you
open@sap.com
Copyright

Week 5 Unit 3: Extensibility with SAP
Web IDE – UI Extensibility Advanced
Extensibility with SAP Web IDE – UI Extensibility Advanced
Model View Controller (MVC) & Custom Extensions
Gateway Extension
(OData)
Data Model
data binding implementation
View implementation Controller

(XML layout) interface (JavaScript)
a • View Extension d • Controller Extension

Custom view content in a predefined extension point of
Controller extension hooks to
the standard view layout
 add custom controller functions
b • View Modification
Modify certain properties like visibility, that is, hide a  override standard controller functions
control of the standard view such as lifecycle methods
c • View Replacement Runtime merging of standard and custom
Custom view layout replacing a standard view controller

Extending Model View Controller Independently
Data Model
(OData service)
SAP App
View Controller
(XML layout) (JavaScript)
Replace Service
SAP Web IDE
Extend / Replace View Extend Controller
Custom Data Model

(OData service)
Custom App
Custom View Custom controller
(XML layout) (JavaScript)

Replacing a View Versus Extending a View
Hide Control
View/Controller
Replacement
Extend View
(Extension Point)

Component Configuration
Hide Control
Extend View
Replace View
Extend Controller

How Can a Translation Text Be Extended?
New -> Extension -> I18N Resource Text Customization
SAP standard text definition
Text usage in view
Custom project text definition

Done with Your Extensions?
Now deploy your custom project to an ABAP back end or SAP HANA Cloud
Platform.
The custom app is a different app than the original standard app. It serves as a
start-up project which then launches the delivered standard application and
adds the extensions at runtime.
This way your custom app

 keeps SAP’s standard app unchanged (no modification)
 survives future standard deliveries
 benefits from upgrades or support packages

Thank you
Thank you
open@sap.com
Copyright

Week 5 Unit 4: Extensibility with
SAP Web IDE – Data Extensibility
Extensibility with SAP Web IDE – Data Extensibility
SAP Fiori Extensibility for the Data Service
Application Layer When an Extension Is Required
For performance reasons, each SAP Fiori app is
based on a single OData service. extension exists in the gateway layer, but is not exposed in
UI
When extending the UI, extensions to the the app's UI.
underlying service might be necessary. The back-end logic and content required for the app
SAP Gateway extension exists in the SAP Business Suite layer, but is not
exposed in the app's gateway service.
SAP Business The back-end logic and content required for the application
Suite enhancement does not exist in the Business Suite layer.
The back-end content required for the app extension exists

in the SAP HANA models, but is not exposed in the app's
SAP HANA
OData service.
Skills needed
Application Layer ABAP SAP Business SAP Gateway SAP HANA Native SAPUI5 SAP Fiori-specific
Suite Development OData, UI Development
JavaScript
UI X X
SAP Gateway X X
SAP Business Suite X X
SAP HANA X X

OData Extensibility Concept
SAP-delivered Redefines Custom

OData project OData project
By redefining the out-of-the-box OData
service in a custom project, it is possible
to expose additional content, such as:
• Custom properties to existing entities
• Custom entities
• HTTP methods for custom entities

Efficiently Build Apps Taking Advantage of SAP Gateway
UI/Client Developer consumes the

Consumption
(SAPUI5) service in the application
Consumption
Developer extends the

Service Model OData
service model by additional
OData Modeler
UI and back-end entity types and properties
Provisioning developers can work in

parallel on the same app
Service
Service
Implementation
Builder
Developer implements the

Business Logic service by binding it to
existing data sources or
new ones
Data Source

Data Model Definition and Service Implementation

Service Extensibility – Two Service URLs
OData Client
Gateway
Server
…/EXTENDED_SRV …/BASE_SRV
Gateway
Processed by Processed by
Back End
EXTENDED_SRV BASE_SRV
Created via Redefinition

Service Extensibility – One Service URL (SAP Gateway 2.0 SP09)
OData Client
Gateway
Server
…/BASE_SRV
Gateway
Processed by
Back End
Extends
EXTENDED_SRV BASE_SRV
 no change in UI necessary
Created via Redefinition
SAP Web IDE: Definition of the Application’s Data Model
The data model metadata.xml is defined by the back-end SAP Gateway service
wizard to replace a service

SAP Web IDE OData Model Editor
 Data source creation done via platform-specific tools

 Productive service pre-requisite for a productive SAPUI5 app
 Both development experiences should be consistent
OData Model Editor

You can work without having the service fully implemented and
without leaving SAP Web IDE
1. Create a metadata .xml file to hold the app’s data model

2. Use the OData Model Editor with code completion and
schema validation features to edit the file
3. Use the Mock Data Editor to enter meaningful business data
in a JSON file, or let SAP Web IDE generate mock data
4. Run the app with mock data

SAP Web IDE OData Model Editor
Enable the OData Model Editor via Tools > External Plugins and refresh SAP Web IDE

Thank you
Thank you
open@sap.com
Copyright

Week 5 Unit 5: SAP Fiori UX Apps
Extensibility – Hybrid Application Toolkit
SAP Fiori UX Apps Extensibility – Hybrid Application Toolkit
 SAP Fiori can run on desktop, tablet, and mobile

browsers
 SAP Fiori UI provides a similar experience on different
device and screen sizes
 In some cases, the experience can be optimize based
on specific device capabilities:
 Geolocation
 Camera
 Contact list
 Offline capabilities
 Notifications

Mobilizing Apps Applying SAP Fiori UX:SAP Fiori Client
Mobile-Specific Options  Desktop & Mobile Web Browser
(HTML5)
 SAP Fiori Client mobile app
 Improves caching, lifecycle
management,... (SMP optional)
Desktop & Mobile Web
SAP Enterprise Portal - SAP Fiori Client SAP Fiori Client mobile app
Browser (HTML5)
desktop & mobile mobile app +
Client Runtime consumption
Kapsel SDK Enhanced with SAP Mobile Platform (SMP)
3.0 optimized for deployment in enterprise
Server Runtime
infrastructure
 SAP Fiori Client mobile app + Kapsel
SAP Mobile Platform SDK
 Native device capabilities
SAP Gateway  Foundation for offline access, push
notifications, and additional security
SAP Business Suite / BST powered by SAP HANA SAP  Hybrid Web Container + Kapsel SDK
HANA XS  Leverage third-party native container to
AnyDB/SAP HANA *** run SAP Fiori via SAP Mobile Platform

Mobilizing Apps Applying SAP Fiori UX: SAP Fiori Client
Challenges
Optimized
 Startup performance
 Attachment handling in full screen mode
 Support for native device capabilities
 Advanced security
Solution Direct
 Provide HTML5 and CSS 3.0 browser for iOS, Android, and Windows
 Support of app-specific on-device persistent caching strategy
 Direct URL download with cache synchronization on app-level via manifest timestamp
 Optimized URL download with cache synchronization based on manifest content via SMP
 Full-screen mode either by dedicated JavaScript API or by metadata tag in HTML
Optimized
 Attachment and document viewer

 PDF, MS Word, MS Excel, MS PowerPoint, PNG,… SAP Mobile
 Viewer is launched in full-screen mode within the browser frame Platform
 By an action or by a gesture it is possible for the end user to close the attachment window Web Server Server

Apache Cordova and SAP KAPSEL
 Set of SAP-specific plug-ins for

Cordova Container OData - Offline
Apache Cordova
Encrypted Storage
 Provides enterprise capabilities to a Logon
Cordova application Push
Web View Usage Tracking
 Fits cleanly within existing Cordova
HTML5 / CSS Logger
development environments and
processes Settings
Calendar
 Supports Android and iOS today; JavaScript Engine
Application Update
support for additional mobile device
platforms planned Platform Attachments, Printer
Libraries
3rd party plugin
 Not a forked version of Cordova 3rd party plugin
Device APIs
Device OS

What’s Hybrid Application Toolkit (HAT)?
 Enables developers to develop and deploy Apache

Cordova hybrid apps in SAP Web IDE
 Part of SAP Web IDE as a plug-in
 HAT has 3 components
 SAP Web IDE plug-in
 Connector to local build environment (Cordova CLI)
 Companion application

Templates for Hybrid Apps
Create a new project
File > New > Project
Hybrid templates are provided

 SAPUI5 Mobile Kapsel Application Project
 SAPUI5 Master Detail Kapsel Application
Additional templates of any kind can be

created, added, and managed
Template selection for new component

Strengthening Security
Change default port # and API key

 Menu Tools => Preferences
 Replace the default <apiKey> value in the
project config.json file with an
alphanumeric string
Hybrid menus only appear to hybrid

mobile project in current release

Configuring Devices
 Right mouse click on index.html file
 Device Configuration menu only
appears to hybrid apps

Coding (Assisted Development)
 “Ctrl + Space” to activate code

completion
 Additional code completion
 For Cordova plug-ins
 For Kapsel plug-ins
 API Reference pane
 For Cordova plug-ins
 For Kapsel plug-ins
* not in current GA release, planned for future release

Layout Editor (WYSIWYG) – Only Trail Landscape
Design your view graphically in the

Layout Editor and display the content of
the XML view
Right-click the XML file and open with Layout
Editor

Live Preview to Test Native Device APIs
Live Preview & Testing

 Use pre-built hybrid companion app
 Test native device APIs
 Double-click the app and refresh
 Give instant response without build the project
Note: You must configure device settings so the

application can consume native APIs properly

Deploy to Local Hybrid Toolkit
“Deploy to local hybrid toolkit”

 Downloads project to local machine
 Fetches specified Cordova plug-ins to create
Cordova project
Once successful, it is ready to build and run

Run on Emulator or Device
“Run on Emulator or Device”

 Builds mobile app for Android or iOS
 Installs it on emulator or mobile device
 Runs the app
Note: You must also have configured

device properties, otherwise no contexts
are displayed for the Run on menu
command

Deploy the App
SAP Publish SAP

 Manually send your app (with profile for iOS) to Mobile Secure Mobile Place
the administrator of the SAP Mobile Secure Server
server
Manual upload
 Upload and sign the app
.apk file (android) Mobile
 Publish it to SAP Mobile Place for distribution App
.ipa file + profile (iOS)
Mobile
Device
SAP Web IDE
Developer Workstation
Thank you
Thank you
open@sap.com
Copyright

OpenSAP Fiux1 Week 5 Extend SAP Fiori Apps

Uploaded by

Document Information

Original Title

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 Fiux1 Week 5 Extend SAP Fiori Apps

Uploaded by

Copyright:

Available Formats

Week 5 Unit 1: Introduction to SAP

Fiori Extensibility with SAPUI5

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 2

It seems that practically

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 3

The back-end logic and content required for the app

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 4

These custom extensions use a mechanism to

With SAP Fiori extensibility, SAP identifies specific areas where an

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 5

Extensibility information per app

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 6

Parent application Extension project

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 7

namespace of custom app JavaScript

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 8

SAP standard Extended custom

Load parent application

Extend parent application

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 9

View implementation Controller

a • View Extension d• Controller Extension

National product specifications may vary.

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 12

Extension project in the user’s

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 2

SAP Web IDE creates a small extension project

Extend (design time)

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 3

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 4

File > New > Extension Project

2 options for the parent app

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 5

The wizards for adding extensions guide the

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 6

The Extensibility pane has two modes:

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 7

1. The Extensibility pane runs the app with

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 8

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 9

National product specifications may vary.

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 11

View implementation Controller

a • View Extension d • Controller Extension

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Extend / Replace View Extend Controller

Custom Data Model

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 3

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 4

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 5

Text usage in view

Custom project text definition

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 6

This way your custom app

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 7

National product specifications may vary.

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 9

The back-end content required for the app extension exists

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 2

SAP-delivered Redefines Custom

© 2015 SAP SE or an SAP affiliate company. All rights reserved. Public 3

UI/Client Developer consumes the

Developer extends the