SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdf

Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps

1. 1
Building better
applications for
business users with
SAP Fiori
Peter Spielvogel
SAP Cloud ERP UX Engineering
Sapphire 2024

2. 2
My goal for today is to help you accelerate your SAP Fiori journey
Topics:
•What is SAP Fiori and why it matters to you
•How to get started with SAP Fiori today
•How SAP Fiori paves the way for using AI in SAP apps

3. Question 1
Where are you on your SAP Fiori
adoption journey?

4. Question 2
What is SAP Fiori?

5. 5CUSTOMER
Design System
SAP Fiori covers several dimensions
Values, Principles & Practices
Tools &
Technologies
Portfolio of Apps
S A P F iori Desig n Guidelines
SAP Fiori Design Guidelines
Web Native Mobile Conversational UX
SAP Fiori launchpad / My Home
SAP Build CodeSAP Fiori tools
SAP Fiori
elements
SAP Mobile Start
SAP Mobile Development Kit
Joule
SAPUI5
Android
SDK
iOS
SDK
SAP Screen
Personas
(for Classic UIs)
SAP Web
Components

6. 6
•Increases adoption
•Improves business user productivity
•Decreases training time
•Improves data quality
•Enhances user satisfaction
A good UX is not only about good-looking screens; it’s all about user productivity

7. SAP Fiori is the UX for
SAP S/4HANA Cloud

8. 8
We have come a long way since the SAP GUI days

9. 9
My Home is the entry point to SAP S/4HANA Cloud
•Take action on To Do items
and Situations
•Launch SAP Fiori apps
•View Insight Cards
•Open relevant apps
•Mark your favorite apps

10. 10
Cards surface the information you need to run your business
•Take action on ToDoitems
and Situations
•Launch SAP Fiori apps
•View Insight Cards
•Open relevant apps
•Mark your favorite apps

11. 11
Most SAP S/4HANA Cloud apps follow a common flow

12. 12
SAP Fiori apps include collaboration functionality

13. 13
I need to differentiate
my business
I need additional
functionality
I need a
similar app
I need to adapt the
UI quickly
You can extend SAP S/4HANA Cloud to meet your unique business needs
Use case
Examples
Rearrange, remove, add
new fields on UI
Add custom fields and
logic to UI
Develop new custom
app from scratch
Extend original business
object
Remove, add fields and
sections
Adapt for use by
different groups of
users/scenarios

14. 14
Is a standard
SAP Fioriapp
available?
Does the app
need changes?
SAP Fiori
Use as is
Is a classic
transaction
available?
Tight
SAP S/4HANA
integration?
Does the app need
changes?
Is key-user
adaptation
sufficient?
SAP Fiori
Adapt UI
SAP Fiori
Adaptation Project
Classic App
SAPGUI for HTML
Classic App
Adapt UI
SAP Fiori App
SAP S/4HANA Cloud,
ABAP environment
SAP Fiori App
with ABAPor CAP
BTP side-by-side
app
Freestyle
SAPUI5
with ABAPorCAP
SAP Fiori layout?
Choose the appropriate path to adopt SAP Fiori in your organization
Out of the box app
No
Key user extensibilityDeveloper extensibility on-stack Developer extensibility side-by-side
Yes
No No
Yes
Yes
No
Yes
Yes
Yes
No
Yes
No
Yes
BusinessRequirement
No

15. 15
Is a standard
SAP Fioriapp
available?
Does the app
need changes?
SAP Fiori
Use as is
Is a classic
transaction
available?
Tight
SAP S/4HANA
integration?
Does the app need
changes?
Is key-user
adaptation
sufficient?
SAP Fiori
Adapt UI
SAP Fiori
Adaptation Project
Classic App
SAPGUI for HTML
Classic App
Adapt UI
SAP Fiori App
SAP S/4HANA Cloud,
ABAP environment
SAP Fiori App
with ABAPor CAP
BTP side-by-side
app
Freestyle
SAPUI5
with ABAPorCAP
SAP Fiori layout?
Using an app from the reference library is the fastest way to SAP Fiori
Out of the box app
No
Key user extensibilityDeveloper extensibility on-stack Developer extensibility side-by-side
Yes
No No
Yes
Yes
No
Yes
Yes
Yes
No
Yes
No
Yes
BusinessRequirement
No

16. 16
There are thousands of SAP Fiori apps you can use

17. 17
Search by line of business, industry, role
in SAP S/4HANA Cloud

18. 18
Apps have detailed descriptions about roles and capabilities

19. 19
And how you can extend them

20. 20
Use drag & drop or context menu to rearrange, remove, rename, or add fields.
Key users can fine-tune the UI of SAP Fiori apps without coding
Key Users

