Week 1: Introducing SAP Fiori Elements

Unit 1: Painting the Big Picture

openSAP Developing and Extending SAP Fiori Elements Apps

Introducing SAP Fiori Elements

Painting the Big Understanding the Introducing OData Preparing your

Your Creating an OData Creating a List
Picture Architecture Services and ABAP Development Service with ABAP Report
Annotations Environment RESTful Application
Programming Model

you are here

Building Your First SAP Fiori Elements App

Creating an Object Accelerating SAP Preparing Your Generating the List Configuring the Adding Custom
Page Fiori App Front-end Report -– Object App Controls and Logic
Development with Development Page App
SAP Fiori Tools Environment

Using More SAP Fiori Elements Capabilities

Creating an Enhancing the Creating an Deploying Your Building an SAP Using XML
Analytical List Analytical List Overview Page SAP Fiori Fiori Elements App Annotation LSP for
Page Page Elements App with an External Defining Advanced
OData Service UI Features

Extending a Standard SAP Fiori App

Understanding Adapting an App Adapting the UI as Adapting the UI as Productizing the

SAPUI5 Flexibility as a Key User a Developer – a Developer – Extended App
Basic Extensions Advanced
Extensions

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

Painting the big picture
We will build apps for a travel desk clerk

Travel overview Travel list Travel details

Booking analysis Travel desk clerk Jay Food and beverages

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

Painting the big picture
A consistent user experience is important to SAP’s customers

“The current developments in user experience at SAP share

one common vision: a consistent user experience… putting
the user front and center.”

Thomas Saueressig
Member of the Executive Board of SAP SE
for SAP Product Engineering

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

Painting the big picture
Users care about UX consistency, so developers should too

There are measurable business benefits (monetary and human value) in good UX.
Consistency is at the heart of a great user experience – and a key design principle of SAP Fiori.

UX consistency
▪ Increases adoption of your app
▪ Improves business user productivity
▪ Decreases training time
▪ Improves data quality
▪ Enhances user satisfaction

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

Painting the big picture
SAPUI5 powers our web applications and their great UX

SAPUI5 is an HTML framework tailored to building modern, cross-platform,

enterprise-grade web applications.
SAPUI5 is the reference UI technology for the SAP Fiori user experience.

SAPUI5
▪ Enables the SAP Fiori design evolution for a consistent
UX across SAP solutions (and beyond)
▪ Provides built-in support for SAP’s product standards
such as security, accessibility, and internationalization
▪ Allows a single, responsive app implementation for all
browsers, platforms, and devices
▪ Can extend SAP's standard applications and customize
UIs in a code-free way

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

Painting the big picture
SAP Fiori elements lets you scale SAPUI5 app development

SAP Fiori elements provides standard floorplans and uses metadata to streamline and
accelerate developing SAPUI5 applications.
SAP S/4HANA development teams use SAP Fiori elements to build most new apps.

SAP Fiori elements

▪ Delivers enterprise-ready SAPUI5 apps based on
stable, optimized, out-of-the-box UI code
▪ Boosts developer efficiency by scaling development
and maintenance in a cost-efficient way
▪ Provides a centrally managed, consistent UX
complying with the latest SAP Fiori design
▪ Ensures upgrade stability and forward compatibility
▪ Allows extensibility of standard floorplans with custom
controls and logic

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

Painting the big picture
Standard floorplans drive developer productivity and UX consistency

Most enterprise use cases involve providing an overview of business-relevant data, working with
lists of business objects, and managing these business objects.
Provide a role-based Work on a list of Manage individual
overview business objects business objects

Overview page List report page Object page

Analytical list page Worklist page

© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 8
 Painting the big picture
SAP Fiori elements provides enterprise-ready apps out of the box

Filtering Actions Sorting Personalization SAP Fiori elements /

