Uploaded July 2021 | Updated September 2026, 3 weeks ago
#SAPUI5 #SmartControls are an important pillar in the success story of SAP Fiori applications in S/4HANA built on #SAPFioriElements and UI5. Smart controls in combination SAP Fiori elements gives you low cost of development and providing usable and performant UI for the end users.
SAPUI5 smart controls are primarily driven by OData annotations, which heavily could influence the user experience with the controls. This sometimes could confuse the application developers and makes debugging a bit difficult.
Adrian and Jay show you tips and tricks how you can deal with challenging situations. We'll provide ways to identify where is the problem e.g. metadata and annotations, smart control itself or the used base control.
We guide you how to create robust applications based on smart controls.
This session is about SAPUI5 smart controls and will not cover SAP Fiori elements.
Event: #UI5conONAIR2021
Speakers: Adrian Bobev, SAP | Jay Barbhaiya, SAP
---
Agenda:
00:00 Welcome
00:47 General Introduction
01:54 Demo: Sample App with Smart Table and Smart Filter Bar
02:16 Demo: Common Problems with Smart Filter Bar Configuration and Debugging Techniques for Smart Filter Bar
10:42 Introduction to Smart Tables
12:15 Demo: Adding a Micro Chart to the Smart Table
14:07 Demo: Heuristic Column Width Calculation
15:52 Demo: Column Resizing Capabilities
17:12 Demo: Show/Hide Details in the Pop-In Area
19:39 Questions & Answers
---
Resources:
Slides: openui5.org/ui5con/onair2021/slides/2021-UI5con-2_5-SAPUI5_smart_controls.pdf.
Sample GitHub Project with Smart Controls: github.com/adrian-bobev/ui5con2021-smart-controls
Smart Filter Bar - Overview& FAQs: ui5.sap.com/#/topic/7bcdffc056a94731b4341db73251e32b
Smart Table - Overview & FAQ: ui5.sap.com/#/topic/bed8274140d04fc0b9bcb2db42d8bac2
enableAutoColumnWidth API Reference: ui5.sap.com/#/api/sap.ui.comp.smarttable.SmartTable%23methods/setEnableAutoColumnWidth
showDetailsButton API Reference: ui5.sap.com/#/api/sap.ui.comp.smarttable.SmartTable%23methods/setShowDetailsButton
detailsButtonSetting API Reference: ui5.sap.com/#/api/sap.ui.comp.smarttable.SmartTable%23methods/setDetailsButtonSetting
Blog Post Column resizing & Auto pop-in feature in Responsive table: blogs.sap.com/2021/06/28/ui5ers-buzz-58-column-resizing-auto-pop-in-feature-in-responsive-table
#SAPUI5 #SmartControls are an important pillar in the success story of SAP Fiori applications in S/4HANA built on #SAPFioriElements and UI5. Smart controls in combination SAP Fiori elements gives you low cost of development and providing usable and performant UI for the end users.
SAPUI5 smart controls are primarily driven by OData annotations, which heavily could influence the user experience with the controls. This sometimes could confuse the application developers and makes debugging a bit difficult.
Adrian and Jay show you tips and tricks how you can deal with challenging situations. We'll provide ways to identify where is the problem e.g. metadata and annotations, smart control itself or the used base control.
We guide you how to create robust applications based on smart controls.
This session is about SAPUI5 smart controls and will not cover SAP Fiori elements.
Event: #UI5conONAIR2021
Speakers: Adrian Bobev, SAP | Jay Barbhaiya, SAP
---
Agenda:
00:00 Welcome
00:47 General Introduction
01:54 Demo: Sample App with Smart Table and Smart Filter Bar
02:16 Demo: Common Problems with Smart Filter Bar Configuration and Debugging Techniques for Smart Filter Bar
10:42 Introduction to Smart Tables
12:15 Demo: Adding a Micro Chart to the Smart Table
14:07 Demo: Heuristic Column Width Calculation
15:52 Demo: Column Resizing Capabilities
17:12 Demo: Show/Hide Details in the Pop-In Area
19:39 Questions & Answers
---
Resources:
Slides: openui5.org/ui5con/onair2021/slides/2021-UI5con-2_5-SAPUI5_smart_controls.pdf.
Sample GitHub Project with Smart Controls: github.com/adrian-bobev/ui5con2021-smart-controls
Smart Filter Bar - Overview& FAQs: ui5.sap.com/#/topic/7bcdffc056a94731b4341db73251e32b
Smart Table - Overview & FAQ: ui5.sap.com/#/topic/bed8274140d04fc0b9bcb2db42d8bac2
enableAutoColumnWidth API Reference: ui5.sap.com/#/api/sap.ui.comp.smarttable.SmartTable%23methods/setEnableAutoColumnWidth
showDetailsButton API Reference: ui5.sap.com/#/api/sap.ui.comp.smarttable.SmartTable%23methods/setShowDetailsButton
detailsButtonSetting API Reference: ui5.sap.com/#/api/sap.ui.comp.smarttable.SmartTable%23methods/setDetailsButtonSetting
Blog Post Column resizing & Auto pop-in feature in Responsive table: blogs.sap.com/2021/06/28/ui5ers-buzz-58-column-resizing-auto-pop-in-feature-in-responsive-table
