Change to the SAPUI5 sap.ui.table library

Update July 19, 2023: The change described in this blog post has been postponed until further notice and will not happen in SAPUI5 1.118. In general, removing the usage of deprecated code stays a good practice to keep the framework and applications ready for the future.

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?

If your UI5 application uses the table controls from sap.ui.table without loading sap.m, the application might be affected by this change. To find out whether the sap.m library is already loaded in your application, open the UI5 Diagnostics window by pressing Ctrl/Cmd+Alt+Shift+S. You can find the information about “Loaded Libraries” in the “Technical Information” section in the support dialog that opens. If sap.m is not listed, it will be automatically loaded when using SAPUI5 1.118.

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