Variant SAPUI5 enterprise
mgmt readiness features:
Search Export ▪ Accessibility
to Excel ▪ Internationalization
Data lists
Navigation ▪ Mobile compatibility
Editing (incl. draft mgmt) ▪ Responsiveness
▪ Performance
optimizations
▪ Integration
▪ Security checks
▪ Lifecycle stability
▪ Test automation
support
Object details
▪ …and more

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

Painting the big picture
SAP Fiori elements prioritizes efficiency over flexibility

SAPUI5 freestyle SAP Fiori elements

Overall
Flexibility approach
Efficiency

Design
Freestyle designs requirements
SAP floorplans

Development
Web development knowledge
Annotations

App ownership /
Own coding, own UI logic maintenance
Own annotations, SAP’s UI logic

Total cost of
Higher development and Lower
maintenance

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

Painting the big picture
Wrap-up

IN THIS UNIT, YOU LEARNED

▪ Why UX consistency matters
▪ How SAPUI5 and SAP Fiori elements drive developer
productivity, enforce UX consistency, and deliver
enterprise-ready apps
▪ When to use SAP Fiori elements vs. SAPUI5 freestyle

NEXT UNIT
▪ Week 1 – Unit 2
Understanding the architecture

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

Thank you.
Contact information:

[email protected]
Follow all of SAP

www.sap.com/contactsap

© 2021 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/trademark for additional trademark information and notices.
Week 1: Introducing SAP Fiori Elements
Unit 2: Understanding the Architecture
openSAP Developing and Extending SAP Fiori Elements Apps

Introducing SAP Fiori Elements

Painting the Big Understanding the Introducing OData Preparing your

Your Creating an OData Creating a List
Picture Architecture Services and ABAP Development Service with ABAP Report
Annotations Environment RESTful Application
Programming Model

you are here

Building Your First SAP Fiori Elements App

Creating an Object Accelerating SAP Preparing Your Generating the List Configuring the Adding Custom
Page Fiori App Front-end Report – Object App Controls and Logic
Development with Development Page App
SAP Fiori Tools Environment

Using More SAP Fiori Elements Capabilities

Creating an Enhancing the Creating an Deploying Your Building an SAP Using XML
Analytical List Analytical List Overview Page SAP Fiori Fiori Elements App Annotation LSP for
Page Page Elements App with an External Defining Advanced
OData Service UI Features

Extending a Standard SAP Fiori App

Understanding Adapting an App Adapting the UI as Adapting the UI as Productizing the

SAPUI5 Flexibility as a Key User a Developer – a Developer – Extended App
Basic Extensions Advanced
Extensions

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

Understanding the architecture
SAP Fiori elements takes you from floorplans to an enterprise-ready application

Floorplans OData service Annotations Configuration Custom code

(optional) (optional)

Provided by: Provided by:

SAP Fiori elements framework Application developers

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

Understanding the architecture
The floorplans and application controller provide the basis for your application

Floorplans
SAP Fiori elements floorplans
▪ Implemented as XML templates
OData service ▪ Incorporate current UX design

Annotations

Configuration SAP Fiori elements application controller

▪ Connects the pages and controls
▪ Provides key features (e.g. draft)
Custom code

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

Understanding the architecture
OData connects your app to the back end

Floorplans

+ SAP draft support

OData service (optional)
OData V2 || V4
Meta description of data model
Annotations
CRUD and actions
Query language
Capabilites and restrictions
Configuration

Custom code Other OData

SAP S/4HANA SAP BW SAP BTP
provider
© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 5
Understanding the architecture
OData annotations define how the app looks and behaves

Behavior
Floorplans “This entity
Consumption hints can be edited”
Which fields allow a
human to identify the
OData service entity?
Which fields are
clickable?
Semantics

Annotations Semantics “This is the

currency for
“These fields shall the amount”
be displayed
together in a form”
Configuration

Custom code

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

Understanding the architecture
Use the power of SAP’s back ends to create OData services

Floorplans

