OpenSAP Fiori-Ea1 Week 3 All Slides

Week 3: Using More SAP Fiori Elements Capabilities
Unit 1: Creating an Analytical List Page

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
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 Page Analytical List Overview Page SAP Fiori Fiori Elements App Annotation LSP for
Page Elements App with an External Defining Advanced
OData Service UI Features
you are here
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 analytical list page
An analytical list page provides a way to explore data using visualizations
The analytical list page offers a visual way to analyze data from different perspectives. It is commonly used
to filter large data sets visually and drill down to explore specific segments or individual items.
With the analytical list page, users can

▪ Identify interesting areas within datasets using
data visualization
▪ See the impact of filter settings in a chart
(visual filter)
▪ Switch between integrated chart and table
views
▪ See the impact of an action on a global key
performance indicator (KPI)
▪ Search, filter, sort, group, and slice and dice
large sets of items

The analytical list page has several key functions
1
Filter area
▪ Supports two types: compact filters and the visual filters
▪ Toggle between the two filters using a switch
Variant management 2
▪ Allows users to store custom views, such as filter
settings, sorting, or table columns to be displayed
Adapt filter dialog

▪ Allows users to customize the compact and visual filters Check the infographic in our documentation
Chart
▪ Displays information in a chart with the corresponding View switch
data in a table view below. Clicking on datapoints in the ▪ Hybrid view: View with one chart and a chart toolbar,
chart changes the table view correspondingly and one table and a table toolbar
Table ▪ Chart-only view: View with one chart and a chart toolbar
▪ Supported table types include analytical, grid, and ▪ Table-only view: View with one table and a table toolbar
responsive tables
We will build the booking analysis app in this unit
Travel overview Travel list Travel details
Booking analysis Travel desk clerk Jay Food and beverages

Wrap-up
IN THIS UNIT, YOU LEARNED

▪ When to use an analytical list page
▪ About the components in an analytical list page
▪ How to create an analytical list page using guided development
NEXT UNIT
▪ Week 3 – Unit 2
Enhancing the analytical list page

Thank you.
Contact information:
open@sap.com
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.
Unit 2: Enhancing the Analytical List Page

Programming Model
Analytical List Analytical List Overview Page SAP Fiori Fiori Elements App Annotation LSP for
Page Page Elements App with an External Defining Advanced
you are here

Extensions

We will focus on the filtering capabilities in this unit
Previous unit: content area This unit: filter area

▪ Chart ▪ Compact and visual filters
▪ Table

Visual filters provide an intuitive way of choosing filter values using charts
The visual filter bar

▪ Offers a unique way of filtering large datasets through visualizations
▪ Allows users to combine measures with filter values
▪ Supports three types of interactive chart – bar chart, line chart, and donut chart
Bar chart Line chart Donut chart

We will enhance the booking analysis app in this unit

Wrap-up

▪ How to enhance the analytical list page application with
compact filters and visual filters
NEXT UNIT
Creating an overview page

Thank you.
open@sap.com
Follow all of SAP

warranty.
Unit 3: Creating an Overview Page

Programming Model
you are here

Extensions

An overview page provides domain-specific information to a user on a single page
The overview page displays an overview of data relevant for a specific business area or role.
It presents business-critical information and allows users to easily identify and act on the most important
information. Cards show data as text, charts, lists, or tables.
Use the overview page to

▪ Provide an entry-level view of content related
to a specific domain or role
▪ Show content from different sources on a
single page
▪ Use card types to convey information in
different ways
▪ Filter information across different cards/apps
to complete role-specific tasks

The overview page has several key functions
Filtering
▪ Use the smart filter bar to filter the relevant data on cards.
Data is filtered with the same property name as the
applied filter
Variant management
▪ Allows users to store custom views, such as filter settings
Personalization options
▪ Drag and drop cards to another position and the layout will Check the infographic in our documentation
be saved the next time the user logs in
▪ Hide cards using manage cards and SAPUI5 flexibility for Navigation
key users ▪ Navigate to either SAP Fiori or non-SAP Fiori apps
▪ Change card size in the resizable layout ▪ Intent-based navigation is used for SAP Fiori apps
▪ Non-SAP Fiori apps open in a new browser window
Layouts
▪ Choose between fixed card layout and resizable card View switch
layout that can be configured by a manifest flag ▪ Use a view switch to offer several different content areas
on one card
We will build the travel overview app in this unit

Wrap-up

▪ When to use an overview page
▪ About the components in an overview page
▪ How to personalize the overview page
▪ How to create an overview page
NEXT UNIT
Deploying your SAP Fiori elements app

Thank you.
open@sap.com
Follow all of SAP

warranty.
Unit 4: Deploying Your SAP Fiori Elements App

Programming Model
you are here

Extensions

You can deploy manually or by using an automated pipeline (CI/CD)
Deploy
Developer IDE Dev Account/System

AppStudio
VSCode
Push/Merge
Trigger Trigger
CI/CD Transport
Code Continuous Integration (CI) Transport QA Account Prod Account

Repository Server Lifecycle
Deploy
SAP Fiori tools supports different options for deployment
SAP Fiori tools provides various options to deploy SAP Fiori applications to different target
environments
SAP Fiori tools helps deploy to

▪ ABAP on-premise
▪ SAP Business Technology Platform, ABAP environment
▪ SAP Business Technology Platform standalone
▪ SAP Business Technology Platform as part of multi-target
applications (MTA)
+ the tools help to add an SAP Fiori launchpad configuration

Deploy apps from SAP Fiori tools in two steps
1) Generate the deployment configuration 2) Run the deployment
This creates or modifies .yaml deployment Use command-line tools to run the
configuration using command actual deployment task
npx fiori add deploy-config npm run deploy

