SAPUI5 comes with several controls that are already able to react to the available screen real estate and resolution by themselves. Some require particular properties to be set, and with some, everything just works out of the box.
Such controls with built-in device adaptation are for example
sap.ui.layout.form.Form can also adapt to the available screen size. It is recommended to set the
sap.ui.layout.form.ColumnLayout for them, as its responsiveness allows the available space to be used in the best way possible.
One control that is widely used across all kinds of different applications is
sap.m.Table (also called the "Responsive Table"), which has several features you can use for device adaptation. On smaller devices, for example, you can set certain properties that will make particular columns pop in instead of being displayed as a normal column, or show and hide columns completely.
For example, you can set a
minScreenWidth for the columns. This will cause columns to only show up if a certain screen width is matched. You can define this
rem, but here you can also use the standard categories that come from the Device API (Phone, Tablet, or Desktop). Setting the additional property
true for a column will also react to the
minScreenWidth you specify. In such a case, the column will be shown as a popin on smaller screens, instead of being completely hidden.
Lets' look at an example where three columns are defined in an XML view for a sap.m.Table: Customer Name, City and Email.