Week 3: Developing SAP Fiori Apps

Unit 1: Using SAP Business Application Studio to

Develop SAP Fiori Apps
Using SAP Business Application Studio to Develop SAP Fiori Apps
Welcome to week 3: Developing SAP Fiori Apps

This week, you will learn about:

1) Using SAP Business Application Studio to develop SAP Fiori apps

2) Building modern Web applications with SAPUI5

3) Accelerating app development with SAP Fiori elements

4) Developing OData services for SAP Fiori applications

5) Simplifying classic transaction screens with SAP Screen Personas

6) Building iOS apps

7) Creating Android apps natively or with the SAP Mobile Development Kit

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 2

Using SAP Business Application Studio to Develop SAP Fiori Apps
Agenda

In this unit, you will learn:

▪ What SAP Business Application Studio is

▪ The value SAP Business Application Studio delivers

▪ How SAP Business Application Studio fits into SAP Fiori app development

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 3

Using SAP Business Application Studio to Develop SAP Fiori Apps
SAP Business Application Studio is SAP’s latest development experience

A modular environment, tailored for

efficient development of business
applications for Intelligent Enterprise
scenarios

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 4

Using SAP Business Application Studio to Develop SAP Fiori Apps
SAP Business Application Studio provides an intuitive development environment

Developer Consistent Multi-cloud

experience experience
Address professional Providing consistent experience Aligned with SAP’s multi-cloud
developers’ needs for extending with leading IDEs using strategy, availability in various
SAP solutions with desktop-like command line, standard code hyper-scalers and regions
experience editors, Git, and more

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 5

Using SAP Business Application Studio to Develop SAP Fiori Apps
SAP Business Application Studio offers flexible development options

SAP Business Application Studio SAP Web IDE Full Stack

Available on SAP Cloud Platform, Cloud Foundry environment SAP Cloud Platform, Neo environment

Deployment target SAP Cloud Platform, Cloud Foundry SAP Cloud Platform, Neo
SAP Cloud Platform, ABAP SAP Cloud Platform, Cloud Foundry
on premise ABAP* on-premise ABAP
Developer tools • Pro code, cloud, and full-stack developers • Cloud and full-stack developers – limited
• Web/mobile developers • Web/mobile developers
• Additional personas can be supported with a • Similar experience for all personas
suited experience per persona using Dev-spaces
Experience Similar to market-leading IDEs SAP proprietary experience
Desktop-like experience via command line, Limited browser-based experience
integrated debugging, and superior code editors
Dev-space/ Dev space – Prepackaged development environments Generic workspace that contains a wide set of tools; tools
Workspace (virtual machine on the cloud) to develop, build, test, are not necessarily required for the target business scenario
and run using pre-installed runtimes, emulators
tailored experience per business scenario
Extensibility Microsoft VS Code-compatible framework with SAP proprietary framework with limited number of
thousands of available extensions extensions

*This is the current state of planning and may be changed by SAP at any time.
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 6
 Using SAP Business Application Studio to Develop SAP Fiori Apps
SAP Business Application Studio simplifies development

Turnkey Simplified Integrated SAP Ultimate

Solution Development Solutions Productivity
Prepackaged development Providing consistent experience Build smarter, more intelligent End-to-end development
environments tailored for various with leading IDEs and applications integrating SAP platform, with a desktop-like
Intelligent Enterprise scenarios – compatible with Cloud Platform services and experience, allows developers to
available anywhere, anytime Visual Studio Code SAP solutions to cater to your focus on their business domain
extensions business needs

SAP Business Application Studio is built on open source and leading industry standards

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 7

Using SAP Business Application Studio to Develop SAP Fiori Apps
SAP Business Application Studio gives developers a browser-based environment
Browser-
Based
Access

Data Sources
SAP Business Application Studio Internet/Cloud
Dev-Space
Dev-Space
SAP Cloud Business Application
On Premise
Dev-Space
SAP Fiori
Additional Extensions
Workflow Additional Extensions Development File System
Extensions (per scenario) Environment
Custom • SAPUI5
• Layout Editor
• LSP
• … and more
Source Control

SAP Cloud Platform, On-prem

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC Cloud Foundry ABAP 8
 Using SAP Business Application Studio to Develop SAP Fiori Apps
SAP Business Application Studio provides tailor-made modular development

SAP Fiori Dev Space

• IDE with JS, XML, LSP
• Fiori tools and templates (e.g., UI editor), MTA tools,
and more
• Env: Local UI5, V4 mock server
• Service Catalog

SAP Cloud Business Application Dev Space

• IDE with Java, NodeJS, XML, LSP
• SAP Fiori elements, SAP Fiori tools and templates,
MTA tools, CDS tools, and more
• Env: CLI tools, builders,….
• Service and Events* Catalog

Mobile Dev Space*

• Basic IDE
+ customize and share Dev Space with others* • Mobile Dev Kit, Mobile Cards Kit, Mobile Backend Tool
• Mobile runtime
• Service Catalog

* Future Innovation

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC This is the current state of planning and may be changed by SAP at any time. 9
Demo

Develop an SAP Fiori app using SAP Business Application Studio

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 10

Using SAP Business Application Studio to Develop SAP Fiori Apps
SAP Business Application Studio – additional information

Learn Try for Find it in Reach

