Technical Articles
Change to the SAPUI5 sap.ui.table library
Current situation
The table controls of the SAPUI5 sap.ui.table library provide shortcuts to define titles, footers, column headers, and cell templates for tables. If only a string is given for these aggregations, the table control creates the required text or label controls automatically using sap.m controls, as long as the sap.m library is loaded in the application. If not, the corresponding controls of sap.ui.commons are used.
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons"
xmlns:table="sap.ui.table" controllerName="myController" displayBlock="true">
<table:Table rows="{/data}" title="Title" footer="Footer">
<table:columns>
<table:Column label="Lastname" template="lastname"> </table:Column>
<table:Column label="Firstname" template="firstname"> </table:Column>
</table:columns>
</table:Table>
</mvc:View>
XML View Example
var oTable = new sap.ui.table.Table({
title: "Title",
footer: "Footer",
rows: "{/data}",
columns: [
new sap.ui.table.Column({
label: "Firstname",
template: "firstname"
}),
new sap.ui.table.Column({
label: "Lastname",
template: "lastname"
})
]
});
Code Example
What will happen with SAPUI5 1.118?
The sap.ui.commons library is deprecated as of version SAPUI5 1.38. To make SAPUI5 ready for future innovations, we plan to remove the support for the shortcuts in combination with the sap.ui.commons library with SAPUI5 1.118. Starting with this version, the table library will get a dependency to sap.m and always use sap.m controls for the shortcuts.
What does this mean for applications?
UI5 Diagnostics window
How to preview this change for testing purposes?
To preview and test whether this causes your application to behave differently, you may add sap.m already before using SAPUI5 1.118. This can be done, for example, in the SAPUI5 bootstrap or the metadata of your application component. In case you encounter issues with the shortcut definitions of the title, footer, column headers, or cell templates of the table, then you should replace them with explicit aggregated controls. The examples above will then look as follows:
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons"
xmlns:table="sap.ui.table" controllerName="myController"
displayBlock="true">
<table:Table rows="{/data}">
<table:title>
<TextView text="Title" wrapping="false"
class="sapUiTableHdrTitle"/>
</table:title>
<table:footer>
<TextView text="Footer" wrapping="false"/>
</table:footer>
<table:columns>
<table:Column>
<table:label>
<Label text="Lastname"/>
</table:label>
<table:template>
<TextView text="{lastname}" wrapping="false"/>
</table:template>
</table:Column>
<table:Column>
<table:label>
<Label text="Firstname"/>
</table:label>
<table:template>
<TextView text="{firstname}" wrapping="false"/>
</table:template>
</table:Column>
</table:columns>
</table:Table>
</mvc:View>
XML View Example
var oTable = new sap.ui.table.Table({
title: new sap.ui.commons.TextView({text: "Title",
wrapping: false}).addStyleClass("sapUiTableHdrTitle"),
footer: new sap.ui.commons.TextView({text: "Footer", wrapping: false}),
rows: "{/data}",
columns: [
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Firstname"}),
template: new sap.ui.commons.TextView({text: "{firstname}",
wrapping: false})
}),
new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Lastname"}),
template: new sap.ui.commons.TextView({text: "{lastname}",
wrapping: false})
})
]
});
Code Example