OData service Local annotations

OData Service AND/OR

Annotations
Back-end annotations

Core Data Services

Configuration Classic ABAP ABAP Programming ABAP RESTful Cloud Application

Programming Model for SAP Fiori Programming Model Programming Model
ABAP platform (≤ 7.4) ABAP platform (≥ 7.5) ABAP platform (≥ 7.54)
SAP BTP, ABAP environment
Custom code (≥ 1808)

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

Understanding the architecture
Configure the behavior and layout of your app

Floorplans

SAP Fiori elements provides

▪ Default configuration settings
OData service based on latest UX guidelines
▪ An easy way to change it using
Responsive table (Default) Grid table
SAP Fiori tools
Annotations ▪ Layered configuration using
SAPUI5 flexibility

Configuration

Custom code

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

Understanding the architecture
Custom code complements your app beyond standard SAP Fiori elements functionality

Floorplans

Custom Custom Action Extend your app with

Column
OData service
▪ Custom controls
▪ Custom logic using the SAP
Custom Custom Action
Custom Field Section
Fiori elements ExtensionAPI

Annotations
Custom Action
Custom
Column
Configuration

The closer you stay to the standard SAP Fiori elements floorplans,
Custom code
the greater the savings in development and maintenance costs

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

Understanding the architecture
Wrap-up

IN THIS UNIT, YOU LEARNED

▪ About how SAP Fiori elements floorplans provide the basis for
your application
▪ How OData services and annotations define your application
▪ How you can configure the behavior and layout of your app
▪ How you can add custom controls and logic to your SAP Fiori
elements apps

NEXT UNIT
▪ Week 1 – Unit 3
Introducing OData services and annotations

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

Thank you.
Contact information:

[email protected]
Follow all of SAP

www.sap.com/contactsap

© 2021 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/trademark for additional trademark information and notices.
Week 1: Introducing SAP Fiori Elements
Unit 3: Introducing OData Services and Annotations
openSAP Developing and Extending SAP Fiori Elements Apps

Introducing SAP Fiori Elements

Painting the Big Understanding the Introducing OData Preparing your

Your Creating an OData Creating a List
Picture Architecture Services and ABAP Development Service with ABAP Report
Annotations Environment RESTful Application
Programming Model

you are here

Building Your First SAP Fiori Elements App

Creating an Object Accelerating SAP Preparing Your Generating the List Configuring the Extending the App
Page Fiori App Front-end Report – Object App with Custom
Development with Development Page App Elements
SAP Fiori Tools Environment

Using More SAP Fiori Elements Capabilities

Creating an Enhancing the Creating an Deploying Your Building an SAP Using XML
Analytical List Analytical List Overview Page SAP Fiori Fiori Elements App Annotation LSP for
Page Page Elements App with an External Defining Advanced
OData Service UI Features

Extending a Standard SAP Fiori App

Understanding Adapting an App Adapting the UI as Adapting the UI as Productizing the

SAPUI5 Flexibility as a Key User a Developer – a Developer – Extended App
Basic Extensions Advanced
Extensions

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

Introducing OData services and annotations
OData connects your application to the back end

+ SAP draft support

(optional)
OData V2 || V4
Meta description of data model
CRUD and actions
Query language
Capabilites and restrictions

Other OData
SAP S/4HANA SAP BW SAP BTP
provider
© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 3
Introducing OData services and annotations
OData metadata is a standardized and machine-readable description of the data model

<?xml version="1.0" encoding="utf-8"?>