21. Build apps using the same
tools and technologies as SAP

22. 22
Is a standard
SAP Fioriapp
available?
Does the app
need changes?
SAP Fiori
Use as is
Is a classic
transaction
available?
Tight
SAP S/4HANA
integration?
Does the app need
changes?
Is key-user
adaptation
sufficient?
SAP Fiori
Adapt UI
SAP Fiori
Adaptation Project
Classic App
SAPGUI for HTML
Classic App
Adapt UI
SAP Fiori App
SAP S/4HANA Cloud,
ABAP environment
SAP Fiori App
with ABAPor CAP
BTP side-by-side
app
Freestyle
SAPUI5
with ABAPorCAP
SAP Fiori layout?
We use SAP Fiori elements to build most apps for SAP S/4HANA
Out of the box app
No
Key user extensibilityDeveloper extensibility on-stack Developer extensibility side-by-side
Yes
No No
Yes
Yes
No
Yes
Yes
Yes
No
Yes
No
Yes
BusinessRequirement
No

23. 23
Create last-mile capabilities to:
•Respond quickly to new market opportunities
•Create differentiated capabilities through innovation
•Fill a gap in SAP’s offerings for your specific industry
•Build new capabilities to drive operational excellence
•Use AI to accelerate decisions
Building SAP Fiori apps quickly makes your business more agile

24. 24
Enables Enterprise
Readiness
Give your business users the
enterprise-grade functionality they
expect without having to develop it
yourself.
Drives UX
Consistency
Spend more time on the business logic
to implement business needs and less
time coding the UI since the framework
provides the UI.
Boosts Developer
Productivity
Build SAP Fiori apps faster and more
easily than manually coding by using
the same framework that SAP uses.
SAP Fiori elements makes it easy to build SAPUI5 apps

25. 25
Designer
•Easy way to align with SAP Fiori
design system
•Includes flexibility to include
customizations to address unique
business requirements
•Common language to communicate
with developers and LoBmanagers
•Simplifies compliance with corporate
requirements
Developer
•Development framework based
on SAPUI5
•Uses industry-standard OData
protocol to access data in SAP
system
•Relies on annotations to define
data relationships
•Reduces UI coding significantly
Business manager
•Accelerator to build SAP Fiori apps
using modular building blocks
•Extensible to address unique
customer business requirements
•Creates apps that match
appearance and functionality of
apps that SAP ships
•Fulfills enterprise requirements such
as accessibility and security
SAP Fiori elements benefits multiple roles in your organization

26. 26Overview page |Review business relevant data
Standard floorplans boost developer productivity
List report page | Display business objects Object page| Manage business objects
Analytical list page |Filter visually
Also:
Work list page | View tasks
Forms page | Enter data
Custom page | Do whatever you want
Most enterprise use cases
involve providing an overview
of business data, listing
business objects, and
managing these business
objects.

27. 27
Building blocks give you the flexibilityto customize
floorplans or create a layout that fits your business
requirements
Benefit from SAP Fiori compatibility and standard
application behavior like draft handling
Using building blocks to extend your app results in
lower maintenance costs
Building blocks provide flexibility to build your
own custom layouts
Examples of building blocks

28. 28
UX Consistency includes
•Look and feel (colors, icons, fonts, dimensions, motion
design)
•Controls and floorplans (UI components, layout)
•Behaviors and interactions (actions such as save, cancel,
filtering, sorting, confirmation dialogs, etc.)
SAP Fiori elements drives UX consistency

29. 29
SAP Fiori elements enables enterprise-ready apps out of the box
Personalization
Export to Excel
Object details
Variant management
Data lists
FilteringActionsSorting
Search
Enterprise readiness includes
✓Accessibility
✓Internationalization
✓Mobile compatibility
✓Responsiveness
✓Performance optimizations
✓Integration
✓Security checks
✓Lifecycle stability
✓Test automation support … and more

30. 30
We offer several ways to build SAPUI5 apps; these are AND not OR
SAP Fiori elements
Floorplans: best way when desired
app is close to a standard pattern
•Reduce time, coding to develop and
maintain apps
•Match look and feel of apps that SAP
ships
Flexible Programming Model
Building blocks: best way to add
standard functionality to a custom page
•Speed development by using pre-built blocks
•Combine building blocks for more complex
designs
Freestyle SAPUI5
SAPUI5 controls: best way to have full
control of every item on the screen
•Allow complete customization of your app
•Shift more maintenance of the app to the
dev team
Efficiency Flexibility

