Introduction
While developing a dynamic sap.ui.table.Table in SAPUI5 (1.96), I encountered an issue that appeared only after deployment in SAP My Inbox.
The table consisted of:
Static columns defined in XMLDynamic columns created in JavaScriptMultiple labels in column headersDynamic labels and input controls inside each row
The implementation worked as expected during local execution. However, after deployment, the dynamically generated row content was clipped because the row height was not adjusted.
Table Structure
The table used a combination of XML and dynamically created columns.
//Respective Code Block
const oColumn = new sap.ui.table.Column({
label: new sap.m.VBox({
items: [
new sap.m.Label({ text: “Approval” }),
new sap.m.Label({ text: “Level 1” }),
// few more items too
]
}),
template: new sap.m.VBox({
items: [
new sap.m.Label({ text: “{Status}” }),
new sap.m.Input({ value: “{Comments}” }),
// few more items too
]
})
});
oTable.addColumn(oColumn);
Layout adjustment
The rows hasn’t expanded and so I have used the VBox layout properties as follows:
/* VBox Layout Properties */
new sap.m.VBox({
fitContainer: true,
justifyContent: “Center”
});
These properties had no impact on the rendered row height after deployment.
rowHeight – Although configuring rowHeight in XML resolved the issue, the property is deprecated in newer SAPUI5 versions.
Row Mode – Row Mode is the recommended approach in recent SAPUI5 releases, but it was not compatible with our SAP My Inbox application.
Let’s move with my final approach..
The issue was resolved by explicitly setting the row height.
oTable.setRowHeight(70); //Adjust as per our no.of items
After applying this change:
Dynamic controls were rendered correctly.Row content was fully visible.The behavior remained consistent in both local and deployed environments.
When working with complex dynamic templates inside sap.ui.table.Table, automatic row height calculation may behave differently across runtime environments.
If your application runs in SAP My Inbox and Row Mode isn’t a viable option, explicitly setting the row height using:
oTable.setRowHeight(X); // Line Height as X -> 70
View Mode/Edit Mode Changes:
if(!bNumberofColumsIsHigher){
oTable.setRowHeight(70); // Dynamic Render based on no.of colums as view mode
} else {
oTable.setRowHeight(100); // Dynamic Render based on no.of colums as edit mode }
This could be a simple and reliable workaround for rendering dynamic row content consistently after deployment.
If you have any alternative effective solutions, please feel free to share your thoughts and so everyone can learn from each other.
Thank you for taking the time to read this blog! If you found this helpful, i would love to hear your thoughts, feedback or questions in the comments. Let’s keep learning and growing together!
I’m still new to blogging, so if you notice anything that could be improved or corrected, please don’t hesitate to let me know!!
IntroductionWhile developing a dynamic sap.ui.table.Table in SAPUI5 (1.96), I encountered an issue that appeared only after deployment in SAP My Inbox.The table consisted of:Static columns defined in XMLDynamic columns created in JavaScriptMultiple labels in column headersDynamic labels and input controls inside each rowThe implementation worked as expected during local execution. However, after deployment, the dynamically generated row content was clipped because the row height was not adjusted. Table StructureThe table used a combination of XML and dynamically created columns.//Respective Code Block
const oColumn = new sap.ui.table.Column({
label: new sap.m.VBox({
items: [
new sap.m.Label({ text: “Approval” }),
new sap.m.Label({ text: “Level 1” }),
// few more items too
]
}),
template: new sap.m.VBox({
items: [
new sap.m.Label({ text: “{Status}” }),
new sap.m.Input({ value: “{Comments}” }),
// few more items too
]
})
});
oTable.addColumn(oColumn); Layout adjustmentThe rows hasn’t expanded and so I have used the VBox layout properties as follows:/* VBox Layout Properties */
new sap.m.VBox({
fitContainer: true,
justifyContent: “Center”
});These properties had no impact on the rendered row height after deployment.rowHeight – Although configuring rowHeight in XML resolved the issue, the property is deprecated in newer SAPUI5 versions.Row Mode – Row Mode is the recommended approach in recent SAPUI5 releases, but it was not compatible with our SAP My Inbox application. Let’s move with my final approach..The issue was resolved by explicitly setting the row height.oTable.setRowHeight(70); //Adjust as per our no.of itemsAfter applying this change:Dynamic controls were rendered correctly.Row content was fully visible.The behavior remained consistent in both local and deployed environments.When working with complex dynamic templates inside sap.ui.table.Table, automatic row height calculation may behave differently across runtime environments.If your application runs in SAP My Inbox and Row Mode isn’t a viable option, explicitly setting the row height using:oTable.setRowHeight(X); // Line Height as X -> 70View Mode/Edit Mode Changes: if(!bNumberofColumsIsHigher){
oTable.setRowHeight(70); // Dynamic Render based on no.of colums as view mode
} else {
oTable.setRowHeight(100); // Dynamic Render based on no.of colums as edit mode }This could be a simple and reliable workaround for rendering dynamic row content consistently after deployment.If you have any alternative effective solutions, please feel free to share your thoughts and so everyone can learn from each other.Thank you for taking the time to read this blog! If you found this helpful, i would love to hear your thoughts, feedback or questions in the comments. Let’s keep learning and growing together!I’m still new to blogging, so if you notice anything that could be improved or corrected, please don’t hesitate to let me know!! Read More Technology Blog Posts by Members articles
#SAP
#SAPTechnologyblog
