Uploaded September 2021 | Updated September 2026, 2 weeks ago
In this episode of #UI5erslive we treat the topics Perceived #Performance and #WebComponents. Content placeholders reduce the perceived load time by informing the user of what interface to expect as early as possible in the loading process. We looked at the best way to enable content placeholders in our framework so they can be easily integrated into your UI5 app. Jiawei Cao presents this approach and demonstrate how you can display content placeholders in your UI5 app.
Next up, Peter Muessig gives an update on transitioning the UI controls to using UI5 Web Components and demonstrate, in this line, three brand new libraries.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Video Chapters:
00:00 Welcome
01:28 Basics of the Placeholder Concept for UI5 Screens
04:00 Enable Placeholder on UI5 Screen
05:57 Show/Hide Placeholder on UI5 Screen
07:44 Demo: Placeholder in SAP Fiori Element Screen
08:55 Demo: Theme-ability of Placeholders
09:19 Code Demo: Enable Custom Placeholder for UI5 Freestyle Screens
11:40 Code Demo: Customize Placeholder Termination for UI5 Freestyle Screen
15:29 Q/A: Are there Plans to Provide Predefined Placeholders to be used in Freestyle UI5 Screens (like in SAP Fiori Elements)?
18:20 Q/A: Are the Placeholders a Standard Feature?
19:03 Q/A: Can You Use Custom Themes with the Placeholders?
21:00 Usage of UI5 Web Components in OpenUI5
23:12 Introducing the Base Class for Controls based on UI5 Web Components
24:17 Structure of the New Controls Taken from the Button Control
26:07 Code Demo: Use of the New Controls
37:10 Q/A: Are There Plans to Integrate The UI5 Web Components in Existing Libraries like (sap.m) to Have UI5 Web Components as a "Single Source of Truth"? Would That Be Technically Possible?
38:23 Q/A: Why Should I Use Web Components in A "Classic" UI5 App?
40:00 Q/A: Will There Be Any Web Components Not Available as "Classic" UI5 Controls?
41:41 Q/A: Will Existing Control Aggregations Be Enhanced That They Can Include Web Component Controls?
43:32 Q/A: Extending The Web Components Is/Will Remain The Same As With Regular Controls?
44:48 Final words
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Resources:
Available Standard SAPUI5 Placeholder HTML Fragments (still experimental):
- List Report Placeholder (/resources/sap/fe/placeholder/view/PlaceholderLR.fragment.html)
- Object Page Placeholder (/resources/sap/fe/placeholder/view/PlaceholderOP.fragment.html)
- Overview Page Placeholder (/resources/sap/fe/placeholder/view/PlaceholderOVP.fragment.html)
- Analytical List Page Placeholder (/resources/sap/fe/placeholder/view/PlaceholderALP.fragment.html)
OpenUI5 Libraries related to UI5 Web Components:
- Base Library:
openui5.hana.ondemand.com/api/sap.ui.webc.common | npmjs.com/package/@openui5/sap.ui.webc.common
- Bread & Butter Component Library:
openui5.hana.ondemand.com/api/sap.ui.webc.main | npmjs.com/package/@openui5/sap.ui.webc.main
- SAP Fiori-related Component Library:
openui5.hana.ondemand.com/api/sap.ui.webc.fiori | npmjs.com/package/@openui5/sap.ui.webc.fiori
Report Issues on OpenUI5:
github.com/SAP/openui5/blob/master/CONTRIBUTING.md#report-an-issue
UI5 Web Components Playground:
sap.github.io/ui5-webcomponents/playground
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Music: klinik FX
In this episode of #UI5erslive we treat the topics Perceived #Performance and #WebComponents. Content placeholders reduce the perceived load time by informing the user of what interface to expect as early as possible in the loading process. We looked at the best way to enable content placeholders in our framework so they can be easily integrated into your UI5 app. Jiawei Cao presents this approach and demonstrate how you can display content placeholders in your UI5 app.
Next up, Peter Muessig gives an update on transitioning the UI controls to using UI5 Web Components and demonstrate, in this line, three brand new libraries.
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Video Chapters:
00:00 Welcome
01:28 Basics of the Placeholder Concept for UI5 Screens
04:00 Enable Placeholder on UI5 Screen
05:57 Show/Hide Placeholder on UI5 Screen
07:44 Demo: Placeholder in SAP Fiori Element Screen
08:55 Demo: Theme-ability of Placeholders
09:19 Code Demo: Enable Custom Placeholder for UI5 Freestyle Screens
11:40 Code Demo: Customize Placeholder Termination for UI5 Freestyle Screen
15:29 Q/A: Are there Plans to Provide Predefined Placeholders to be used in Freestyle UI5 Screens (like in SAP Fiori Elements)?
18:20 Q/A: Are the Placeholders a Standard Feature?
19:03 Q/A: Can You Use Custom Themes with the Placeholders?
21:00 Usage of UI5 Web Components in OpenUI5
23:12 Introducing the Base Class for Controls based on UI5 Web Components
24:17 Structure of the New Controls Taken from the Button Control
26:07 Code Demo: Use of the New Controls
37:10 Q/A: Are There Plans to Integrate The UI5 Web Components in Existing Libraries like (sap.m) to Have UI5 Web Components as a "Single Source of Truth"? Would That Be Technically Possible?
38:23 Q/A: Why Should I Use Web Components in A "Classic" UI5 App?
40:00 Q/A: Will There Be Any Web Components Not Available as "Classic" UI5 Controls?
41:41 Q/A: Will Existing Control Aggregations Be Enhanced That They Can Include Web Component Controls?
43:32 Q/A: Extending The Web Components Is/Will Remain The Same As With Regular Controls?
44:48 Final words
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Resources:
Available Standard SAPUI5 Placeholder HTML Fragments (still experimental):
- List Report Placeholder (/resources/sap/fe/placeholder/view/PlaceholderLR.fragment.html)
- Object Page Placeholder (/resources/sap/fe/placeholder/view/PlaceholderOP.fragment.html)
- Overview Page Placeholder (/resources/sap/fe/placeholder/view/PlaceholderOVP.fragment.html)
- Analytical List Page Placeholder (/resources/sap/fe/placeholder/view/PlaceholderALP.fragment.html)
OpenUI5 Libraries related to UI5 Web Components:
- Base Library:
openui5.hana.ondemand.com/api/sap.ui.webc.common | npmjs.com/package/@openui5/sap.ui.webc.common
- Bread & Butter Component Library:
openui5.hana.ondemand.com/api/sap.ui.webc.main | npmjs.com/package/@openui5/sap.ui.webc.main
- SAP Fiori-related Component Library:
openui5.hana.ondemand.com/api/sap.ui.webc.fiori | npmjs.com/package/@openui5/sap.ui.webc.fiori
Report Issues on OpenUI5:
github.com/SAP/openui5/blob/master/CONTRIBUTING.md#report-an-issue
UI5 Web Components Playground:
sap.github.io/ui5-webcomponents/playground
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Music: klinik FX
