Uploaded August 2022 | Updated September 2026, 3 weeks ago
Many of you have been using smart controls when creating UI5 apps - either in an extension to an SAP Fiori elements apps or within your SAPUI5 freestyle apps. For OData V4 based apps, we now offer an evolution of the smart controls: the SAP Fiori elements building blocks. Learn about how you can leverage the SAP Fiori elements framework in your SAPUI5 freestyle apps based on a real-life productive implementation by our partner UNIORG.
Event: #UI5conHYBDIRD2022
Speaker: Holger Schäfer, UNIORG | Marius Freitag, SAP
---
00:00 Introduction
00:47 Value Proposition SAP Fiori Elements
01:33 SAP Fiori Elements Overview
02:28 Introduction into Flexible Programming Model
04:15 Recommended Approach When a Fiori Element Floorplan Does Not Fit Your Use Case
05:52 Demo: Flexible Programming Model
12:34 Key Takeaways on SAP Fiori Elements
14:04 Customer Project - Webshop 2.0 of the City of Zurich
17:31 Demo: Webshop 2.0 of the City of Zurich
20:19 Demo: Loading Placeholder in SAPUI5
24:42 Demo: Flexible Programming Model - Using Building Blocks and Side Effects
32:50 Lessons Learned
36:36 Q/A
36:39 With Which UI5 Version Is the Flexible Programming Model Available?
37:34 Are the Marcos/Building Blocks Available in OpenUI5 As Well?
37:49 What's the Effort to Build Something Like the Webshop 2.0?
39:16 Why Did You Choose the Blob Storage inside Azure Instead of the Document Service/Object Store in BTP?
40:47 Was There Any Functionality Missing in OData V4 Model You Might Know from OData V2 Model?
---
Resources
Slides: openui5.org/ui5con/germany2022/slides/2022-UI5con-2_3-Marius-Freitag-Unleash_the_power_of_SAP_Fiori_elements_for_SAPUI5_freestyle_apps.pdf
UI5con HYBRID 2022 Session "Building SAP Fiori apps with flexible open-source modules": openui5.org/ui5con/germany2022/slides/2022-UI5con-1_7-Ashley-Tung-Final.pdf
Flexible Programming Model Explorer: ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/overview/introduction
Webshop 2.0 of the City of Zurich: btp.udina.de/service/consulting/stzh-webshop.html
Placeholder Loading: btp.udina.de/development/fe/freestyle.html#placeholder-loading
UI5ers live: Episode 10 (Aug '21): Placeholder Concept, UI5 Web Components Controls: youtube.com/watch?v=lUZ0A-OUJaY&t=88s
Many of you have been using smart controls when creating UI5 apps - either in an extension to an SAP Fiori elements apps or within your SAPUI5 freestyle apps. For OData V4 based apps, we now offer an evolution of the smart controls: the SAP Fiori elements building blocks. Learn about how you can leverage the SAP Fiori elements framework in your SAPUI5 freestyle apps based on a real-life productive implementation by our partner UNIORG.
Event: #UI5conHYBDIRD2022
Speaker: Holger Schäfer, UNIORG | Marius Freitag, SAP
---
00:00 Introduction
00:47 Value Proposition SAP Fiori Elements
01:33 SAP Fiori Elements Overview
02:28 Introduction into Flexible Programming Model
04:15 Recommended Approach When a Fiori Element Floorplan Does Not Fit Your Use Case
05:52 Demo: Flexible Programming Model
12:34 Key Takeaways on SAP Fiori Elements
14:04 Customer Project - Webshop 2.0 of the City of Zurich
17:31 Demo: Webshop 2.0 of the City of Zurich
20:19 Demo: Loading Placeholder in SAPUI5
24:42 Demo: Flexible Programming Model - Using Building Blocks and Side Effects
32:50 Lessons Learned
36:36 Q/A
36:39 With Which UI5 Version Is the Flexible Programming Model Available?
37:34 Are the Marcos/Building Blocks Available in OpenUI5 As Well?
37:49 What's the Effort to Build Something Like the Webshop 2.0?
39:16 Why Did You Choose the Blob Storage inside Azure Instead of the Document Service/Object Store in BTP?
40:47 Was There Any Functionality Missing in OData V4 Model You Might Know from OData V2 Model?
---
Resources
Slides: openui5.org/ui5con/germany2022/slides/2022-UI5con-2_3-Marius-Freitag-Unleash_the_power_of_SAP_Fiori_elements_for_SAPUI5_freestyle_apps.pdf
UI5con HYBRID 2022 Session "Building SAP Fiori apps with flexible open-source modules": openui5.org/ui5con/germany2022/slides/2022-UI5con-1_7-Ashley-Tung-Final.pdf
Flexible Programming Model Explorer: ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/overview/introduction
Webshop 2.0 of the City of Zurich: btp.udina.de/service/consulting/stzh-webshop.html
Placeholder Loading: btp.udina.de/development/fe/freestyle.html#placeholder-loading
UI5ers live: Episode 10 (Aug '21): Placeholder Concept, UI5 Web Components Controls: youtube.com/watch?v=lUZ0A-OUJaY&t=88s