31. 31
Build SAP Fiori elements apps faster with SAP Fiori tools and SAP Build Code
Generates the projectenvironment for
development
Provides step-by-step development
instructions and generates code snippets
Allows editing of the app structure:
pages, content, properties, and navigation
Delivers code completion using a
language server protocol for annotations
Provides preview of web app in the
browser either with mock data or live data
?
Offers troubleshooting tips
(open source)
Creates apps from business requirement
documents using Gen AI

32. 32
Run your custom SAP Fiori elements or freestyle SAPUI5 apps on stack or on BTP
SAP S/4HANA Cloud
On-stack
extensibility
Remote Public SAP APIs
No-code
extensibility apps
SAP Business Technology
Platform
Side-by-side
extensibility
Both on-stack and side-by-side extensions can align with clean-coreprinciples.
A clean core is a system that is as close to standard as possible,
while running cloud-compliant extensions and integrations.

33. SAP Fiori enables AI
in your apps

34. 34
SAP Fiori tools contains new AI capabilities through Joule
Generate SAP Fiori applications automatically from business requirement documents
Available now
Provide your business
requirements directly to
create your SAP Fiori
app (e.g. JIRA
documents/Confluence
user stories etc.)
Review/update the
generated files in the
Joule staging area
Accept the files to
move them into your
project and create
your application

35. 35
Image-based SAP Fiori app generation
Generate SAP Fiori applications from a sketch or mockup using ChatGPT 4V
•Generate an SAP Fiori application directly from screenshot/sketch
•Use ChatGPT 4 with Vision to interpret patterns/symbols/text in an image
•Convert input into full SAP Fiori application with CAP project
High fidelity Figma model
Lower fidelity screenshot
Sketch on
paper
Use Joule to upload your
screenshots and generate
the app

36. 36
SAP S/4HANA Cloud Public Edition, AI-assisted easy filter
Enable users to define multiple filter settingsin a single input field using natural language in SAP Fiori elements apps
Receive list filtered
by the selection
fields
Enter desired
information into the
input field using
natural language
Switch between
natural language
filtering and classic
filtering as needed

37. 37
SAP S/4HANA Cloud Public Edition, AI-assisted smart summarization
Provide users with automatically generated summaries of business objects
Summarizeobjects
directly in the
application
Review the AI-
generated output
before sharing
Copy summary to
share in the
collaboration tool of
your choice

38. 38
Generate insight cards for My Home and SAP Start with Joule
Create new cards using Joule and add them to your My Home or SAP Start page without navigating to the application
Open Joule directly
in My Home or
SAP Start
Ask Joule to create
a card using natural
language
Add new insight
cards to your My
Home or SAP Start
page

39. 39
AI-assisted easy filterAI-assisted smart summarization
Sign up to try the new AI features in SAP S/4HANA Cloud Public Edition
Beta program open to customers and partners who are:
•Running SAP S/4HANA Cloud Public Edition productively
•Willing to provide feedback to SAP
Register here: https://influence.sap.com/sap/ino/#campaign/3698

40. 40CUSTOMER
SAP Fiori enables AI
in your apps
Use SAP tools and
technologies
Start your SAP Fiori
journey today
Three things to take away from this session

41. 41
Topics pages on the SAP Community
•SAPUI5
•SAP Fiori elements
•SAP Fiori tools
•SAP Build Code
Other resources
•SAP Fiori app reference library
•Flexible Programming Model Explorer
•SAPUI5 documentation for SAP Fiori elements
•SAP S/4HANA extensibility guide
•SAP Fiori development newsletter
We have many online resources to learn
about SAP Fiori app development

42. 42
SAP S/4HANA Cloud Public Edition customers
3
rd
Thursday of each month
8am Pacific, 11am Eastern, 17:00 CET
More info:
https://community.sap.com/t5/enterprise-
resource-planning-blogs-by-sap/connect-with-
peers-to-optimize-your-sap-s-4hana-cloud-
public-edition-user/ba-p/13573866
SAP Fiori developers
2
nd
Wednesday of each month
8am Pacific, 11am Eastern, 17:00 CET
More info:
https://community.sap.com/t5/technology-
blogs-by-sap/peer-to-peer-learning-at-the-sap-
fiori-elements-and-sap-fiori-tools/ba-
p/13513361
Learn from your peers in our monthly community calls
Sign up: Sign up:
You must use your
business email.
No gmail, yahoo,
outlook.com, etc.

43. Learn more about SAP UX at ASUG
User Experience is part of SAP S/4HANA Community Alliance
•Influence Councils –share your concerns with SAP and shape
the future direction of our UX solutions
https://www.asug.com/groups/user-experience-ux-influence-
council
•Task Force –gather feedback from peers and share best
practices
https://www.asug.com/groups/user-experience-ux-think-tank

44. 44
Thank you.
Peter Spielvogel
SAP Cloud ERP UX Engineering