OpenSAP Fiux2 Week 06 All Slides

8/18/2019 OpenSAP Fiux2 Week 06 All Slides

1/51

Week 6 Unit 1: Introduction to

Fiori Extensibility with SAPU


2/51

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

Introduction to SAP Fiori Extensibility with SAPUI5Example 1

SAP Standard Application Custom Applic

Hide Con

New

Function


3/51


Introduction to SAP Fiori Extensibility with SAPUI5Principals of Extensibility

What should we pay attention to when providing extensibility for Fiori

App with SAPUI5?

Our custom extensions should

Keep SAP’s standard unchanged (no modification)

Enable the custom app to survive future standard deliveries

Benefit from upgrades or support packages


4/51


Introduction to SAP Fiori Extensibility with SAPUI5SAPUI5 extensibility – roles & needs

Business User DeveBusiness Expert

Personalize my SAP Fiori content

My changes should not affectother people

Adapt SAP Fiori apps for my

team’s business needs

My changes affect people in

my LOB/company

Build/modify S

team

My changes a

company

Runtime Adaptation SAPUI5 E


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

Introduction to SAP Fiori Extensibility with SAPUI5Runtime Adaptation for SAP Fiori Apps (1/2)

Key users adapt the UI of SAP Fiori apps to fit particular tasks and processes:

Remove, add or create new Fields & Groups

Rename UI Elements & change the Layout

Runtime Adaptation

Supports UI Flexibility and additional adaptation

scenarios through

OData service extensions

Adobe Forms Designer

E-Mail Template Designer

Try It Out!

SAPUI5 Demo Kit > Demo Apps > Runtime Adaptation

https://sapui5.hana.ondemand.com/demoapps.htmlhttps://sapui5.hana.ondemand.com/demoapps.html



Introduction to SAP Fiori Extensibility with SAPUI5Runtime Adaptation for SAP Fiori Apps (2/2)

Transports

Key users perform adaption on TEST systems

Modifications transported to PRODUCTION

Content transported from layered repository

Runtime Adaptation

Supported by SAPUI5 flexibility services for layered persistency

Available for S/4HANA and SAP Fiori Launchpad

Users with the key user authorization



Introduction to SAP Fiori Extensibility with SAPUI5SAPUI5 extensibility concept

Extension proje(customer)

Component.js

declare

load

extend

Exte

only

Parent application(SAP standard)

Component.js

Standard

coding



SAP standardapplication

Introduction to SAP Fiori Extensibility with SAPUI5Modification-free extension of SAP’s standard apps

Exte

appli

Load parent application

Extend parent application

Adapt UI elements



SAPUI5 application

Introduction to SAP Fiori Extensibility with SAPUI5Parent App Extension Points

Component.js

Views

Controllers

UI Controller Hooks

can be implemented



Introduction to SAP Fiori Extensibility with SAPUI5SAP Fiori Apps Reference Library

http://www.sap.com/fiori-apps-library

Application features

Extensibility information per app

Extension points In Views

UI Controller Extensions

Technical documentation

& much more…

http://www.sap.com/fiori-apps-libraryhttp://www.sap.com/fiori-apps-libraryhttp://www.sap.com/fiori-apps-library


11/51


Introduction to SAP Fiori Extensibility with SAPUI5Model View Controller (MVC) & custom extensions (1/2)

Data Model

implementationdata binding

interface

implementation

• View Extension

Inject custom view content into a predefined extension pointof the standard view layout

• View Modification

Modify the visibility (hide/show) of a UI control in a standard

view

• View Replacement

Replace a standard view with a custom view layout

• Controller Extension

Controller extension

add custom

override stan

functions suc

methods

Runtime merging of

controller

a

c

b

d

Gateway Extension

(OData)

Controller (JavaScript)

View(XML layout)


12/51


Introduction to SAP Fiori Extensibility with SAPUI5Model View Controller (MVC) & Custom Extensions

View Extensions

Provides custom view content

in a specified extension point

View Replacements

Replacing a standard view with

a custom view

Controller Extensions

extending a standard controller

with a custom controller

Extension project