More! Free! SAP Store! Out!
www.sap.com/ www.sap.com/ sapstore.com Contact your SAP
appstudio cloudplatform Account Executive

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 11

Using SAP Business Application Studio to Develop SAP Fiori Apps
Wrap-up

In this unit, you learned:

▪ How SAP Business Application Studio simplifies development through a browser

▪ The advantages of SAP Business Application Studio over other IDEs

▪ How SAP Business Application Studio makes SAP Fiori app developers more productive

Next unit:

▪ W3U2: Building Modern Web Applications with SAPUI5

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 12

Thank you.
Contact information:

open@sap.com
Follow all of SAP

www.sap.com/contactsap

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

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.
The information contained herein may be changed without prior notice. 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 or its affiliated companies shall not be liable for errors or omissions with respect to the materials.
The only warranties for SAP 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 platforms, 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, and they
should not be relied upon in making purchasing decisions.
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. All other product and service names
mentioned are the trademarks of their respective companies.
See www.sap.com/copyright for additional trademark information and notices.
Week 3: Developing SAP Fiori Apps
Unit 2: Building Modern Web Applications with
SAPUI5
Building Modern Web Applications with SAPUI5
Agenda

SAPUI5
▪ Overview
▪ SAP Fiori
▪ SAPUI5 flexibility (demo)
▪ UI5 evolution
▪ UI5 Web Components (demo)
▪ UI integration cards (demo)
▪ Openness and community
▪ Key takeaways

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 2

Building Modern Web Applications with SAPUI5
SAPUI5 is an HTML5 framework for creating cross-platform, enterprise-grade applications

As the reference UI technology for the SAP Fiori

user experience, SAPUI5 provides:
▪ A consistent SAP Fiori user experience across
SAP solutions (and beyond)
▪ Efficient development for Web applications
▪ Easy integration into SAP's single point of entry
▪ Enterprise qualities like accessibility
▪ Generic adaptation capabilities that provide UI
flexibility

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 3

Building Modern Web Applications with SAPUI5
SAPUI5 simplifies building Web applications

An SAPUI5 app is a single implementation for all:

▪ Browsers
▪ Platforms
▪ Devices

Browsers

Platforms Devices
SAPUI5 Browser and Platform Support
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 4
Building Modern Web Applications with SAPUI5
SAPUI5 is part of a diverse product portfolio

▪ SAP Fiori ▪ SAP SuccessFactors

Products
▪ SAP S/4HANA ▪ SaaS solutions from SAP

▪ SAP Web IDE

▪ SAP Business Application Studio
SAPUI5 Tools ▪ UI theme designer
▪ UI5 support assistant
▪ SAP Fiori elements,
▪ UI5 Tooling, UI5 Inspector
SAP Fiori tools

▪ SAP Cloud Platform ▪ CDN/Akamai

Distribution ▪ SAP NetWeaver for ▪ GitHub (OpenUI5)
ABAP/Java ▪ Local download
▪ SAP HANA XSA
▪ IE 11, Edge (Chromium),
Environments ▪ Windows, macOS Chrome, Firefox, Safari
▪ iOS, Android ▪ WebView

▪ SAPUI5 demo kit ▪ SAP Community

Knowledge ▪ SAP training ▪ Stack Overflow
▪ openSAP ▪ Slack
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 5
Building Modern Web Applications with SAPUI5
SAPUI5 is evolving to remain the best-fit UI technology for enterprise-grade applications

Support SAP Fiori Provide UI flexibility at Embrace new trends Leverage UI5 Web
design evolution different levels in Web technology Components

This is the current state of planning and may be changed by SAP at any time.
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 6
Building Modern Web Applications with SAPUI5
SAPUI5 implements SAP Fiori 3 – SAP’s target design system

SAP Fiori 3 provides:

▪ UX consistency
▪ Innovations
▪ Adoption across platforms & solutions
▪ Efficient development
▪ Performance
▪ Openness

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 7

Building Modern Web Applications with SAPUI5
SAPUI5 flexibility simplifies the application development and adaptation process

SAPUI5 flexibility provides:

Lifecycle-stable and Intuitive tooling tailored to the Cost-efficient UI change

modification-free UI changes needs of special target groups processes for
for SAP Fiori elements and extending apps
freestyle SAPUI5

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 8

Building Modern Web Applications with SAPUI5
SAPUI5 flexibility supports different roles and their needs

Developer Business Expert, Key User End User

I want to I want to I want to

✓ Add/change complex logic ✓ Add custom fields ✓ Change order of table columns
✓ Add new business objects ✓ Change field descriptions ✓ Hide sections, tabs
✓ Decouple software lifecycle of ✓ Change order of fields ✓ Hide few apps on SAP Fiori
standard and extensions ✓ Add/manage views launchpad

My changes should affect My changes should affect people My changes should not affect
people in my company in my LOB other people
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 9
Building Modern Web Applications with SAPUI5
Demo

Demo
SAPUI5 Flexibility

SAPUI5 demo apps https://ui5.sap.com/#/demoapps: Key user adaptation

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 10

Building Modern Web Applications with SAPUI5
UI5 evolution goals are aimed at delivering measurable benefits

The innovation project of UI5

Target performance by reducing the footprint with Performance

modularization and asynchronicity
Modularization

Move closer toward Web standards and trends to benefit Standards & Trends
from innovations, tools, and open source
Openness

