UI5ers live #40: UI5 Web Component Table, Controller Extensions

In this episode we introduce the new table in the UI5 the Web Component 2.0 release, which brings significant accessibility improvements, harmonization with OpenUI5 tables, and a clean slate for enhancing existing APIs. We explore the table's structure, which follows a structure similar to the HTML table, with added features like overflow modes, interactive rows, keyboard handling, and sticky rows. Through a live demonstration, we guide you through the seamless migration process from version 1 to version 2, covering dependency updates, property adjustments, and the incorporation of advanced features like growing and selection.

Next, we shift focus to controller extensions, where we spotlight the improved TypeScript support, enabling developers to write and utilize Controller Extensions seamlessly within TypeScript projects. We explore two primary use cases: extending existing controllers and reusing functionality provided by other controllers. We demonstrate the syntax and usage patterns for both scenarios, clarifying how to overwrite controller methods, leverage lifecycle hooks, and interact with extension functionalities. Real-world examples, particularly from the SAP Fiori elements library, showcase the practical benefits of Controller Extensions, such as modularizing logic and enhancing code reusability.

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Video Chapters:
00:00 Welcome
01:30 Introduction and Motivation for New UI5 Web Components Table
03:25 Exploring the API Structure and Key Features of the New UI5 Web Component Table
08:05 Demo: Migrating from V1 to V2 Web Component Table
18:56 Future Developments and Expectations for UI5 Web Component Table
21:09 Control Extensions in UI5 with TypeScript
23:40 Demo: Extending Standard Application using Controller Extension
28:04 Demo: Leveraging Controller Extension Functionality in Your Own Controller
35:23 Wrap-Up: Different Use Cases for Extension Variations
36:49 Controller Extensions in Flexible Programming Model
39:24 Closing Words
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Resources:
UI5 Web Components Playground - Table Component: https://sap.github.io/ui5-webcomponen...
Ui5 Web Component Table Migration Example: https://github.com/DonkeyCo/citybikes...
UI5 Web Components example using with OData V4: https://github.com/dirkelko/workoutOD...
Controller Extensions (Documentation): https://sdk.openui5.org/#topic/21515f...
Controller Extensions in Flexible Programming Model (Documentation): https://ui5.sap.com/test-resources/sa...
SAP Fiori Elements Controller Extensions (Devtoberfest 2023): https://github.com/MariusFreitag/devt...
SAP Fiori elements and SAP Fiori tools: It's time to use TypeScript (YouTube):    • 🟠 SAP Fiori elements and SAP Fiori to...  
SAP Fiori Elements Controller Extension for Routing (API documentation): https://ui5.sap.com/#/api/sap.fe.core...

_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

Music: klinik FX