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
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
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
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
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
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>