Ensure compatibility to safeguard investments in existing

Compatibility
UI5 apps and provide evolution guidelines and tools

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 11

Building Modern Web Applications with SAPUI5
The evolution of UI5 accelerates the user experience

First Paint Visually Complete Download Size

~60% ~40-50% ~30%

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 12
Building Modern Web Applications with SAPUI5
UI5 Web Components deliver SAP’s user experience out-of-the-box

UI5 Web Components deliver SAP Fiori 3 design, enterprise-grade stability, accessibility,
internationalization, and theming:
▪ Share fundamental UI5 qualities
▪ Provide easy consumption of UI5 elements
▪ Consume with a small footprint
▪ Enable Web developers

UI5 Web Components provide UI5 elements as reusable

Java
Web components with: HTML
Script
▪ HTML structure and content
▪ CSS for the current theme and internationalization
▪ JavaScript to handle user interaction (behavior) CSS
Applications implement UI5 Web Components via ubiquitous HTML:

<ui5-button id="myButton"> Click here! </ui5-button>

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 13

Building Modern Web Applications with SAPUI5
Demo

UI5 Web Components

UI5 Web Components home page: https://sap.github.io/ui5-webcomponents

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 14

Building Modern Web Applications with SAPUI5
UI5 Web Components can be used with different programming models

UI5 Web Components

... ui5-button ui5-input ui5-datepicker ui5-table ...

Programming Models

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 15

Building Modern Web Applications with SAPUI5
UI5 Web technology brings scalability and flexibility to SAP Fiori app development

Efficient development based on metadata

Framework for application development

UI element with visual design and behavior

UI5 Web SAPUI5 SAP Fiori

Components OpenUI5 elements

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 16

Building Modern Web Applications with SAPUI5
UI integration cards expose application content in a consistent and unified way

UI integration with cards allows you to:

▪ Easily adopt the SAP Fiori user experience
▪ Embed cards in host environments, such as
applications, dashboards, or HTML pages
▪ Use a variety of available card types
▪ Configure cards with a simple JSON
configuration – no need to write code
▪ Create cards according to the users’ needs,
regardless of coding ability

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 17

Building Modern Web Applications with SAPUI5
Demo

UI integration cards

Card Explorer: https://ui5.sap.com/ → Tools

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 18

Building Modern Web Applications with SAPUI5
OpenUI5 is the open-source SAPUI5

Since it is the core of SAPUI5, both

frameworks can be referred to as “UI5”.

OpenUI5:
▪ Can be consumed via Content Delivery Network,
npm* packages, or GitHub
▪ Comes with SDK, documentation, tutorials,
samples/best practice apps, demos, and online
courses
▪ Is built and maintained by SAP and the open
source community, leveraging SAP Community,
Slack, and Stack Overflow

OpenUI5: https://openui5.org/

*node package manager

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 19
Building Modern Web Applications with SAPUI5
Wrap-up

In this unit, you learned that SAPUI5 is a powerful

UI technology for business apps. SAPUI5 supports:
▪ Consistency
− SAP Fiori 3 design evolution
− Consistent UX for the Intelligent Enterprise
− SAPUI5 flexibility
▪ Performance
− UI5 evolution
▪ Openness
− OpenUI5
− UI5 Web Components

Next unit:
▪ W3U3: Accelerating App Development with SAP Fiori Elements

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 20

Thank you.
Contact information:

oliver.graeff@sap.com
Follow all of SAP

www.sap.com/contactsap

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

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.
The information contained herein may be changed without prior notice. 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 or its affiliated companies shall not be liable for errors or omissions with respect to the materials.
The only warranties for SAP 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 platforms, 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, and they
should not be relied upon in making purchasing decisions.
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. All other product and service names
mentioned are the trademarks of their respective companies.
See www.sap.com/copyright for additional trademark information and notices.
Week 3: Developing SAP Fiori Apps
Unit 3: Accelerating App Development with
SAP Fiori Elements
Accelerating App Development with SAP Fiori Elements
Agenda

In this unit, you will learn:

▪ How SAP Fiori elements accelerates SAPUI5
application development
▪ Why a metadata-driven approach reduces app
development and maintenance costs
▪ How SAP Fiori tools reduces the amount of coding
required to build SAP Fiori apps

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 2

Accelerating App Development with SAP Fiori Elements
SAP Fiori elements boosts SAPUI5 developer productivity

Development UX Enterprise
Efficiency Consistency Readiness

Standardized page types SAP-delivered specifications Organizations can rapidly and

allow developers to: for data and controls ensure: consistently:
▪ Focus on business logic and ▪ A centrally managed user ▪ Deliver high-quality
back-end services experience applications to end users
▪ Leverage proven UI concepts ▪ Out-of-the box forward ▪ Benefit from best practices to
compatibility scale app creation

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 3

Accelerating App Development with SAP Fiori Elements
SAP Fiori elements has three core capabilities

Create your app using Leverage standard UI logic Customize your app with your
predefined SAP Fiori page types out of the box own controls and interactions

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 4

 Accelerating App Development with SAP Fiori Elements
Create your app using predefined SAP Fiori page types

List report page

Overview page Object page

Analytical list page Worklist page

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 5

Accelerating App Development with SAP Fiori Elements
SAP Fiori elements provides standard UI logic out of the box

