Content Density

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

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

  1. 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.

This can be implemented in IQX FAB as following:

For Cozy Factor:

Cozy Factor
thisFormsController.getView().addStyleClass("sapUiSizeCozy");


For Compact Factor:

Compact Factor
thisFormsController.getView().addStyleClass("sapUiSizeCompact");

Determine the content density by the type of device:

if (!sap.ui.Device.support.touch) {
	"If device is not touch supported - KEYBOARD & MOUSE interaction
	thisFormsController.getView().addStyleClass("sapUiSizeCompact");
} else {
	thisFormsController.getView().addStyleClass("sapUiSizeCozy");
}