(Ex

Overriding control properties of

the delivered standardapplication

View Modifications


13/51

Thank you

Contact information:

[email protected]


14/51


© 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


15/51

Week 6 Unit 2: Extensibility with

Web IDE – SAP Fiori Cloud Exa


16/51


Extensibility with SAP Web IDE – SAP Fiori Cloud ExamExtending apps from SAP Fiori, cloud edition

SAP P

S u b s c r i p t i o n

SAP Fio

Extensio

SAP Web

My

Contacts

My

Benefits

My

Paystubs

My Tasks

My Leads

SAP


17/51


Extensibility with SAP Web IDE – SAP Fiori Cloud ExamVisual extensibility

1. Extensibility pane runs the app with

real or mock data

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


18/51


Extensibility with SAP Web IDE – SAP Fiori Cloud ExamExtensibility via wizards

Step-by-step wizards for adding extensions

All SAPUI5 extension options are provided in

the wizards:

Create extension project

Hide a control

Extend / Replace / Create new views

Extend a controller

Replace a service

i18n resource text customization


19/51


Extensibility with SAP Web IDE – SAP Fiori Cloud ExamDone with your extensions?

Now

Deploy your custom project to an ABAP back end or SAP HANA Cloud Platform

Register it as a new tile in your SAP Fiori launchpad

The custom app is different to the original standard app.

It serves as a start-up project, which then launches the delivered standard application a

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


20/51

Thank you


[email protected]


21/51













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






22/51

Week 6 Unit 3: Introductio

Enabling SAP Fiori for Mo


23/51


Introduction to Enabling SAP Fiori for MobileStart simple, then enhance the experience and capabilities for mobile

Web App

GPS

Voice Recording

Camera

Barcode

Calendar

Lifecycle Manageme

SAP Fiori Mob

Settings

TasksContacts


24/51


Introduction to Enabling SAP Fiori for MobileSAP Mobile Platform SDK for hybrid apps

Cordova Container

Device APIs

Device OS

Web View

HTML5 / CSS

JavaScript Engine

Platform

Libraries

The bridge interface to native APIs for hybrid

applications

Libraries in SAP Mobile Platform SDK for hybrid apps (Kapsel)

Set of enterprise plug-ins enhancing Apache Cordova

Harmonized with SAP Mobile Platform/SAP HANA Cloud

Platform mobile services to enrich SAP Fiori apps with:

– Offline data

– Encrypted storage

– Secure onboarding

– Notifications

I t d ti t E bli SAP Fi i f M bil


25/51


Introduction to Enabling SAP Fiori for MobileSAP Fiori mobile consumption options

ODataSAP Fiori

launchpad

and appsURL

Desktop & Mobile

Web Browser

(HTML5)

SAP Fiori

launchpad

and apps

SAP Fiori

Client mobile

and custom

client app

OData

SAP Mobile

Platform

Optional

URL

SAP Fiori

front-end ser

SAP Gatew

Fiori Cloud (

SAP Fiori

front-end server

SAP Gateway,

Fiori Cloud (HCP)

SAP Fiori

front-end server

SAP Gateway,

Fiori Cloud (HCP)



26/51


Introduction to Enabling SAP Fiori for MobileSAP Fiori Client

The SAP Fiori Client brings enhanced mobile

support for SAP Fiori

Consumes any SAP Fiori launchpad through direct URL

Available on app stores

Caches content for enhanced performance

Inline attachment preview

Based on Apache Cordova and Kapsel plug-ins

Supports access to various native device capabilities

You can build your own customized SAP Fiori Client


http://help.sap.com/saphelp_fiori-client13/helpdata/en/4b/0f17fcfa7e403b83dcf6e1e6cedbc6/frameset.htmhttp://help.sap.com/saphelp_fiori-client13/helpdata/en/4b/0f17fcfa7e403b83dcf6e1e6cedbc6/frameset.htm


27/51


Introduction to Enabling SAP Fiori for MobileMobile application types

Mobile Web

Web Browser

Hybrid

Mobile App

Na

Mobi

Kapsel

((



28/51


Introduction to Enabling SAP Fiori for MobileWhat is the hybrid application toolkit (HAT)?

1

SAP Web IDE plug-in enables you to develop and

deploy Apache Cordova hybrid apps in SAP Web IDE HAT has 3 components

1. SAP Web IDE plug-in

2. Hybrid app toolkit connector (Cordova CLI)

3. HAT companion application

SAP HANA Cloud P

HAT Connecto

HAT Companion

SAP Web IDE

Introduction to Enabling SAP Fiori for Mobile


29/51


Introduction to Enabling SAP Fiori for MobileSAP Web IDE HAT plug-in (1/2)

Creating Hybrid Applications

New hybrid templates for project creation

Hybrid application extension*

Convert SAP Fiori app to hybrid app*

Development Tools

Cordova/Kapsel code completion and API

reference

Device Settings configuration

– Select the Cordova & Kapsel plug-ins

– Device Platform (Android / iOS)

– And more…



30/51


Introduction to Enabling SAP Fiori for MobileSAP Web IDE HAT plug-in (2/2)

Preview in browser with Cordova Facade

Quickly validate and test hybrid app functionality

Uses simulations or available browser capabilities

Supports various native features: QR and barcode

scanning, camera, contact, and more

Build, deploy & run

Build mobile app for Android or iOS

– Connector downloads project to local machine

– Fetch specified plug-ins to create a Cordova project

Install and run on emulator or mobile device


https://help.hana.ondemand.com/webide_hat/frameset.htm?245393b6170d4fba8c23313d873bbdd5.htmlhttps://help.hana.ondemand.com/webide_hat/frameset.htm?245393b6170d4fba8c23313d873bbdd5.html


31/51


Introduction to Enabling SAP Fiori for MobileHAT – Preview with companion application

Native runtime container for hybrid apps running on a

device or emulator Native app containing Cordova, Kapsel, and SAPUI5 libraries

Enables live preview of application from SAP Web IDE

Scan QR code to load the application to device

Refresh or immediately preview changes

Built during HAT installation for iOS and Android

Now available for download in the app stores


32/51



33/51


Introduction to Enabling SAP Fiori for MobileSAP Mobile Secure

SAP Mobile Place

Brandable, localizable, and secure enterprise app store

IT admins publish, manage, and analyze mobile apps, content, and profiles

Self-service capabilities for users to manage their applications and devices

Test your mobile apps on various device simulators with Keynote integration

Mobile Device Management Portal

Remote device management, hardware/software inventory…

Application policies, silent app installs, removals…

SAP Mobile Documents

Secure and manage documents and files

Cloud offering for securing and managing your company’s mobile devices, apps, and c



34/51


Introduction to Enabling SAP Fiori for MobileSAP Fiori Mobile Service

SAP Fiori

C

SAP Mobile

Keynot

Fiori Mobile Pa

SAP Fiori

Mobile

Admin

* Planned innovation

BuildCustomize &

ConfigureSecure

Publish, Manage &

Monitor

Discover &

Onboard

New cloud offering on SAP HANA Cloud Platform, harmonizing

SAP Fiori mobile services in one user experience

Imports content from front-end server (on-premise and cloud*)

Build, customize, and configure native/hybrid apps from SAP Fiori content

Push, offline, feature management, authentication (HCPms)

App management, monitoring, and security (SAP Mobile Secure)

Publish and discovery (SAP Mobile Place)



35/51


Introduction to Enabling SAP Fiori for MobileIntegrated end-to-end SAP Fiori mobile experience

Develop/Extend

Build &Test*

Package&

Distribute

Discover&

Install

Run &Enjoy

Monitor

SAP Fiori

Mobile

Service


37/51













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




W k 6 U it 4 E t di



38/51

Week 6 Unit 4: Extending an

Fiori App for Mobile – Use C

Extending an SAP Fiori App for Mobile – Use Case


39/51


Extending an SAP Fiori App for Mobile Use CaseBuild a hybrid app in SAP Fiori, demo cloud edition

Develop Hybrid App (SAP Web IDE HAT Plug-In)

Register to SAP Fiori Cloud

Deploy to SAP HANA Cloud Platform

Preview (Cordova Façade & Companion App)

Consume (SAP Fiori Client)



40/51


g pp Available openSAP course

Developing Mobile Apps with SAP HANA Cloud Platform

Course Content

Week 1: Mobility @ SAP

Week 2: SAP Web IDE Development for SAP Fiori Apps

Week 3: SAP Fiori Client FocusWeek 4: Mobilizing SAP Fiori Apps

Week 5: Creating an Offline App

Week 6: Managing Apps with SAP Mobile Secure


https://open.sap.com/courses/mobile2/items/09VyUvkiTYy78ePyRLqDBphttps://open.sap.com/courses/mobile2/items/09VyUvkiTYy78ePyRLqDBp


41/51


g ppDemo


43/51














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



Week 6 Unit 5: Cloud Extens



44/51

Week 6 Unit 5: Cloud Extens

with SAP SuccessFactors

Cloud Extensions with SAP SuccessFactors


45/51


SAP’s in-memory platform as a service - The extension platform for SAP Cloud offe

Build new applications, renew UIs

Integrate with the

– Cloud solution

– Other SAP or 3rd party cloud/on-premise back-end systems

SAP HANA Cloud Platform provides extension applications

Integrations through secure connectivity

Development, runtime, and lifecycle management environments SSO through IdP integration

Various platform services:Persistence, analytics, authorizations, in-memory computing…

SAP HANA Cloud Platform – the extension platform



46/51


SAP SuccessFactors extensions enabled

by the SAP HANA Cloud Portal service

Seamless UI integration

– Dynamic branding & theming

– Shell alignment

Extension Designer

Management Console

Extension Marketplace

Creating attractive and seamlessly integrated extensions



47/51


Demo scenario

Prerequisites – Preconfigured SAP HANA Cloud Platform extension landscape

SAP SuccessFactors provisioned with SAP HANA Cloud Platform extension account

Trust with SAP SuccessFactors IdP

Connectivity to Successfactors HCM OData

Flow

1. Generate SAP Fiori app in SAP Web IDE

2. Consume SAP SuccessFactors OData

3. Deploy app to SAP HANA Cloud Platform

4. Design extension site

5. Integrate extension to SAP SuccessFactors navigation


http://help.sap.com/saphelpiis_cloud4hr/EN/SF_HCMS_OData_API_User_en/frameset.htm?03e1fc3791684367a6a76a614a2916de.htmlhttp://help.sap.com/saphelpiis_cloud4hr/EN/SF_HCMS_OData_API_User_en/frameset.htm?03e1fc3791684367a6a76a614a2916de.html


48/51


Available openSAP course

Extending SAP Products with SAP HANA Cloud Platform

Course ContentWeek 1: Extending SAP Cloud Products

Week 2: Cloud Extension in Details

Week 3: My First SuccessFactors Extension

Week 4: My First SAP Jam ExtensionWeek 5: My First SAP Cloud for Customer Extension

Cloud Extensions with SAP SuccessFactorsD

https://open.sap.com/courses/hanacloud3-1https://open.sap.com/courses/hanacloud3-1


49/51


Demo


50/51

Thank you


[email protected]



51/51


p y g












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