▪ Navigation
▪ Search
▪ Filtering and sorting
▪ Variant management
▪ Editing (including draft management)
▪ and more

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 6

Accelerating App Development with SAP Fiori Elements
Extensions let you go beyond standard SAP Fiori elements apps

Use the SAPUI5 programming model to

extend your app according to your needs.

Leverage all SAPUI5 controls, e.g., in

custom Table columns or ObjectPage
sections.

Add your own logic, for example, new

actions or filters.

Usage tip:
The closer you stay to the standard SAP
Fiori elements page types, the greater the
savings in development and maintenance
costs.

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 7

Accelerating App Development with SAP Fiori Elements
SAP Fiori tools boosts developer productivity

SAP Fiori tools is delivered as a plug-in for

SAP Business Application Studio or Visual
Studio Code extension
▪ Contains extensions that work locally and in a
hosted environment
▪ Promotes key concepts of metadata-driven UI
▪ Provides a step-by-step guide through
development tasks
▪ Makes SAP Fiori elements more accessible to
customers and partners

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 8

Accelerating App Development with SAP Fiori Elements
SAP Fiori tools covers every stage of development

Requirements Service and

Application
Gathering/ Annotation
Adaptation
Wireframes Modeling

Metadata driven

Project Application Continuous Runtime framework specific

Generation Modeling Monitoring
Application independent

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 9

Accelerating App Development with SAP Fiori Elements
SAP Fiori tools simplifies the development of SAP Fiori elements apps

Requirements Gathering Project Generator Guided Development Service Modeler

Supports requirement definition with Creates the project Provides step-by-step Visualizes service entities,
feasibility checks for compatibility environment for development instructions and relations, properties, and
with SAP Fiori elements development generates code snippets in-line annotations

Application Modeler XML Annotation Language Server Usage Tracking

Visualizes the structure of Delivers a language server protocol for Supports continuous
the application: pages, EDMX annotations with code completion, improvement of apps
properties, and navigation micro-snippets, and diagnostics
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 10
Accelerating App Development with SAP Fiori Elements
SAP Fiori tools guides developers through the full cycle

Application Modeler
Service Modeler Application Preview

Project Generator Guided

Development

XML Annotation Language Server

@entity

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 11

Accelerating App Development with SAP Fiori Elements
Demo

Demo
Building an SAP Fiori app with integrated, interactive tools

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 12

Accelerating App Development with SAP Fiori Elements
Use the right development tools to meet your needs

Assuming a proper understanding of end-users’ needs and project requirements

SAP Fiori elements, Freestyle SAPUI5

SAP Fiori tools development

Ease of Development

Flexibility

Cost

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 13

Accelerating App Development with SAP Fiori Elements
Wrap-up

In this unit, you learned:

▪ How SAP Fiori elements makes developers more
productive
▪ How using annotations to modify a standard page type
simplifies application maintenance
▪ How SAP Fiori tools streamlines the development
process

Next unit:
▪ W3U4: Developing OData Services for SAP Fiori
Applications

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 14

Thank you.
Contact information:

open@sap.com
Follow all of SAP

www.sap.com/contactsap

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

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.
The information contained herein may be changed without prior notice. 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 or its affiliated companies shall not be liable for errors or omissions with respect to the materials.
The only warranties for SAP 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 platforms, 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, and they
should not be relied upon in making purchasing decisions.
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. All other product and service names
mentioned are the trademarks of their respective companies.
See www.sap.com/copyright for additional trademark information and notices.
Week 3: Developing SAP Fiori Apps
Unit 4: Developing OData Services for
SAP Fiori Applications
Developing OData Services for SAP Fiori Applications
Agenda

In this unit, you will learn:

▪ About SAP’s major REST-based enterprise
programming models
▪ How the SAP Cloud Application Programming Model
(CAP) supports the efficient development of Java
and JavaScript (Node.js)-based OData services
▪ How the ABAP RESTful Application Programming
Model (RAP) supports the efficient development of
ABAP-based OData services

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 2

Developing OData Services for SAP Fiori Applications
SAP Cloud Application Programming Model & ABAP RESTful Programming Model at a glance

▪ SAP Fiori elements or UI5 freestyle, or other

consuming REST APIs
SAP Fiori UI Other Clients

▪ Powerful querying through OData as well

OData, REST as plain REST APIs

▪ Powerful service runtime frameworks

▪ First-class support for SAP Fiori and SAP HANA

Enterprise ▪ Out-of-the-box implementations

Programming
▪ Draft support for SAP Fiori UIs
Models
▪ Built-in extensibility capabilities
▪ Easy integration of SAP Cloud Platform services

Core Data Services (CDS)

▪ CDS is our ubiquitous modeling language to
declare domain data models, as well as services
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 3
SAP Cloud Application Programming Model
Developing OData Services for SAP Fiori Applications
CAP overview – key building blocks and benefits

CAP complements cloud-native technologies with:

Web+

SAPApp
FioriUIs?
+ other ▪ Declarative paradigm powered by CDS
vs IDE

Services
Platform
▪ CDS-based services and frameworks
local
IDE?

CDS
Web

CDS Domain
ServiceLogic?
SDKs
▪ Out-of-the-box platform integration and abstraction
Local
SAP