OData contains a meta description of
<edmx:Edmx Version="4.0" xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx">
your data model: <edmx:DataServices>
<Schema Namespace="Trippin" xmlns="http://docs.oasis-open.org/odata/ns/edm">
▪ An entity can for example be a ‘Person’ with
<EntityType Name="Person">
the property ‘FirstName’ <Key>
▪ The property can be further qualified, for <PropertyRef Name="UserName" />
</Key>
example by providing a datatype or <Property Name="UserName" Type="Edm.String" Nullable="false" />
information like ‘nullable’ <Property Name="FirstName" Type="Edm.String" Nullable="false" />
<Property Name="LastName" Type="Edm.String" MaxLength="26" />
▪ Entities can have relationships.
<Property Name="MiddleName" Type="Edm.String" />
A 1:n relationship could be, for example, <Property Name="Gender" Type="Trippin.PersonGender" Nullable="false" />
‘1 person can be related to n trips’ <NavigationProperty Name="Friends" Type="Collection(Trippin.Person)" />
<NavigationProperty Name="BestFriend" Type="Trippin.Person" />
▪ The meta description can contain complex
<NavigationProperty Name="Trips" Type="Collection(Trippin.Trip)" />
types, actions, singletons, and so on </EntityType>
<EntityType Name="Airline">
<Key>
Example: OData.org trip service metadata
<PropertyRef Name="AirlineCode" />
</Key>
…

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

Introducing OData services and annotations
OData lets you request and modify resources and invoke actions

Requesting resources
▪ Get list of people
GET https://.../TripPinServiceRW/People
▪ Get the data of an individual person
GET https://.../TripPinServiceRW/People('russellwhyte’)
▪ Complex queries like ‘Get the first 2 persons in the system who
have registered at least one trip that costs more than 3000, and
only display their first name and last name.’:
GET https://.../TripPinServiceRW/People?$top=2 &amp;
$select=FirstName, LastName &amp;
$filter=Trips/any(d:d/Budget gt 3000)

Creating a resource
▪ POST https://...TripPinServiceRW/People and provide data
like first name, last name etc. in the payload

https://www.odata.org/getting-started/understand-
odata-in-6-steps/
© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 5
Introducing OData services and annotations
SAP defined a way to implement a draft pattern using OData

▪ Using the draft pattern is optional, but makes sense for

creating and updating business objects to keep unsaved
changes if an editing activity is interrupted, allowing users
to resume editing later.
▪ A draft is an interim version of a business entity that has
not been explicitly saved as an active version to the original
database tables.
▪ In SAP Fiori elements, drafts are saved automatically in the
background whenever users add or change information
within a business entity while in edit state (autosave). This
ongoing communication with the back end also enables
dynamic interaction patterns.
▪ Draft handling should be implemented using a framework
like ABAP RESTful Application Programming Model, ABAP
Programming Model for SAP Fiori, or SAP Cloud
Application Programming Model.

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

Introducing OData services and annotations
OData annotations define how the app looks and behaves

Behavior
“This entity can be edited”
Consumption hints
Which fields allow a human
to identify the entity?
Which fields are clickable?

Semantics
Semantics “This is the currency for the
“These fields shall be amount”
displayed together in a form”

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

Introducing OData services and annotations
Annotations provide semantics and consumption hints

Annotations are additional metadata and provide abstract definitions of data semantics. These abstract
definitions are stored in vocabularies from OData and SAP. SAP Fiori elements understand the annotations
and generates the UI based on them.

Example:
Specify that the field “TotalPrice” has a currency assigned to it. In the measures vocabulary of OData there is
a term ISOCurrency defined for that:

<Annotations Target="SAP__self.TravelType/TotalPrice">
<Annotation Term="SAP__measures.ISOCurrency" Path="CurrencyCode"/>
</Annotations>

SAP Fiori elements can then know that whenever the “TotalPrice” is shown on the UI, the field “CurrencyCode”
comprises its currency and should be shown next to it.

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

Introducing OData services and annotations
Annotations can also define standard UI elements like table, form, or chart

UI.LineItem UI.FieldGroup UI.Chart

Annotations define columns, Annotations define the group Annotations define measures,
actions, etc. title and form fields dimensions, chart type, etc.

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

Introducing OData services and annotations
Annotations also describe behavioral aspects of the application

