Step 37: Content Density


In this step of our Walkthrough tutorial, we adjust the content density based on the user’s device. SAPUI5 contains different content densities allowing you to display larger controls for touch-enabled devices and a smaller, more compact design for devices that are operated by mouse. In our app, we will detect the device and adjust the density accordingly.


Step 37: Content Density - 第1张  | 优通SAP


You can view and download all files at Walkthrough – Step 37.


To prepare the content density feature we will also add a helper method
getContentDensityClass. SAPUI5 controls can be
displayed in multiple sizes, for example in a compact size that is
optimized for desktop and non-touch devices, and in a cozy mode
that is optimized for touch interaction. The controls look for a specific CSS class
in the HTML structure of the application to adjust their size.

This helper method queries the Device API directly for touch support of the client and returns the CSS class
sapUiSizeCompact if touch interaction is not supported and sapUiSizeCozy for all other cases. We
will use it throughout the application coding to set the proper content density CSS class.


add a method onInit on the app controller that is called when the app view is instantiated. There we query the helper
function that we defined on the app component to set the corresponding style class on the app view, All controls inside the app view will
now automatically adjust either to the compact or cozy size as defined by the style.


“Hello World” dialog is not part of the app view but opened in a special part of the DOM called “static area”. The
content density class defined on the app view is not known to the dialog so we sync the style class of the app with the
dialog manually.


In the contentDensities section of the sap.ui5
namespace, we specify the modes that the application supports. Containers like the
SAP Fiori launchpad allow
switching the content density based on these settings.

As we have just enabled the app to run in both modes depending on the devices
capabilities, we can set both to true in the application


You should now be familiar with the major development paradigms and concepts of SAPUI5 and have created
a very simple first app. You are now ready to build a proper app based on what
you’ve learned.

If you want to dive deeper into specific topics, you can use the other tutorials that
show some of the aspects of this Walkthrough and advanced topics in more detail.



seven + twelve =