SAP
Domain
HANAModel?
+ other ▪ First-class support for SAP Fiori, SAP HANA,
SAP Business Application Studio
Infrastructure
Key benefits and value propositions:
→ Primary focus on domain → What, not how!
without lock-in! → Evolutionary development → Grow as you go…
→ Out-of-the-box solutions to recurring tasks
→ Guidance through proven best practices
→ Safeguarded investments by minimized lock-ins

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 5

Developing OData Services for SAP Fiori Applications
CAP cookbook – task-oriented guides and recipes

Service
Front
Ends Add
Start Consume - Synchronous
Custom
Project Ext. - Asynchronous
- Models Logic
Services
- Code
- Data Reuse
Content

- OData v2, v4
Define - OpenAPI
Enterprise Qualities Service Publish
Define - AsyncAPI*
+ Authorization APIs
Domain - GraphQL*
+ Localization
+ Localized Data Models
+ Temporal Data Connect
+ Data Privacy to Cloud
+ Extensibility Add Tests
+ Biz Config*
Add
Databases Deploy to
Cloud
Publish Setup
for Reuse CI/CO
* not yet available
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 6
Developing OData Services for SAP Fiori Applications
Demo

Take a look at the SAP Cloud Application Programming Model

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 7

ABAP RESTful Programming Model
Developing OData Services for SAP Fiori Applications
ABAP RESTful Programming Model – the key players

ABAP Development Tools in Eclipse for all ABAP developments tasks

Easy developer onboarding
End-to-end development flow in Eclipse-based editors

Languages: ABAP and CDS

Standard implementation tasks via typed APIs supporting static code
checks, auto-completion, element info

Powerful Frameworks
Take over technical implementation tasks
Focus on business logic added in code exits on protocol-agnostic layers
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 9
Developing OData Services for SAP Fiori Applications
ABAP RESTful Programming Model – the big picture

SERVICE SAP Fiori UI Web API

CONSUMPTION Consume OData UI services Consume OData Web APIs

SERVICE BINDING – Bind to protocol version and scenario

SERVICE DEFINITION – Define scope to be exposed

BUSINESS BUSINESS OBJECT PROJECTION

SERVICES
PROVISIONING CDS: Projection views

BDEF: Behavior projection

ABAP: Behavior implementation*

BUSINESS OBJECTS QUERIES

DATA MODELING CDS: Data modeling
& BEHAVIOR CDS: Data modeling
BDEF: Behavior definition
ABAP: Behavior implementation

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC * not yet available 10
Developing OData Services for SAP Fiori Applications
ABAP RESTful Programming Model – BO runtime implementation scenarios

REUSE EXISTING CODE ➔ UNMANAGED

For brownfield development with application coding fully available for
interaction phase, transactional buffer and save sequence

INTERACTION SAVE ➔ Developers in charge of BO runtime (CRUD operations)

PHASE SEQUENCE ➔ Adapters needed to integrate the existing code

START FROM SCRATCH ➔ MANAGED*

For greenfield development with standard implementation.
Transactional
buffer ➔ Standard CRUD operations provided out of the box

SAP HANA ➔ Developers add BO-specific business logic in code exits

Available on SAP Cloud Platform, ABAP environment and SAP S/4HANA

BUSINESS OBJECT (BO) RUNTIME * Currently only available on SAP Cloud Platform, ABAP environment
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 11
Developing OData Services for SAP Fiori Applications
Demo

Take a look at the ABAP RESTful Programming Model

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 12

Developing OData Services for SAP Fiori Applications
Key takeaways

SAP offers two powerful REST-based programming models on SAP Cloud Platform for
01 building enterprise-grade extensions for cloud-based and on-premise SAP solutions.

Both programming models are based on CDS data and service models, exposed as OData
01 APIs, backed by similar out-of-the-box request handling, and best support SAP HANA and
SAP Fiori elements.

SAP Cloud Application Programming Model is available on SAP Cloud Platform for Java and
01 JavaScript (Node.js)-based development on Cloud Foundry.

ABAP RESTful Application Programming Model is available on SAP Cloud Platform ABAP
03 environment and SAP S/4HANA. It allows the reuse of existing ABAP skills and software assets.

Customers and partners on SAP Business Suite 7 can develop OData services using the
SAP Gateway Service Builder (transaction SEGW) starting with SAP ERP 6.0 EHP 5 and the
ABAP Programming Model for SAP Fiori as of SAP ERP 6.0 EHP 8.
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 13
Developing OData Services for SAP Fiori Applications
Get started today

Learn more on Learn more on

SAP Cloud Application Programming Model ABAP RESTful Programming Model
▪ Open SAP: Building Applications with the SAP ▪ Get free trial access to SAP Cloud Platform ABAP
Cloud Application Programming Model Environment
▪ Get Started ▪ Get Started with ABAP RESTful Programming Model
▪ Documentation ▪ Get Started with ABAP Core Data Services (CDS)
▪ ABAP Development Community

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 14

Developing OData Services for SAP Fiori Applications
Wrap-up

In this unit, you learned:

▪ About SAP’s major REST-based enterprise
programming models
▪ How the SAP Cloud Application Programming Model
(CAP) supports the efficient development of Java and
JavaScript (Node.js)-based OData services
▪ How the ABAP RESTful Application Programming
Model (RAP) supports the efficient development of
ABAP-based OData services

Next unit:
▪ W3U5: Simplifying Classic Transaction Screens with
SAP Screen Personas​

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 15

