Fiori design language is evolving! The UI5 technology is backing up this step, establishing UI5 as the best framework of choice to implement Fiori 3 applications. Join our UI5 Fiori 3 session and get insights into how you can make the Fiori 3 design into reality using the UI5 framework and its latest offerings like Cards, Layouts, Controls and Theme. Understand how UI5 Web Components fit into Fiori 3 concept helping to achieve Fiori 3 design with any framework of choice.

1. Yavor Ivanov, SAP Labs Bulgaria
Gergana Kremenska, SAP Labs Bulgaria
Martin R. Hristov, SAP Labs Bulgaria
June 28, 2019
Fiori 3 with UI5
and UI5 Web Components

2. Why Fiori 3?

3. Consistency is one of the most powerful
usability principles. When things always
behave the same, users don’t have to
worry about what would happen.
Jakob Nielsen

4. Experience Matters

5. 5

6. 6
Fiori 3

7. 7
Integration

8. 8
Intelligence
Key Facts:
Root Cause:
Impact:
Recommendations:

9. 9
Harmonized Design
 Common visual design elements
across products
Structure
 Consistent, but flexible structures
and navigation patterns
Content
 Modular Floorplans, Scalable
stable and dynamic building
blocks, e.g. cards
Fiori 3 Design

10. Fiori 3 with UI5

11. 11
We promised, we delivered

12. 12
Fiori 3 Theme
Cards & Layouts
Shell Bar
UI5 Web Components
… and more yet to come
Fiori 3 with UI5

13. 13
Fiori 3 Theme
 Name: SAP Quartz Light (technical name:
sap_fiori_3)
 Aligned with the new UX Consistency metrics
 Backwards compatible- no migration effort for
standard UI5 applications
Controls
 Shell Bar
Theme & Controls

14. UI5 Cards

15. 15
Small representations of an
application which can offer content to
users in a specific context.
What are UI5 Cards?

16. 16
Card Anatomy
Card Container
Card Header
Card Content

17. 17
Integration Cards
 List Card
 Object Card
 Table Card
 Component Card
 Analytical Card (available with SAPUI5 only)
 Timeline Card (available with SAPUI5 only)
UI5 Control Card
 sap.f.Card
Cards

18. 18
Use Case:
Ø Free-style applications
Usage:
Ø Configured by standard UI5
Control API
Use Case:
 Integrate different applications in
one home page
Usage:
 Configured by a manifest.json
(structure, data handling, behavior)
Integration Card vs. sap.f.Card

19. 19
Find me @ Demokit
Card explorer

20. 20
 CssGrid
 GridList
 GridContainer (experimental)
Layouts

21. UI5 Web Components

22. 22
HTML
<h1>Hello UI5 Con!</h1>
<button>I am a button!</button>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

23. 23
 Set of web platform APIs
 Custom HTML Elements
 Easy to consume
 Tiny size
What are Web Components?
<ui5-button>Hello UI5 Con!</ui5-button>

24. 24
<h1>Hello UI5 Con!</h1>
<button>I am a button!</button>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

25. 25
<ui5-title>Hello UI5 Con!</ui5-title>
<ui5-button>I am a button!</ui5-button>
<ui5-list>
<ui5-li>List item 1</ui5-li>
<ui5-li>List item 2</ui5-li>
<ui5-li>List item 3</ui5-li>
</ui5-list>

26. 26

27. 27
Product standards
 Theming
 Accessibility
 i18n

28. 28
Explore the playground!

29. Fiori 3 & UI5 Web Components

30. 30
 Cards
 Shell Bar
Fiori 3 & UI5 Web Components

31. 31
Fiori 3 React App

32. 32
Fiori 3 React App

33. Meet UI5 Experts

34. 34
Hands-On @ Room D
 “MEAN Stack”.replace(“A”, “OPENUI5”) @ 11:50
 Build a Fiori 3 Application Using React and UI5 Web Components @ 16:00
Follow up
Experts Corner
 UI5 Web Components / Expert Table 1 @ 13:45
 Controls (Including new Fiori 3 Layouts and Controls) / Expert Table 2 @ 15:45
Sessions
 UI5 Web Components / Room A @ 12:25
 Integrating Applications With Cards / Room B @ 14:00

35. Thank you.
Contact information:
Yavor Ivanov
yavor.ivanov@sap.com
Gergana Kremenska
gergana.kremenska@sap.com
Martin R. Hristov, SAP
martin.r.hristov@sap.com