第 47 页 / 共 465 页
1.6 Summary
to business and integration services (SAP Tax Service, RabbitMQ on SAP Cloud Plat-
form, SAP Cloud Platform Integration). To ease the consumption of the SAP S/4HANA
VDM and OData APIs on top of it, from SAP Cloud Platform, SAP has released the SAP
S/4HANA Cloud SDK.
SAP/Partner/ Business
SAP S/4HANA In-App Customer/ Objects IoT/Big Data LoB Cloud
Core App Extension Industry Cloud (C4A) App App
Extension App
SAP S/4HANA Core Applications SAP S/4HANA SAP Cloud Platform (SCP)
Cloud and On-Premise Applications and Services
Transactional Analytics ABAP R Transactional Analytics Java, Node.js A O p th p e li r c a C t l i o o u n d s
Logic Logic
Service (SAP and
calls Third Party)
R R R R
R
Virtual Data Model (VDM)
Vora,
SAP S/4HANA Core Tables (SAP ERP) Extension Tables Storage Messaging External Big
R Data sources
SAP HANA Platform Big Data
Data Lake
Figure 1.10 Overall Architecture of the SAP S/4HANA Application Suite, including SAP Cloud
Platform for Developing Side-by-Side Extensions
1.6 Summary
SAP S/4HANA is based on a completely different architecture optimized for SAP
HANA. Nevertheless, a major goal of the SAP S/4HANA architecture is to stay as com-
patible as possible with previous SAP ERP releases to ease migration and to leverage
the already-existing, well-established, and proven business processes developed by
SAP, partners, and customers in recent decades. A cornerstone of SAP S/4HANA is the
VDM based on CDS, which enables code pushdown to SAP HANA to a large extent
according to the Code-to-Data paradigm. The VDM is the foundation of all applica-
tion types in SAP S/4HANA, from transactional and analytical over to external inter-
faces and ESH. Explicitly released parts of the VDM can also be used by partners and
customers as the foundation for developing custom applications. The renewed UX
based on SAP Fiori is another big leap forward and will be discussed in detail in the
next chapter.
47
| Analytics |
|---|
| Virtual Data Model (VDM) | |
|---|---|
第 48 页 / 共 465 页
第 49 页 / 共 465 页
Chapter 2
SAP Fiori and the Design-Led
Development Process
In this chapter we will get familiarized with the design-led develop-
ment process for SAP Fiori application developments and the different
set of tools that will help the developer with this process.
This chapter introduces you to SAP Fiori, which is the new user experience (UX) for
SAP S/4HANA. In addition, we’ll cover the design-led development process, which
helps with developing SAP Fiori applications; different app types available for devel-
opers to choose from when starting with app development; and the different proto-
typing tools that support developers with the design process (e.g., SAP Build and
Axure). We’ll use the SAP Build tool to make a prototype design by following the
design-led development process.
2.1 What Is SAP Fiori?
With SAP Fiori, SAP provides a consistent and elegant UX that creates a stunning
design with emphasis on ease of use. The user interface (UI) is also simple to use and
works seamlessly across multiple devices and screen sizes. The SAP Fiori UX has five
core characteristics: role-based, adaptive, simple, coherent, and delightful. SAP Fiori
focuses on providing role-based applications to its users, which means the apps offer
a specific service that is relevant for a user’s role.
SAP Fiori apps are also designed to simplify by breaking down complex apps into
multiple simple apps focusing only on a specific task. For example, the standard SAP
transaction for creating a sales order or a purchase order has multiple options and
tabs in it. This overwhelming amount of options in the transaction might not be use-
ful for all users and can be confusing and complicated. SAP Fiori apps take such big
and complex transactions and split them into multiple simple apps to help users per-
form the required task with just a few clicks. This helps a user who isn’t familiar with
49
第 50 页 / 共 465 页
2 SAP Fiori and the Design-Led Development Process
the SAP GUI to still complete his task because there is little to no learning curve when
it comes to using SAP Fiori apps. Users can focus on what they want to do rather than
figuring out how to use the UI to complete their task.
Until now, SAP Fiori has gone through two iterations. Let’s discuss those next.
2.1.1 SAP Fiori 1.0
Introduced in 2013, SAP Fiori started as a paid version where customers had to buy a
license per user. On June 2014, during the SAP SAPPHIRE NOW event, SAP Fiori UX (see
Figure 2.1) and SAP Screen Personas were announced as free and included with the SAP
software. This had a huge impact in the increase in adoption rate of SAP Fiori among
customers.
Figure 2.1 SAP Fiori 1.0 UX
50
第 51 页 / 共 465 页
2.1 What Is SAP Fiori?
SAP Fiori started with 25 apps that were developed by analyzing the most frequently
used transactions in SAP. Later, more apps were added in the form of Wave I, Wave II,
and so on, resulting in more than 500 apps. Over the years, SAP Fiori evolved from
just a collection of apps to providing a totally new UX for SAP customers that com-
prised solutions such as SAP Business Suite for SAP HANA (SAP S/4HANA), SAP Suc-
cessFactors Employee Central, SAP Ariba Mobile, SAP Cloud for Customer, and more.
The SAP Fiori 1.0 design is valid with SAPUI5 versions 1.26 – 1.38.
2.1.2 SAP Fiori 2.0
On October 2016, SAP Fiori 2.0 (Figure 2.2) was launched, representing the latest evo-
lution of the new UX for SAP S/4HANA and the SAP Business Suite.
Figure 2.2 SAP Fiori 2.0 UX
51
第 52 页 / 共 465 页
2 SAP Fiori and the Design-Led Development Process
Based on the SAPUI5 version 1.40 and higher, this new version of SAP Fiori UX focuses
on helping users concentrate on their specific task and keep track of activities in
other areas at the same time.
SAP Fiori 2.0 offers the following key features:
(cid:2) A simple UX along with apps that can complete the tasks quickly, thereby increas-
ing user productivity
(cid:2) Quick and direct accessibility to relevant information and applications
(cid:2) Notifications on a timely manner for items that need attention
(cid:2) Help for users when deciding what needs to be done next
(cid:2) Options for quick and informed actions
(cid:2) Focus on improving user satisfaction
2.1.3 Design Principles
As mentioned earlier, the basic design concepts of SAP Fiori UX are based on five core
principles (Figure 2.3).
Role-Based Delightful Coherent Simple Adaptive
Figure 2.3 Core Design Principles of SAP Fiori
These principles are described as follows:
(cid:2) Role-based
Initially, SAP Fiori apps were made for specific type of users based on their roles,
such as manager, employee, salesperson, and so on. In the new UX, SAP has now
expanded those roles with more focus on your business, your needs, and how you
work. This is in line with the multifaceted roles of today’s workforce. Depending
on the nature of a user’s work, the user might have to perform different tasks
within multiple business domains. The new SAP Fiori UX provides information in
a timely manner based on the way users work.
52
第 53 页 / 共 465 页
2.1 What Is SAP Fiori?
(cid:2) Delightful
In addition to creating a smarter UX for you to work in, SAP Fiori also adds value to
the working environment by letting you focus on your work. The UX should nei-
ther be filled with information that might not be relevant to the role of the app’s
user nor should it be confusing for users to use the app.
(cid:2) Coherent
A good design should be consistent with the UX throughout the app. Users
shouldn’t feel disconnected when navigating from one app to the other; instead, it
should feel like all the screens within the apps are exactly where they should be.
Too much deviation in the design pattern between screens won’t provider a pleas-
ing user experience.
Irrespective of which SAP Fiori app you use—for example, Approving Leave
Requests, Creating Purchase Requisitions, Creating Sales Orders—SAP Fiori fol-
lows a consistent design and integration pattern that lets you enjoy a consistent
experience.
(cid:2) Simple
If an app has too many buttons, information, or features, the user will find the app
complicated to use. Your app should focus primarily on the task based on the role
of the user for which the app was designed. The goal is to let the user complete his
task efficiently with minimal button clicks.
SAP Fiori lets you complete a task quickly and intuitively by giving you only the
essential functions to carry out your tasks with a simple UI. You can even person-
alize the UX to focus on your relevant tasks and activities.
(cid:2) Adaptive
An adaptive design should not only be able to resize its UX according to the device
type but also be able to rearrange or slightly adjust the UX to cope with a smaller
or larger screen size. A modern UI should be designed by the developers by speci-
fying what information and where it should be displayed within the app based on
the available screen area.
All SAP Fiori apps follow this design guideline. So, in addition to an elegant, simple,
and efficient UX, SAP Fiori also enables you to work on the go by seamlessly adapting
the UX based on which device you’re using. SAP Fiori UX adapts according to your
task by providing relevant information that allows for meaningful insights.
53
第 54 页 / 共 465 页
2 SAP Fiori and the Design-Led Development Process
2.1.4 Responsiveness and Adaptiveness
In today’s world, we need everything on the go and instantly. SAP Fiori is no excep-
tion as it gives users the ability to switch seamlessly between desktops and mobile
devices instantly. For this reason, developers must ensure that the apps deliver that
same UX, which is why a responsive and adaptive design is important.
Responsive Design
One of the main highlights about SAP Fiori UX compared to its legacy GUI is that it
works across all devices irrespective of size to ensure a consistent UX on all devices.
SAPUI5 offers a wide range of controls that can automatically adjust its size for differ-
ent form factors and interaction styles, such as touch, tap, keyboard strokes, mouse
clicks, and so on. SAPUI5 controls are also flexible enough that developers can manu-
ally adjust these properties, such as the size of the controls, to adjust the type of inter-
action based on the device, if necessary. The main advantage of using these controls
for a responsive design is that you don’t need any additional coding for these con-
trols to adjust the size accordingly.
Adaptive Design
When it comes to certain scenarios, offering just a responsive approach might not be
the suitable solution. For example, when using a SAP Fiori app on a desktop, you
might prefer to see the maximum number of columns in a table so that you can edit
or add data to some of the columns. In a tablet, on the other hand, you might not
want to see all those columns at once and would rather see only the columns in
which you’ve already entered some data (you’ll likely want to see even fewer columns
on a smartphone). So, it makes sense to have different designs by adapting the com-
plexity for apps that display a lot of data or information based on the device the app
is being viewed on. This adaptive design approach requires developers to decide log-
ically which fields or information in that app make more sense based on the screen
size or device. Although this approach requires some additional effort from the
developer, it will ensure a smooth UX for such apps across all devices.
2.1.5 SAP Fiori Launchpad
SAP Fiori launchpad (Figure 2.4) is a single point of entry for all SAP Fiori apps. SAP
Fiori Launchpad is a collection of different types of app tiles ranging from static tiles
54
第 55 页 / 共 465 页
2.1 What Is SAP Fiori?
to tiles showing dynamic content, such as status indicators, number of pending
approvals, open orders, and so on. These tiles are role based and represent a business
application that can be launched by the user. In this book, we’ll be focusing on the
SAP Fiori launchpad for SAP Fiori 2.0.
Figure 2.4 SAP Fiori 2.0 Launchpad
Viewport Design
The viewport (Figure 2.5) is a design approach for SAP Fiori launchpad where certain
portions of the launchpad’s screen are made visible only when the user clicks on the
toggle buttons in the shell bar on the top-right and top-left corners. This design
approach helps the launchpad provide users with additional user-specific informa-
tion and notifications only when they need them.
The transition or the animation to toggle these display areas itself is unique and
smooth, which gives the user a sense of continuity within the launchpad (Figure 2.6).
When the user clicks on either of the top side toggle buttons on the shell bar, the
whole screen smoothly slides to the left or the right side to show the additional infor-
mation area.
55
第 56 页 / 共 465 页
2 SAP Fiori and the Design-Led Development Process
Figure 2.5 SAP Fiori 2.0 Viewport Design Approach
56
第 57 页 / 共 465 页
2.1 What Is SAP Fiori?
Me Context Notification
Me Context NotifiMcaetion Me Context Notification
Figure 2.6 Animation Flow of a Viewport Design
Home Page
A home page is the starting page of the SAP Fiori launchpad that holds all the apps.
The home page can also be personalized according to the preference of the user, such
as adding, removing, or grouping tiles. Because launchpad is role-based, only the
apps based on the roles assigned to the user will be available.
Me Area
This is one of the areas of the SAP Fiori launchpad’s screen that is hidden by default
as part of the viewport design approach. The Me Area (Figure 2.7) is toward the left
side of the launchpad and can be accessed by clicking on the toggle button on the top-
left corner of the screen. This view is always accessible irrespective of whether you’re
in the home page or in any other apps in the launchpad.
The Me Area consists of the Sign Out, App Finder, Settings, and Edit Home Page but-
tons, as well as the Recent Activity tab showing the most recent actions of the user,
such as which apps were recently opened, and a Frequently Used tab showing the list
of most frequently used apps by the user.
57
| Me | |||
|---|---|---|---|
| Context |
| Notification | ||
|---|---|---|
| Me Context | Context |
第 58 页 / 共 465 页
2 SAP Fiori and the Design-Led Development Process
Figure 2.7 Me Area in the SAP Fiori Launchpad Home Page
In addition to the regular buttons, the Me Area also has an About button and an
optional App Settings button, which can be made visible by the developer if the app
needs to have some app-specific settings, such as selecting the area of responsibility
for material requirements planning (MRP) controllers.
Notifications Area
On the right side of the SAP Fiori launchpad, following the same viewport design
principle, the Notification Area (Figure 2.8) can be accessed by clicking the toggle but-
ton on the top-right side of the shell bar. This area is dedicated to system-specific
notifications, such as workflows, chat notifications, and so on. These notifications
can also be prioritized and grouped. This Notification Area provides the user with
more information on a specific notification and actions the user can take within the
Notification Area, such as approving workflows, approving leave requests, or similar
actions. This level of flexibility helps users stay focused on the current tasks and yet
perform such actions in parallel even without navigating from the current app on
which they are working.
58
第 59 页 / 共 465 页
2.1 What Is SAP Fiori?
Figure 2.8 Notification Area of the SAP Fiori Launchpad
SAP CoPilot
SAP CoPilot is one of the latest and most powerful features added to SAP Fiori 2.0. SAP
CoPilot was released with SAP S/4HANA Cloud 1705 (currently, this feature is only
delivered on SAP S/4HANA Cloud) and is SAP’s first step into integrating a virtual
assistant to the enterprise sector. The SAP CoPilot is always aware of your business
context, gives you relevant information on the apps within the SAP Fiori launchpad,
helps you take actions, and so on. You can type in the chat window of the SAP CoPilot
asking it, for example, to show you information about a certain purchase order or
sales order, and the SAP CoPilot will list the results (Figure 2.9). You can even click on
the results so that the purchase order or sales order will be opened in the relevant
app.
59
第 60 页 / 共 465 页
2 SAP Fiori and the Design-Led Development Process
Figure 2.9 SAP CoPilot in SAP Fiori Launchpad
The main features of the SAP CoPilot (Figure 2.10) are as follows:
(cid:2) Notes
Users can make use of the SAP CoPilot to take down notes while using the apps.
SAP CoPilot will automatically link your notes to that specific app so that when-
ever you return to that app, you can access all of the notes specific to that app by
clicking on the Linked to Current Screen tab.
(cid:2) Screenshots
The Screenshot feature isn’t just an image capture option; in fact, the SAP CoPilot
is intelligent enough to retain the navigation properties and filter parameters for
that app so that when the user clicks on the screenshot, it allows the user to navi-
gate to that app.
60
第 61 页 / 共 465 页
2.1 What Is SAP Fiori?
(cid:2) Recognizing business objects
The SAP CoPilot has the capability to recognize the business context of the current
application and allow you to add it your notes and screenshots.
(cid:2) In-context chat
This is a neat feature where you can chat with other users in the SAP Fiori launch-
pad, enabling you to share notes, screenshots, and business objects with them. In
addition, when users click on the screenshot, they can navigate directly to the app
with all the filters and parameters used by you at the time of taking the screenshot,
enabling fellow users to see exactly what you wanted to show them within the app.
(cid:2) Quick actions
Users can create business objects through many embedded Quick Create UIs.
These fields are already filled from the context by the SAP CoPilot automatically.
Figure 2.10 Different Features Offered in SAP CoPilot’s Chat Option
61
第 62 页 / 共 465 页
2 SAP Fiori and the Design-Led Development Process
SAP Fiori Launchpad Components
The SAP Fiori launchpad is comprised of multiple components. These are mainly
divided into five parts:
(cid:2) Tile
A tile is like an application icon on your desktop—when you click on an app tile
within the SAP Fiori launchpad, it opens the relevant app within the launchpad.
(cid:2) App finder
App finder is an easy way to search within the list of apps that are assigned to your
role. You can use the app finder to quickly search for apps and add the app tiles to
your launchpad. This replaces the old tile catalog option in the SAP Fiori 1.0
launchpad.
(cid:2) Enterprise Search (ESH)
ESH can search within all the apps. For example, if you search for a specific sales
order, ESH will list all the apps linked to that sales order.
(cid:2) Shell bar
A shell bar is like the main toolbar of the SAP Fiori launchpad. It holds the Me Area,
Notification Area, ESH, and SAP CoPilot. It also has the navigation button, home
button, and a dedicated area for displaying custom icons for branding.
(cid:2) Services
SAP Fiori launchpad has several services that can be leveraged by app developers,
such as getting the local currency or date format of the current user, handling
cross-app and in-app navigations, contacting support, and so on.
2.2 Design-Led Development Process
To ensure a great UX that caters to the needs of customers across all lines of business
and devices, you need a development strategy. And that’s where SAP’s design-led
development process comes.
The process involves adopting proven design thinking methods that span the entire
development process while also being simple, easy to implement, and scalable. Con-
stant communication and understanding are required between the designers and
developers. This approach ensures that customers’ needs are met at both the visual
and functional levels of the apps. In SAP Fiori app development, there are three main
phases: Discover, Design, and Develop. The design-led development process (Figure
2.11) focuses on the first two phases.
62
第 63 页 / 共 465 页
2.2 Design-Led Development Process
Discover Design Develop
Scope Ideate Implement
Research Prototype Test
Synthesize Validate Deploy
Problem Phase Solution Phase
Figure 2.11 The Design-Led Development Process
Developing an app isn’t just about coding because you must keep the end user in
mind during development. Providing strong features within our app is great, but it
shouldn’t come at the cost of usability. So, it’s critical for a developer to know about
the user who is going to use the app. In the first phase of development, you should
focus on the customer and try to understand how the customer works, what exactly
the customer is expecting from the app, and so on. Only after getting these funda-
mental things right, should you move to the design phase to create prototypes
required for the development. After development is done, then you can thoroughly
complete the implementation and testing to make the app ready for deployment.
2.2.1 Discover
Sometimes having a requirements list for the app that needs to be developed doesn’t
give you the whole picture. You might need to visit your customers and get to know
their process in person. Therefore, having design thinking workshops with the cus-
tomer is always a great way to understand the customer’s business needs. By the time
you’re done with the discovery phase, you should be aware of all the business roles
and should have a description of the roles of the users who are going to be using the
app. These descriptions of roles are known as personas. A persona should be created
for all the different types of users who will be using the app, and it should describe the
roles, tasks, and activities of those users. This information will prove vital during the
design phase of your app because, by then, you’ll have a clear picture of the require-
ments.
63
第 64 页 / 共 465 页
2 SAP Fiori and the Design-Led Development Process
2.2.2 Design
When you’re in the design phase, you can brainstorm with your team and come up
with a storyboard using the personas as a reference for the users. Then you can come
up with multiple prototypes and cross-check the prototype designs with your cus-
tomer to come up with a final version of the design.
2.2.3 Develop
With a design that is being mutually agreed on between you and the customer, now
you can start building the app. During development, you might still need to tweak
and come up with multiple iterations based on the continuous feedback from the
customer at different stages of the development. You can split the app’s develop-
ment into multiple milestones get the customer involved and take their feedback at
the end of each major milestone to further optimize the app. It’s good to involve the
customer during this phase to make the customer aware of any unforeseen technical
constraints that have come up during the development phase.
After the app is completed and being tested, there might still be room for more
tweaking and optimizations before having a finished product. After this phase, you
are finally ready to deploy the app. You could also implement a concept called design
gates, which comprise a team of UX experts who will be reviewing the product during
the development at different stages to ensure that the app is consistent with the SAP
Fiori design guidelines. This team can help the development team stay in line with
the design guidelines and further optimize the UX.
2.3 Different SAP Fiori App Types
When it comes to developing SAP Fiori apps, there are multiple flavors of apps that
you can use, but it mainly is divided into two categories: freestyle apps and SAP Fiori
elements-based apps.
2.3.1 Freestyle
Just like the name suggests, you can start developing the app from scratch, and you’re
free to take up any design style you want. However, the trade-off with going freestyle
is that there is a higher probability of you deviating from the standard SAP design
guidelines, and you might want to enforce a much stricter UX review method, such as
64
第 65 页 / 共 465 页
2.3 Different SAP Fiori App Types
a design gate. Design gate reviews will ensure that you stay within SAP Fiori guide-
lines so that the app will still feel like it’s part of that consistent UX experience that
SAP Fiori apps offer. But when the customer demands a custom app, sometimes it
makes more sense to go with the freestyle apps rather than with template-based
options that we’ll talk about in the next section.
2.3.2 SAP Fiori Elements
Before getting into SAP Fiori elements, let’s consider some fundamental areas of
building a SAP Fiori app design:
(cid:2) Dynamic page layout (formerly known as full screen layout)
(cid:2) Flexible column layout (formerly known as split screen layout)
Different layout types are called floorplans (Figure 2.12), so a dynamic page layout will
have one floorplan because it’s a full screen app, and a flexible column layout will
have two or three floorplans in it.
SAP Fiori Launchpad Dynamic Page/Flexible Flexible Column Flexible Column
Home Page Column Layout Layout (2-columns) Layout (3-columns)
Floorplans
Figure 2.12 Overview of Layouts and Floorplans
SAP Fiori elements were formerly known as smart templates. Compared to freestyle
apps, SAP Fiori elements provide app templates that cover most of the common app
types. The developer can use the SAP Fiori elements to make use of these layouts,
floorplans, and an OData source to generate an app to display the data.
SAP Fiori elements also ensure that an app has a consistent design and follows the
SAP Fiori design guidelines.
65
第 66 页 / 共 465 页
2 SAP Fiori and the Design-Led Development Process
The following subsections describe the most commonly used SAP Fiori elements
floorplans.
Technically, you can further subdivide the List Report and Object Page apps into two.
But you can navigate from a List Report app to its detail screen, which is an object
page (object pages were formerly known as factsheets). So, if your app only needs to
have a List Report page, basically all you need to do is disable the navigation to the
object page. If an object page is all you need, then you can directly navigate to the
object page, for example, when you click on a process order number hyperlink as part
of the search result from an ESH, then you’ll navigate to an object page directly,
which will show the process order in detail.
List Report
So first let’s consider a list report (Figure 2.13) and some use cases on when you would
want to choose a list report. A list report gives the user the option to work with a large
amount of data, such as goods receipts, materials lists for creating purchase orders,
and so on. This type of floorplan is used in a scenario where a list of items is given that
can be used to navigate to a details page.
Figure 2.13 List Report Floorplan
66
第 67 页 / 共 465 页
2.3 Different SAP Fiori App Types
If you use a SAP Fiori elements floorplan for a list report scenario, the basic layout will
be automatically generated from the UI annotations coming from the CDS view in
the underlying OData. We’ll look in detail at using UI annotation for generating dif-
ferent types of SAP Fiori element floorplans in later chapters.
A list report has the following structure, as shown in Figure 2.14:
(cid:2) Shell bar
A shell bar is the area on the top most part of the Launchpad. This Shell bar is
always visible irrespective of which page or tile you navigate within the launchpad.
It holds the Me Area, Home, Navigation, Enterprise Search, Copilot (if enabled in
the launchpad), and the Notifications toggle button.
(cid:2) Header title
This area displays the title, filter information (if the header is collapsed), and tool-
bar.
(cid:2) Header content
This area displays the filter bar and the generic search field.
(cid:2) Content area
This area is used to display the icon tab bar, table/chart (per tab), and multiple tabs
within the table/chart.
(cid:2) Footer toolbar
This area is used to display action buttons (alternatively, you can use UI annota-
tion to bring action buttons on top of the table as Business Object Processing
Framework [BOPF] actions instead of the footer, so buttons on the footer bar are
optional).
Shell Bar
Header Title
Header Content
Content Area
Footer Toolbar
Figure 2.14 Structure of a List Report
67
第 68 页 / 共 465 页
2 SAP Fiori and the Design-Led Development Process
While using a list report floorplan, consider the following scenarios to make sure this
floorplan is the right one for your application:
(cid:2) The user needs to go through a lot a records or items and then needs to search,
sort, filter, and group them to complete the task.
(cid:2) The user needs to have multiple views for the same contents based on the factors
such as items that are Open, In Process, or Completed. This is possible because SAP
Fiori elements give the option to have multiple tabs on the same screen to switch
between different tables showing the same contents but based on different filter-
ing, sorting, or grouping. In addition, SAP Fiori elements now support multiple
tabs with tables bound to different entity sets; that is, these tables in the different
tabs can show different data. For example, the first tab might show a list of produc-
tion orders, and you can set the second table to show a list of process orders.
(cid:2) Users need to work on multiple types of items.
(cid:2) Further details aren’t required to be shown on the same page, which means, if
needed, further details will be shown in the object page (details page).
(cid:2) If the user needs to use this app for reporting purposes, different visualization
options are used from the underlying data in the form of tables or charts.
In the following two scenarios, the list report floorplan might not be the right fit for
your application:
(cid:2) If the user must go through a list of work items and view information based on its
priority
(cid:2) If the user must see a single item in detail and edit it
Object Page
The object page floorplan (Figure 2.15) is used when a user needs to see all the details
of a specific item. In addition, the user might want to edit or create the object. This
floorplan has a flexible header, anchor-based navigation, and flexible layout.
Following are two scenarios in which an object page is the most suitable option:
(cid:2) When the details about an item need to be shown, and the user might need to edit
or create an item
(cid:2) When an overview of an object is required along with interacting with its different
parts
68
第 69 页 / 共 465 页
2.3 Different SAP Fiori App Types
Figure 2.15 Object Page Floorplan
For some scenarios, an object page floorplan might not be the right choice:
(cid:2) When several items need to be displayed under a single screen
(cid:2) When the user must filter through multiple items or needs to find items without
knowing the exact details
(cid:2) When guided steps are required for something like a new object creation
The object page presents users with display, create, and edit modes for the items they
are working on. The object page structure is shown in Figure 2.16 and described here:
(cid:2) Header area
The topmost area of the object page (excluding the shell bar) displays key informa-
tion about the object and global action buttons: Edit, Delete, and Copy.
69
第 70 页 / 共 465 页
2 SAP Fiori and the Design-Led Development Process
(cid:2) Navigation bar
The navigation bar gives three options to navigate through the object page.
– Anchor-based navigation: This type of navigation is based on a series of anchors
within the page. For example, if the user clicks on an anchor named Storage
Information (refer to Figure 2.16), the page will scroll down until it reaches the
item’s area.
– Tab-based navigation: Instead of scrolling down to the required area, this con-
trol behaves like an icon tab bar. So, the information on the object pages will be
stored in multiple tabs that can be switched.
– No navigation: No navigation is provided.
(cid:2) Content area
The content area is split into sections and subsections:
– Sections: Acts as a container area for the subsections and can’t contain any con-
tent other than subsections. Sections can be reached via anchor-based naviga-
tions
– Subsections: Holds the actual contents, including multiple controls, global
actions, and so on. Subsections are separated by gray lines.
Shell Bar
ObjectPage Header
Header
Area
ObjectPage Header Content
Navigation Bar
Object
Page
Content
Floating Tool Bar
Figure 2.16 Structure of an Object Page
70
第 71 页 / 共 465 页
2.3 Different SAP Fiori App Types
Overview Page
Overview pages (OVP; Figure 2.17) are data-driven app types used when the user need
to access all the information in a single page based on role. OVPs can consist of charts,
micro actions, data filters, and so on.
These different topics or pieces of information are displayed as different cards. An OVP
will contain a group of these cards so that users can get all the information from mul-
tiple data sources and visualizations. Each card will give an overview of data from the
underlying app, so that the user can get useful insights without navigating into the app.
Figure 2.17 OVP Floorplan
The OVP structure (Figure 2.18) has two main elements:
(cid:2) Dynamic page header
This header displays four variants of dynamic pages, but all four variants have two
71
第 72 页 / 共 465 页
2 SAP Fiori and the Design-Led Development Process
common characteristics: no footer bar and no global actions in the header title area.
These different versions of the page header will help cater to specific requirements
for the OVP’s main content. The four variants of dynamic pages are as follows:
– Variant 1: Contains variant management and a Smart Filter Bar.
– Variant 2: Contains only a header title, which will be hidden automatically
because the header content is empty.
– Variant 3: No content in header title and header content area, which means the
dynamic page header is completely hidden, and the cards will be displayed after
the shell bar.
– Variant 4: Contains a text in the header title and a smart filter bar in the header
content area.
(cid:2) Content Area
The content area is filled with cards that act as containers for app content. These
cards give an entry-level view of the information from the underlying app it rep-
resents. They can represent data via visualization methods such as charts, lists,
tables, and so on. However, the cards can’t have editable fields.
Shell Bar
Header Title
Dynamic Page
Header Area
Header Content
Content Area
Content Area Card
Card Content Area Content Area
Card (Cards are used to
display different
Content Area contents)
Card
Content Area
Card
Content Area
Content Area
Card
Card
Figure 2.18 Structure of an OVP
72
第 73 页 / 共 465 页
2.3 Different SAP Fiori App Types
An OVP might be more suited for some floorplans than others, such as in these use
cases:
(cid:2) An entry-level view of domain-specific content is required.
(cid:2) Users need information from multiple apps so that they can make task-related
decisions
(cid:2) Users need to see the information in different formats, such as charts, tables, and
so on.
Following is a list of scenarios where an OVP might not be the correct choice of floor-
plan:
(cid:2) If the user needs to see only header level details of the items
(cid:2) If the user needs to see information about one item in detail
(cid:2) If the information that needs to be displayed about the app doesn’t need more
than two cards (object page is a better fit here)
Analytical List Page
Analytical list page (Figure 2.19) apps are used to analyze data from different perspec-
tives, drill down through data, and take actions by viewing transactional data. All
these different interactions with data can be done within the same page.
Tasks that involve going through a lot of transaction data might require viewing
related information in the form of visualizations that will reduce the steps to gain
useful insights. In addition, visualization methods, such as charts, are visual pleasing
and helpful in identifying relevant information quickly rather than going through
each bit of data one by one.
Users with these types of tasks would also benefit from having both access to full
transparent business data and the ability to act on that data. They would also need
access to analytical views without the need to open a separate app or a view such as
key performance indicators (KPIs). KPIs are small visual areas with charts or tables
that can be drilled down into along with filters enriched with visualizations and mea-
sures. This also enables users to quickly identity some key values/points in the data
such as spikes, sudden deviations, or any abnormal values that stand out within the
data and might need immediate attention or action.
73
第 74 页 / 共 465 页
2 SAP Fiori and the Design-Led Development Process
(cid:1) (cid:1) App Name (cid:1) (cid:1) (cid:1) (cid:1)
Project Financial Analysis (cid:1) PC758 K PM28.4% PR 973 K Adapt Filters (2) (cid:1) (cid:1) (cid:1)
Project Margin by Period (cid:1) (1) Project Revenue by Project in K EUR (cid:1) (1) Cost Distribution by Project Phase (cid:1) (1) Project Margin by Lore
33.1% 31.7% 30.1% 29.8% S/4 HANA Imp… 15.6 Phase 4 40.0%
21.9% Warehouse Be… 20.7
7.8% Phase 2 21.5%
Silverstar Syst… 32.4
May Jun Jul Aug Sep Oct Other 38.5%
Figure 2.19 Analytical List Page
The analytical list page structure (Figure 2.20) has three main elements:
(cid:2) Page title
Contains page variants, KPIs, KPI cards, global actions, and so on.
(cid:2) Page header
Contains filter bars and visual filter bars.
(cid:2) Page content
Contains a chart only view, table only view, or a hybrid view that contains both
tables and charts.
Analytical list pages can be used under the following scenarios:
(cid:2) If the user needs to pinpoint key information behind a certain situation or to iden-
tify the root cause behind a sudden spike or abnormality in certain areas
(cid:2) If the user needs to analyze data from a different perspective, needs to drill down
into data, or needs to view transactional data all in one page
(cid:2) If the user needs interactive charts and tables
(cid:2) If the user needs KPIs to keep track of key areas
74
(cid:1)
Project Journal Entries (cid:1) (cid:1) (cid:1)
Chart Title Details (1) D D r o i w ll n (cid:1) (cid:1) (cid:1) (cid:1) (cid:1) (cid:1)
Travel Expense / Team Member / Cost Type
Actual
600K 000.00 000.00 000.00 Forecast
000.00
400K 000.00
000.00 000.00 000.00
000.00 000.00
200K 000.00
000.00
0
Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
| (cid:1) (cid:1) App Name (cid:1) (cid:1) (cid:1) (cid:1) |
|---|
| Project Financial Analysis (cid:1) PC758 K PM28.4% PR 973 K Adapt Filters (2) (cid:1) (cid:1) (cid:1) Project Margin by Period (cid:1) (1) Project Revenue by Project in K EUR (cid:1) (1) Cost Distribution by Project Phase (cid:1) (1) Project Margin by Lore 33.1% 31.7% 30.1% 29.8% S/4 HANA Imp… 15.6 Phase 4 40.0% 21.9% Warehouse Be… 20.7 7.8% Phase 2 21.5% Silverstar Syst… 32.4 May Jun Jul Aug Sep Oct Other 38.5% |
| (cid:1) Project Journal Entries (cid:1) (cid:1) (cid:1) Chart Title Details (1) D D r o i w ll n (cid:1) (cid:1) (cid:1) (cid:1) (cid:1) (cid:1) Travel Expense / Team Member / Cost Type Actual 600K 000.00 000.00 000.00 Forecast 000.00 400K 000.00 000.00 000.00 000.00 000.00 000.00 200K 000.00 000.00 0 Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec |
| 7.8% |
|---|
| Oct |
第 75 页 / 共 465 页
2.3 Different SAP Fiori App Types
(cid:2) If the user needs to find a relevant date by analyzing a large number of items via
drilldowns, filters, searching, grouping, sorting, and so on, which would be com-
paratively difficult with other app types
Shell Bar
Page Title
Contains KPIs, actions, and variants
Page Header
Contains both visual and nonvisual filters bars
Page Content
Can display multiple views such as hybrid views (a blend
of charts and tables) and views with either chart or table
Page Content
Figure 2.20 Analytical List Report Structure
You should avoid using analytical list pages for the following scenarios:
(cid:2) If a detailed view of the items isn’t required on the same page
(cid:2) If all the required information needs to be represented by just a table or chart
(cid:2) If the user needs to see details about one single item
(cid:2) If the user needs to see a set of relevant work items that needs to be sorted based
on which needs to be processed first
Worklist Page
The worklist page (Figure 2.21) is used when a collection of items needs to be dis-
played so that the user can process those items. Each record needs a detailed review
from the user to take actions on the records. A worklist page doesn’t have a filter bar
because it shows only action items relevant to the user. However, the data can still be
sorted via the help of tabs, which lets the user see the work items based on status.
75
第 76 页 / 共 465 页
2 SAP Fiori and the Design-Led Development Process
Figure 2.21 Worklist Page
The worklist structure (Figure 2.22) has three elements:
(cid:2) Header title
Contains the title of the page and a header toolbar (consists of global actions).
(cid:2) Tab bar
This is an optional area which can be used to display an Icon Tab bar. And we can
display a table or a chart in each tab.
(cid:2) Page content
If the Tab bar is not used. Then an independent table or multiple tables can be used
to display work items based on different priorities such as Pending, In Process,
Completed, etc.
(cid:2) Footer toolbar
Contains a footer toolbar (consists of message buttons and action buttons).
76