We will deploy the travel apps in this unit

Wrap-up

▪ About the different deployment options
▪ Where to learn more about deployment in CI/CD
▪ How to deploy developed apps to SAP Business
Technology Platform
NEXT UNIT
Building an SAP Fiori elements app with an external
OData service

Thank you.
open@sap.com
Follow all of SAP

warranty.
Unit 5: Building an SAP Fiori Elements App with an
External OData Service

Programming Model
you are here

Extensions

Building an SAP Fiori elements app with an external OData service
You can also use external OData services with local XML annotations
▪ SAP Fiori elements applications can be built on OData V2

or V4 services, either SAP back end or external source
▪ The annotations controlling your SAP Fiori UI can be
defined directly in the application project (local annotations)
▪ SAP Fiori tools assists with adding and editing local
annotations:
– Directly in the annotation XML file using the XML
annotation language server (all relevant annotations)
– In wizard-like mode using the guided development
(most common features)
▪ XML annotation language server (LSP) assists with
maintaining annotations from the standard and SAP OData
vocabularies
▪ The same LSP features are available for CAP CDS*
*Out of scope for this course

XML annotation LSP drives development efficiency
Input help with code Built-in validation checks Navigation to referenced

completion suggestions and quick-fix actions annotations and properties
Integrated vocabulary Internationalization support Where-used lookup for

definitions through a quick-fix action annotations
The XML annotation LSP works with all OData annotations used in SAP Fiori elements apps
1. Add filter fields

1
2. Add table with UI.LineItem
3. Combine object name and ID 2
4. Define translatable labels 5 4
5. Add table header 3

6. Display related numeric values as micro charts
7. Enhance filter field with the fixed value list
(dropdown)
8. Hide irrelevant default buttons and fields

We will build the food and beverages app in this unit

Wrap-up

▪ How to build SAP Fiori elements applications using
external OData services and local annotations
▪ How to use XML annotation LSP to add and edit local
annotations in the code editor
NEXT UNIT
Using XML annotation LSP for defining advanced UI features

Thank you.
open@sap.com
Follow all of SAP

warranty.
Unit 6: Using XML Annotation LSP for Defining
Advanced UI Features

Programming Model
you are here

Extensions

The XML annotation LSP works with all OData annotations used in SAP Fiori elements apps
1. Add filter fields

2. Add table with UI.LineItem 7 8
3. Define translatable labels
4. Combine object name and ID
5. Add table header 6
6. Display related numeric values as micro charts

7. Enhance filter field with the fixed value list
(dropdown)
8. Hide irrelevant default fields and buttons

We will add functionality to the food and beverages app in this unit

Wrap-up

▪ How to use XML annotation LSP to add and edit
local annotations in the code editor
- Input help with code completion suggestions
- Built-in validation checks and quick-fix actions
- Navigation to referenced annotations
- Integrated vocabulary definitions
- Where-used lookup for annotations
- Internationalization (i18n) support

Building SAP Fiori elements apps
SAP Fiori elements boosts SAPUI5 development efficiency
Developer UX Enterprise
Productivity Consistency Readiness
▪ Focus on business logic ▪ Comply with the latest SAP ▪ Deliver high quality SAPUI5
and back-end services Fiori design specification applications to end users
▪ Write less UI code ▪ Deliver a centrally managed ▪ Ensure stable, optimized
▪ Reduce development and user experience UI code out-of-the-box
maintenance costs ▪ Include uniform layout, ▪ Include standard enterprise
navigation, search, filtering, features (accessibility, mobile,
and more translation support, …)

Building SAP Fiori elements apps
Wrap-up of weeks 1-3
IN WEEKS 1-3, YOU LEARNED

▪ How SAP Fiori elements makes it faster and easier
to create enterprise-ready apps
NEXT UNIT
Understanding SAPUI5 flexibility

Thank you.
open@sap.com
Follow all of SAP

warranty.

OpenSAP Fiori-Ea1 Week 3 All Slides

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

OpenSAP Fiori-Ea1 Week 3 All Slides

Uploaded by

Copyright:

Available Formats

Week 3: Using More SAP Fiori Elements Capabilities

Unit 1: Creating an Analytical List Page

Introducing SAP Fiori Elements

Painting the Big Understanding the Introducing OData Preparing your

Building Your First SAP Fiori Elements App

Using More SAP Fiori Elements Capabilities

you are here

Extending a Standard SAP Fiori App

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

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

With the analytical list page, users can

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

Adapt filter dialog

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

IN THIS UNIT, YOU LEARNED

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

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

Introducing SAP Fiori Elements

Painting the Big Understanding the Introducing OData Preparing your

Building Your First SAP Fiori Elements App

Using More SAP Fiori Elements Capabilities

you are here

Extending a Standard SAP Fiori App

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

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

Previous unit: content area This unit: filter area

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

The visual filter bar

Bar chart Line chart Donut chart

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

IN THIS UNIT, YOU LEARNED

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

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

Introducing SAP Fiori Elements

Painting the Big Understanding the Introducing OData Preparing your

Building Your First SAP Fiori Elements App

Using More SAP Fiori Elements Capabilities

you are here

Extending a Standard SAP Fiori App

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

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

Use the overview page to

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

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

IN THIS UNIT, YOU LEARNED

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

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

Introducing SAP Fiori Elements

Painting the Big Understanding the Introducing OData Preparing your

Building Your First SAP Fiori Elements App

Using More SAP Fiori Elements Capabilities

you are here

Extending a Standard SAP Fiori App

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

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

Developer IDE Dev Account/System

Code Continuous Integration (CI) Transport QA Account Prod Account