Examples of behavioral aspects are:

▪ An instance of a business entity can be edited and
deleted. Based on this information, the
corresponding buttons can be shown/hidden on the
UI.
▪ An action can be executed on an instance of a
business entity. Only if the action is applicable is a
corresponding button enabled/displayed.
▪ When specific fields get changed on the UI it is
required to request additional data from the back
end. For example, when a price on an item table gets
changed, the UI needs to request the new total price
of the header entity from the back end.

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

Introducing OData services and annotations
SAP Fiori elements apps can be built using ABAP CDS, CAP CDS, and XML annotations

▪ All types of annotations enrich the OData service

with semantic information that allows the
generation of metadata-driven UIs
▪ Annotations can be defined either locally (XML
annotations) or in the backend (ABAP CDS, CAP
CDS annotations)
▪ Annotations in CDS views get translated to XML
annotations by the corresponding back ends
▪ The type of annotation (ABAP CDS, CAP CDS,
and XML) does not impact performance or
functionality
▪ XML annotations can be used with any back end,
for example, SAP back ends leveraging previous
ABAP programming models, SAP BW, or non- Annotations in ABAP CDS
SAP back ends

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

Introducing OData services and annotations
Your preferred tooling affects your choice of annotation type

SAP Fiori tools

(available in SAP Business Application Studio
or Visual Studio Code)
▪ Makes it easy and convenient to define UI semantics
▪ Reduces effort and the required skill level through
step-by-step guides and code completion, for example
▪ Both XML and CAP CDS annotations are supported
by SAP Fiori tools
ABAP Development Tools in Eclipse
▪ Used to maintain ABAP CDS annotations for UI
semantics and other domains as well (for example,
search, analytics, or ObjectModel)
▪ SAP Fiori tools still needed for application generation

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

Introducing OData services and annotations
Lifecycle management and feature availability influence your choice of annotation type

Where do you want to manage the lifecycle?

▪ XML annotations follow the lifecycle of your app
(local project)
▪ CDS annotations follow the lifecycle of your OData
service

Do you require recently released features?

▪ Due to different release cycles, some new annotations
might be available later in ABAP CDS
▪ For on-premise SAP systems, upgrade cycles can
further impact the availability of new features for
ABAP CDS annotations

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

Introducing OData services and annotations
Wrap-up

IN THIS UNIT, YOU LEARNED

▪ What OData is
▪ The role of drafts
▪ How annotations affect your app
▪ That you can use different types of annotations

NEXT UNIT
▪ Week 1 – Unit 4
Preparing your ABAP development environment

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

Thank you.
Contact information:

[email protected]
Follow all of SAP

www.sap.com/contactsap

© 2021 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/trademark for additional trademark information and notices.
Week 1: Introducing SAP Fiori Elements
Unit 4: Preparing Your ABAP Development
Environment
openSAP Developing and Extending SAP Fiori Elements Apps

Introducing SAP Fiori Elements

Painting the Big Understanding the Introducing OData Preparing your

Your Creating an OData Creating a List
Picture Architecture Services and ABAP Development Service with ABAP Report
Annotations Environment RESTful Application
Programming Model

you are here

Building Your First SAP Fiori Elements App

Creating an Object Accelerating SAP Preparing Your Generating the List Configuring the Extending the App
Page Fiori App Front-end Report – Object App with Custom
Development with Development Page App Elements
SAP Fiori Tools Environment

Using More SAP Fiori Elements Capabilities

Creating an Enhancing the Creating an Deploying Your Building an SAP Using XML
Analytical List Analytical List Overview Page SAP Fiori Fiori Elements App Annotation LSP for
Page Page Elements App with an External Defining Advanced
OData Service UI Features

Extending a Standard SAP Fiori App

Understanding Adapting an App Adapting the UI as Adapting the UI as Productizing the