Thank you.
Contact information:

open@sap.com
Follow all of SAP

www.sap.com/contactsap

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

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.
The information contained herein may be changed without prior notice. 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 or its affiliated companies shall not be liable for errors or omissions with respect to the materials.
The only warranties for SAP 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 platforms, 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, and they
should not be relied upon in making purchasing decisions.
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. All other product and service names
mentioned are the trademarks of their respective companies.
See www.sap.com/copyright for additional trademark information and notices.
Week 3: Developing SAP Fiori Apps
Unit 5: Simplifying Classic Transaction Screens
with SAP Screen Personas
Simplifying Classic Transaction Screens with SAP Screen Personas
Agenda

In this unit, you will learn:

▪ How SAP Screen Personas fits into the SAP Fiori UX
strategy
▪ How to simplify classic transaction screens to run on
any device
▪ When to use SAP Screen Personas vs. other UX
transformation approaches

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 2

Simplifying Classic Transaction Screens with SAP Screen Personas
SAP Screen Personas brings the SAP Fiori UX to SAP GUI screens

SAP Screen Personas:

▪ Is an add-on* that lets you simplify existing SAP GUI transaction screens
Rapid ▪ Lets you rapidly create “flavors” of transaction screens without any ABAP coding
Transformation ▪ Renders transactions as SAPUI5 applications
▪ Supports both desktop and mobile devices

SAP Fiori Designs ▪ Provides business users with a more intuitive user experience (SAP Fiori UX)

*included with SAP NetWeaver license with no additional charge to you

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 3
Simplifying Classic Transaction Screens with SAP Screen Personas
SAP Screen Personas brings the SAP Fiori UX to SAP GUI screens

Consider using SAP Screen Personas to:

▪ Simplify and modernize your SAP GUI transactions in SAP S/4HANA
or SAP Business Suite
Enterprise Scale ▪ Deliver functionality when an app does not exist in the SAP Fiori apps
reference library
▪ Reduce employee training on SAP systems

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 4

Simplifying Classic Transaction Screens with SAP Screen Personas
SAP Screen Personas brings the SAP Fiori UX to SAP GUI screens

Rapid
Transformation SAP Fiori Designs Enterprise Scale

Simple drag-and-drop editor Built-in SAP Fiori themes, Integrated into the core ERP
allows business analysts to: templates, and styles enable: system so organizations can:
▪ Add, edit, move, or hide ▪ Full SAP Fiori experience on ▪ Launch flavors from SAP Fiori
controls on the screen SAP GUI screens launchpad
▪ Automate repetitive actions to ▪ Consistency across SAP Fiori ▪ Expand SAP Fiori coverage in
increase user productivity apps and SAP Screen Personas SAP S/4HANA or older
flavors versions of SAP ERP, without
coding

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 5

Simplifying Classic Transaction Screens with SAP Screen Personas
SAP Screen Personas brings SAP Fiori 3 to SAP GUI screens

Original screen in SAP S/4HANA (before) Simplified screen in SAP S/4HANA (after)

Complex search screen includes criteria that people Single, simplified screen combines search, results,
don’t use and graphics

Separate search and results screens force users to Uses SAP Fiori designs to deliver consistent user
navigate back and forth experience across devices
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 6
Simplifying Classic Transaction Screens with SAP Screen Personas
Demo

Creating an adaptive flavor to run on all your devices

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 7

Simplifying Classic Transaction Screens with SAP Screen Personas
Support for classic UIs for SAP S/4HANA and SAP Business Suite

SAP Screen Personas offers support for:

On-premise
▪ SAP S/4HANA
▪ SAP Business Suite powered by SAP HANA
▪ Older versions of SAP ERP

Cloud
▪ SAP Business Suite powered by SAP HANA
(SAP HANA Enterprise Cloud)

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 8

Simplifying Classic Transaction Screens with SAP Screen Personas
SAP Screen Personas supports SAP S/4HANA and older versions of SAP ERP

Supported minimum SAP NetWeaver Basis versions are:

▪ SAP S/4HANA with kernel 7.49+
▪ 750 with kernel 7.49
…
▪ 700 with kernel 7.22

Link to implementation considerations on the SAP Help Portal for SAP Screen Personas
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 9
 Simplifying Classic Transaction Screens with SAP Screen Personas
Choose a path to the SAP Fiori user experience based on your needs

Start:
Design Thinking

New Does
Yes Does app New Existing Yes Download SAP
Build app using or existing app exist in
follow common business reference Fiori app, adapt
Fiori elements floorplan? scenario? library? if necessary
No No

Simplify t-code
Develop SAPUI5
with SAP
freestyle app
Screen Personas

SAP Fiori
user experience
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 10
Simplifying Classic Transaction Screens with SAP Screen Personas
Get started today

Learn more Next steps

▪ SAP Screen Personas product page ▪ Sign up to receive SAP Screen
▪ Post your question in the SAP Screen Personas support news
Personas community ▪ Register for the SAP Screen Personas
▪ Find answers to your questions on the Practitioner Forum (third Wednesday of every
Help Portal month)
▪ Download the SAP Screen Personas add-on

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 11

Simplifying Classic Transaction Screens with SAP Screen Personas
Wrap-up

In this unit, you learned:

▪ How SAP Screen Personas applies the SAP Fiori user
experience to classic transaction screens
▪ Steps to transform SAP GUI transactions into an adaptive
flavor
▪ When to use SAP Screen Personas rather than building
SAP Fiori apps

Next unit:
▪ W3U6: Creating Android Apps Natively or with the
Mobile Development Kit

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 12

Thank you.
Contact information:

open@sap.com
Follow all of SAP

www.sap.com/contactsap

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

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.
The information contained herein may be changed without prior notice. 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 or its affiliated companies shall not be liable for errors or omissions with respect to the materials.
The only warranties for SAP 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 platforms, 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, and they
should not be relied upon in making purchasing decisions.
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. All other product and service names
mentioned are the trademarks of their respective companies.
See www.sap.com/copyright for additional trademark information and notices.
Week 3: Developing SAP Fiori Apps
Unit 6: Building iOS Apps
Building iOS Apps
Agenda

Why native mobile?

Apple | SAP partnership

SAP Fiori for iOS design language

SAP Cloud Platform SDK for iOS

Benefits – value prop

Resources

Demo

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 2

“By 2022, 70% of
software interactions
in enterprises will
occur on mobile
devices.”
– Gartner, February 2018
Building iOS Apps
SAP's mobile user experience strategy for end users

People are able to choose where and when they work

Conversational interactions

Consume and integrate on-device AI Smart-

phones
Smart
Connect remote workers Tablets
Watches

Companion devices for specialized tasks

Desktop / Smart
Laptop Glasses

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 4

Building iOS Apps
There are benefits to creating native mobile applications

Native applications provide:

▪ Instant access to operating system and
device innovations
▪ A consistent experience due to native look and
feel
▪ Additional native capabilities such as camera,
GPS, sensors, and Core ML
▪ Best-possible app performance
▪ Excellent tool support, debugging, performance
analysis, etc.

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 5

Building iOS Apps
Apple and SAP have partnered to drive mobile innovation in the enterprise space

“SAP is the ideal partner to help us truly

transform how businesses around the world are
run on iPhone and iPad.”
– Tim Cook (Apple CEO)

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 6

SAP Fiori for iOS
design language
Building iOS Apps
The SAP Fiori for iOS design language covers a wide range of scenarios

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 8

Building iOS Apps
Delight mobile users with SAP Cloud Platform SDK for iOS

There are three layers to the SDK: Fiori

Foundation
SAP Fiori for iOS
OData
▪ Delivers the SAP Fiori user experience, while also
providing the expected iOS experience
SAP Cloud Platform
Foundation: integration layer with mobile services
▪ Provides key enterprise services for security, connectivity,
app services, and more
Mobile Services
OData
▪ Manages access to back-end systems with support for
online and offline operation

SAP S/4HANA
or Business Suite,
LOB or other OData
© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 9
Building iOS Apps
SAP Cloud Platform SDK for iOS reduces total app development time

25−30% 30−40%
development time saved design time saved

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 10

 Building iOS Apps
SAP Cloud Platform SDK for iOS provides powerful features for native app development

Benefits Capabilities

Swift-based SDK for iOS

Empower designers and including UI controls,
developers with tools to frameworks for data
quickly and efficiently build access, security,
iOS apps for the enterprise supportability

Enable apps with native iOS SAP Fiori for iOS design
look and feel high language
performance

SDK Assistant automatically

Accelerate development generates fully running app
with UI controls, scaffolding by reading
frameworks, and tools metadata from back-end
enterprise APIs

Innovate by taking
advantage of rich iOS device SAP Fiori Mentor app
features like ARKit, Core ML, generates customized UI
location services, and code snippets for Fiori
notifications controls

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 11

Building iOS Apps
SAP Cloud Platform SDK for iOS provides powerful features for native app development

Tools to empower Designers to Tools to empower Developers to build

design delightful & consistent apps efficient & high performance apps

Design guidelines SAP Fiori Mentor app

Design stencils SAP Cloud Platform SDK
Assistant app for Mac
SAP Fiori Mentor app

frameworks for data

native iOS reusable on device features like app scaffolding from
access, security &
look & feel components ARKit, Core ML etc. backend API’s
supportability

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 12

Building iOS Apps
SAP provides design guidelines for iOS applications

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 13

Building iOS Apps
SAP provides design stencils for various controls

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 14

Building iOS Apps
Discover the capabilities of SAP Cloud Platform iOS SDK through the SAP Fiori Mentor app

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 15

Building iOS Apps
SAP Cloud Platform SDK Assistant for Mac generates fully running app scaffolding by
reading metadata from back-end enterprise APIs

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 16

Building iOS Apps
Demo

Native Mac Assistant app

SAP Fiori for iOS controls in the SDK
Build a Core ML Fiori iOS app based on image recognition
Resources: sketch design stencils, design guidelines,
SAP Fiori Mentor app

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 17

Building iOS Apps
Wrap-up

In this unit, you learned:

▪ The value of native mobile apps and when to use them
▪ How the Apple | SAP partnership helps you design the
best experience for your users
▪ How the SAP Cloud Platform SDK for iOS facilitates
mobile app development

Next unit:
▪ W3U7: Creating Android Apps Natively or with the Mobile
Development Kit

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 18

Thank you.
Contact information:

open@sap.com
Follow all of SAP

