The default design for all controls belonging to the
sap.m library is the Cozy density (larger dimensions and spacings). If your application only uses the
sap.m library, you can skip setting the content density explicitly if the Cozy density is exactly what you require. However, controls belonging to other libraries may also support a Cozy design (such as
sap.ui.table.Table) but the default might be different (such as Compact density). For this reason, if your application uses controls belonging to different libraries, it is strongly recommended to set the desired content density explicitly.
The content densities Cozy and Compact are triggered by the CSS classes
You set the appropriate CSS class on the container that you want to switch to the content density in question, not on the control itself. It is recommended that you set it at a high level, since in most cases you will want to set it for the entire application. Once you set the CSS class at a particular level, it cascades down, meaning you can't override it in the lower levels of your code.
For example, to display a view with all contained UI elements with the Compact content density, you can implement the following:
<mvc:View class="sapUiSizeCompact" ... >
It is also possible to apply the relevant content density only under certain circumstances, for example, for devices that do not support touch interaction. In this case, add the CSS class dynamically to the UI instead of statically.
To specify a content density depending on certain properties of the device on which the application runs, the Device API (
sap.ui.Device) can be used.
The Device API provides information about device specifics, like the operating system along with its version, the browser and browser version, screen size, current orientation and support for specific features such as, touch event support, orientation change, and so on. (For detailed information about the Device API, see the API Reference for the
Implementing a Helper Method on the Component Controller
The figure, Helper Method on the Component Controller, shows how the CSS class required for the content density can be determined with the help of the Device API. For this purpose, a helper method called
getContentDensityClass is created on the component controller, which checks via the
sap.ui.Device.support.touch field of the Device API whether the device on which the application is running has touch support. The Device API is loaded via the dependency array of the component controller. If the device has touch support, the method returns the CSS class
sapUiSizeCozy, otherwise the CSS class
Setting the CSS Class for a View
getContentDensityClass helper method can be called, for example, in the controller of the component's root view to set the appropriate CSS class for the entire application. The coding required for this is shown in the figure Setting the CSS Class for a View.
onInit initialization method of the view controller, the controller's
getOwnerComponent method is used to access the component controller. On this, the
getContentDensityClass helper method discussed above is called, which returns the CSS class depending on the touch support of the device. The CSS class obtained is then added to the view via the