SAPUI5 Flexibility as a Key User a Developer – a Developer – Extended App
Basic Extensions Advanced
Extensions

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

Preparing your ABAP development environment
In this course we will use the ABAP environment on SAP Business Technology Platform

Local annotations
OData Service AND/OR

Back-end annotations

Core Data Services

ABAP RESTful
Classic ABAP ABAP Programming Cloud Application
Application
Programming Model for SAP Fiori Programming Model
Programming Model
ABAP platform (<= 7.4) ABAP platform (<= 7.5) ABAP platform (>= 7.54)
SAP BTP, ABAP environment
(=> 1808)

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

Preparing your ABAP development environment
Register for an SAP BTP, ABAP environment trial account

Access to trial system

▪ Free of charge
▪ Via SAP Business Technology Platform trial access
https://www.sap.com/cmp/td/sap-cloud-platform-trial.html
▪ Trial account expires after 365 days

Rules of the game

For educational purposes only
No service-level agreement with regard
to platform availability
Shared
Trial users share the same
Trial
back-end system
Offering
No content separation between
different users

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

Preparing your ABAP development environment
Install and connect ABAP Development Tools to the ABAP environment trial system

Access to ABAP tools

▪ Instructions about the local installation of Eclipse and ADT
available on the central update site for all Eclipse-based
SAP development tools
▪ https://tools.hana.ondemand.com/#abap

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

Preparing your ABAP development environment
Wrap-up

IN THIS UNIT, YOU LEARNED

▪ How to set up your ABAP development environment for this course

NEXT UNIT
▪ Week 1 – Unit 5
Creating an OData Service using ABAP RESTful Application
Programming Model (RAP)

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

Thank you.
Contact information:

[email protected]
Follow all of SAP

www.sap.com/contactsap

© 2021 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/trademark for additional trademark information and notices.
Week 1: Introducing SAP Fiori elements
Unit 5: Creating an OData Service with ABAP
RESTful Application Programming Model (RAP)
openSAP Developing and Extending SAP Fiori Elements Apps

Introducing SAP Fiori Elements

Painting the Big Understanding the Introducing OData Preparing your

Your Creating an OData Creating a List
Picture Architecture Services and ABAP Development Service with ABAP Report
Annotations Environment RESTful Application
Programming Model

you are here

Building Your First SAP Fiori Elements App

Creating an Object Accelerating SAP Preparing Your Generating the List Configuring the Extending the App
Page Fiori App Front-end Report – Object App with Custom
Development with Development Page App Elements
SAP Fiori Tools Environment

Using More SAP Fiori Elements Capabilities

Creating an Enhancing the Creating an Deploying Your Building an SAP Using XML
Analytical List Analytical List Overview Page SAP Fiori Fiori Elements App Annotation LSP for
Page Page Elements App with an External Defining Advanced
OData Service UI Features

Extending a Standard SAP Fiori App

Understanding Adapting an App Adapting the UI as Adapting the UI as Productizing the

SAPUI5 Flexibility as a Key User a Developer – a Developer – Extended App
Basic Extensions Advanced
Extensions

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

Creating an OData service with ABAP RESTful Application Programming Model
Our travel apps need back-end logic implemented by several development artifacts

Service
Bind to scenario and protocol binding
Preview

Service
Define scope definition

Data model CDS metadata

Project elements and enrich projection extension

CDS-based
Define data model data model

Database
Application data tables

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

Creating an OData service with ABAP RESTful Application Programming Model
A generator will create the back-end artifacts and the OData services

As this openSAP course focuses on SAP Fiori

elements and not the creation of the OData
service, a generator was developed for the
course which creates all the required RAP
development artifacts for you. You can then use
this OData service and enhance its metadata
extensions.

However, if you’re interested in how to build such

an OData service from scratch using RAP, check
out the openSAP course Building Apps with the
ABAP RESTful Application Programming Model.

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

