SAP Fiori is responsive and runs on all devices and with all form factors. This means that all common interaction styles have to be supported in the same way: interaction with a mouse and keyboard as well as by touch.

SAPUI5 provides a “content density” factor, which allows the size of the controls to be adjusted depending on the interaction style.

The cozy factor displays controls with dimensions large enough to enable fingertip interaction. This factor is ideal for devices operated by touch.

The compact factor reduces the dimensions of the controls, allowing more information to be displayed on the UI. This factor is ideal for devices operated by mouse and keyboard.

With the compact value, the font size remains the same, but the dimensions of the controls, as well as the spaces between them, are smaller than in the cozy mode. The cozy default control area of 3 rem is reduced to 2 rem with the compact factor.

Implementation

All SAP Fiori controls support both cozy and compact content density modes. For most controls, the default is set to cozy. However, some controls (such as those which stem from the desktop library) have compact mode as the default setting.

How you should set the content density depends on the capabilities of your user’s device. This can be detected using the device helper method. If the device supports touch (sap.ui.Device.support.touch = true), the content density class should be set to “sapUiSizeCozy” or “sapUiSizeCompact”. For a detailed description of how to set the parameters correctly, see the SAPUI5 Developer Guide article on Content Density.

It is important that you actively set the content density! Since different controls might have different defaults, failing to set the correct content density could result in different density factors being shown on the screen.

App developers must state which modes the app supports in the app descriptor. This information is then checked by the SAP Fiori Launchpad on start-up.

An additional setting is available in the SAP Fiori Launchpad on hybrid devices (devices that support touch as well as a mouse and keyboard) if the administrator has enabled this feature. With this additional setting (under User Menu / Settings / Appearance / Display Settings / Cozy Content Spacing), users can define whether they want the apps to be run in cozy (default) or compact mode. This setting is persisted for all hybrid devices but has no effect on the automatic detection of pure touch or pure mouse-and-keyboard devices.

Guidelines

Touch devices: Set the content density to “cozy” for the entire app. Apply the sapUiSizeCozy class.

Devices operated by mouse and keyboard: Set the content density to “compact” for the entire app. Apply the sapUiSizeCompact class.

Hybrid devices: The user has both options for interacting with the app. The default setting is cozy mode (touch), but the user can override this setting in the SAP Fiori Launchpad, where it will be persisted.

Services

The UI5 Developer Guide article on Content Density describes how to set the correct parameters based on the device capabilities.