www.sap.com/contactsap

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

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.
The information contained herein may be changed without prior notice. 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 or its affiliated companies shall not be liable for errors or omissions with respect to the materials.
The only warranties for SAP 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 platforms, 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, and they
should not be relied upon in making purchasing decisions.
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. All other product and service names
mentioned are the trademarks of their respective companies.
See www.sap.com/copyright for additional trademark information and notices.
Week 3: Developing SAP Fiori Apps
Unit 7: Creating Android Apps Natively or with the
Mobile Development Kit
Creating Android Apps Natively or with the Mobile Development Kit
Agenda

In this unit, you will learn:

▪ How to build a native app using the Android SDK
▪ How the Mobile Development Kit (MDK) can be used
to develop a cross-platform application

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 2

SAP Cloud Platform SDK for Android
Creating Android Apps Natively or with the Mobile Development Kit
SAP Fiori for Android design guidelines

▪ Combines SAP Fiori design and material design

▪ Type system using SAP’s 72 font
▪ SAP Fiori colors
▪ Iconography
▪ UI components and patterns
▪ Sketch stencils

SAP Fiori design for Android

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 4
Creating Android Apps Natively or with the Mobile Development Kit
SAP Cloud Platform SDK for Android: essentials

Integrates seamlessly with native Android technologies to build powerful apps

leveraging device features and Fiori design language

Accelerates developer efficiency with a modular approach, simple deployment,

comprehensive documentation, and deep integration

Contains APIs for online and offline apps accessing data from
SAP S/4HANA and other SAP and third-party systems

SDK Wizard SDK UI Components SDK Foundation & OData

App configuration Fiori design language Components

Java proxy class generator Native UI components for User onboarding

for OData back-end enterprise apps Networking & authentication
Components: services
Client store/cache
Generates Android project
with OData proxy classes Offline OData
and optional reference UI (with synchronization)

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 5

Creating Android Apps Natively or with the Mobile Development Kit
SAP Fiori Mentor app

▪ Explore SAP Fiori for Android on device

▪ Live previews of all components
▪ Both tab and phone layouts
▪ Control customization
▪ Code generation (Kotlin and Java)

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 6

Creating Android Apps Natively or with the Mobile Development Kit
Demo

Overview of SAP Fiori for Android

Control customization

Code generation (Kotlin and Java)

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 7

Mobile Development Kit
Creating Android Apps Natively or with the Mobile Development Kit
Mobile Development Kit summary

▪ Low-code mobile application development tool

▪ Cross-platform deployments – iOS and Android
▪ Supports simple and complex workflows
▪ Offline/online use cases
▪ Fiori SDK user experience

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 9

Creating Android Apps Natively or with the Mobile Development Kit
Mobile Development Kit

Low Code
Development SAP Fiori Designs Enterprise Mobility

Simple drag-and-drop editor Uses the native platform- Integrated into mobile
allows developers and specific Fiori controls: services:
business analysts to: ▪ Leverages the SAP Cloud ▪ Access to back-end data
▪ Add, edit, move, and hide Platform SDKs for iOS & Android sources
controls on the screen ▪ Aligned with SAP Fiori design ▪ Quick deployment of app
▪ Define screens, actions, and principles to provide an changes without reinstalling
business logic amazing user experience

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 10

 Creating Android Apps Natively or with the Mobile Development Kit
Mobile Development Kit

Build, customize, and administer native mobile applications in a highly

productive, metadata-driven model
Benefits Capabilities

Reduce app development Visual development of

costs and increase pages, data queries, and
productivity with a simple, business logic
low-code tool Robust offline and
online support
Customize select pre-
built SAP apps (SAP
Asset Manager, etc.) to Native SAP Fiori user
your business needs experience
Relieve maintenance
burden with easy lifecycle Extend functionality
management with custom extension
controls

Easily manage security Cross-platform

across apps development that
supports iOS and Android

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 11

Creating Android Apps Natively or with the Mobile Development Kit
Demo

Developing applications with the Mobile Development Kit

Cross-platform results on iOS and Android

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 12

Creating Android Apps Natively or with the Mobile Development Kit
Get started today

Learn more Try it free

▪ Android SDK Learning Journey ▪ Sign up for SAP Cloud Platform, developer edition
▪ Android SDK Interactive Tutorials ▪ Download the Android SDK or Mobile
▪ Mobile Development Kit Learning Journey Development Kit from the Trials and Downloads
site
▪ Mobile Development Kit Interactive Tutorials

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 13

Creating Android Apps Natively or with the Mobile Development Kit
Wrap-up

In this unit, you learned:

▪ About the SAP Fiori for Android design language
▪ How the SAP Cloud Platform SDK for Android can
help you build delightful mobile applications
▪ How to use the SAP Fiori Mentor app to help you
explore Fiori UI components on Android
▪ How the Mobile Development Kit can help you build
low-code, cross-platform mobile applications

Next week:
▪ Managing SAP Fiori

© 2020 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 14

Thank you.
Contact information:

open@sap.com
Follow all of SAP

www.sap.com/contactsap

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

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.
The information contained herein may be changed without prior notice. 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 or its affiliated companies shall not be liable for errors or omissions with respect to the materials.
The only warranties for SAP 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 platforms, 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, and they
should not be relied upon in making purchasing decisions.
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. All other product and service names
mentioned are the trademarks of their respective companies.
See www.sap.com/copyright for additional trademark information and notices.