Creating an OData service with ABAP RESTful Application Programming Model
We will build the OData services for all the travel-related apps in this unit

Travel overview Travel list Travel details

Booking analysis Travel desk clerk Jay Food and beverages

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

Creating an OData service with ABAP RESTful Application Programming
Model
Wrap-up

IN THIS UNIT, YOU LEARNED

▪ How to generate the back-end artifacts and the OData
services you need to build the travel-related apps

NEXT UNIT
▪ Week 1 – Unit 6
Creating a list report

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

Thank you.
Contact information:

[email protected]
Follow all of SAP

www.sap.com/contactsap

© 2021 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/trademark for additional trademark information and notices.
Week 1: Introducing SAP Fiori Elements
Unit 6: Creating a List Report
openSAP Developing and Extending SAP Fiori Elements Apps

Introducing SAP Fiori Elements

Painting the Big Understanding the Introducing OData Preparing your

Your Creating an OData Creating a List
Picture Architecture Services and ABAP Development Service with ABAP Report
Annotations Environment RESTful Application
Programming Model

you are here

Building Your First SAP Fiori Elements App

Creating an Object Accelerating SAP Preparing Your Generating the List Configuring the Extending the App
Page Fiori App Front-end Report – Object App with Custom
Development with Development Page App Elements
SAP Fiori Tools Environment

Using More SAP Fiori Elements Capabilities

Creating an Enhancing the Creating an Deploying Your Building an SAP Using XML
Analytical List Analytical List Overview Page SAP Fiori Fiori Elements App Annotation LSP for
Page Page Elements App with an External Defining Advanced
OData Service UI Features

Extending a Standard SAP Fiori App

Understanding Adapting an App Adapting the UI as Adapting the UI as Productizing the

SAPUI5 Flexibility as a Key User a Developer – a Developer – Extended App
Basic Extensions Advanced
Extensions

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

Creating a list report
A list report allows users to view and work with a large set of items

The list report offers powerful features for finding and acting on relevant data sets. It is often used
as an entry point for navigating to the item details, which are usually shown on an object page.

With the list report, users can

▪ Search, filter, sort, and group large sets of items
▪ Work with different views on the same set of data,
for example, on items with different statuses like
‘open’ or ‘in progress’
▪ Select one or more items in the list for further
action

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

Creating a list report
The list report has several key functions

Filter bar
▪ Allows users to filter the table based on various
selection fields

Variant management
▪ Allows users to store custom views, such as filter
settings, sorting, or table columns to be displayed
Visibility
▪ Is expanded initially and collapses when the user Check the infographic in our documentation
scrolls in the table
▪ Can be pinned to stay expanded during scrolling Personalization options
▪ Show and hide table columns, specify sorting and
Table toolbar grouping
▪ Contains the table title, personalization and export
options, as well as the standard actions create, edit, Table
delete ▪ Multiple table types are supported, such as responsive
▪ Can also contain app-specific actions table or grid table
© 2021 SAP SE or an SAP affiliate company. All rights reserved. ǀ PUBLIC 4
Creating a list report
We will create UI-related ABAP CDS annotations primarily in the CDS metadata extension

Service
Bind to scenario and protocol binding
Preview

Service
Define scope definition

Data model CDS metadata

Project elements and enrich projection extension

CDS-based
Define data model data model

Database
Application data tables

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

Creating a list report
We will build the travel list page in this unit

Travel overview Travel list Travel details

Booking analysis Travel desk clerk Jay Food and beverages

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

Creating a list report
Wrap-up

IN THIS UNIT, YOU LEARNED

▪ When to use a list report floorplan
▪ About the components in a list report
▪ How to create a list report using ABAP CDS annotation

NEXT UNIT
▪ Week 2 – Unit 1
Creating an object page

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

Thank you.
Contact information:

[email protected]
Follow all of SAP

www.sap.com/contactsap

© 2021 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/trademark for additional trademark information and notices.