Show TOC

Compact Mode for sap.m.controls in Blue CrystalLocate this document in the navigation structure

The compact mode is a reduced-size design which is available for sap.m controls used in the Blue Crystal theme.

The font size is the same, but the dimensions of controls and the spacing between them are reduced compared to the sap.m controls.

Caution

The compact mode feature is not supported for Internet Explorer 9.

Using Compact Mode

Compact mode is triggered by the CSS class sapUiSizeCompact set on a parent element of the UI region for which you want to use compact mode controls. This means that some parts of the UI or different apps inside a sap.m.Shell can use the normal mode of the sap.m controls, while other parts can use the compact mode at the same time. However, sub-parts of the UI part that is set to compact mode can not use the normal mode because the CSS class affects the entire HTML subtree.

As dialogs and other popups are located at the root of the HTML document, you also have to set the CSS class for those elements to the respective mode. The CSS class only affects child controls. You can not make a control itself compact by adding the CSS class to it. Instead, set the CSS class on the parent container, for example a view or a component.

XML view definition - Example:

<mvc:View class="sapUiSizeCompact" xmlns=....>
   ...
</mvc:View>

JS view definition - Example:

createContent: function(oController) {
   ...
   this.addStyleClass("sapUiSizeCompact"); // make everything inside this View appear in Compact mode
   ...
}

JavaScript opening a dialog - Example:

var myDialog = new sap.ui.commons.Dialog({.....}).addStyleClass("sapUiSizeCompact");
myDialog.open();

JavaScript instantiating a view - Example:

var myView = sap.ui.view(...);
myView.addStyleClass("sapUiSizeCompact");
Note

It is also possible to apply the compact mode only under certain circumstances, for example, for devices that do not support touch interaction. In this case, add the class dynamically to the UI instead of statically. You can do this, for example, in the view controller:

sap.ui.controller("my.controller", {
   onInit: function() {
      if (!jQuery.support.touch) { // apply compact mode if touch is not supported
         this.getView().addStyleClass("sapUiSizeCompact");
      }
   }
});

As the check depends on several factors, you may not want to repeat the same logic again and again. A dialog opened from a compact view should, for example, also be in compact mode.

Synchronizing Compact Mode for a Dialog

As dialogs are rendered in a different part of the HTML tree, they do not automatically inherit the compact mode. To decide if you set the compact mode for a dialog, either perform the same check as for the view or use the convenience function jQuery.sap.syncStyleClass. This convenience function synchronizes a style class between elements. The function accepts the following parameters: Name of the style class, source element, and destination element. The following code snippet shows an example:

<mvc:View
    controllerName="mycontroller"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <Button text="Show Dialog" press="onOpenDialog" />
</mvc:View>
<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
    <Dialog title="Alert" type="Message">
        <Text text="Lorem ipsum dolor sit amet" />
        <beginButton>
            <Button text="Close" press="onDialogClose" />
        </beginButton>
    </Dialog>
</core:FragmentDefinition>
sap.ui.controller("mycontroller", {
    onOpenDialog: function (oEvent) {
        if (! this._oDialog) {
            this._oDialog = sap.ui.xmlfragment("mydialog", this);
            this.getView().addDependent(this._oDialog);
        }

        // sync compact style
        jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oDialog);
        this._oDialog.open();
    }
});

When calling jQuery.sap.syncStyleClass, the source element can be a jQuery object, a SAPUI5 control, or the ID of an HTML element. The destination object can either be a jQuery object or a SAPUI5 control.

Checking for Compact Mode Style Class

To determine if the compact style class is set anywhere above a certain HTML element, you can use the closest function from jQuery as shown in the following example:

var btn = new sap.m.Button({
    text: "Hello World",
    press: function(){
        var dialog = new sap.m.Dialog({
            title: "Hello World",
            content: new sap.m.Button({text:"Test Me"})
        });
        
        
        // add the 'sapUiSizeCompact' class if the Button is in an area using Compact Mode
        if (this.$().closest(".sapUiSizeCompact").length > 0) { // "this" in the event handler is the control that triggered the event
            dialog.addStyleClass("sapUiSizeCompact");
        }
        
        
        dialog.open();
    }
});
Providing Compact Mode Support for a Control

If you want to apply the normal and compact mode to your own controls, provide the normal CSS styling for the normal mode regardless of any size mode classes and provide extra CSS to shrink the size, if an ancestor element has the sapUiSizeCompact class. The following code snippet shows you an example:

.myOwnControl { /* the standard (big) style */
   ...
   height: 3rem;
   ...
}

.sapUiSizeCompact .myOwnControl { /* reduce the height in compact mode */
   height: 2rem;
}

Checking Supported Form Factors for a Control

After choosing a control from the list, look at the details in the Object Header area to see which form factor is supported. In the example shown below, the control supports both the Compact and Cozy form factors:

Alternatively, you can also use the filter function in the Explored application to filter the controls according to their form factor. Simply choose the filter selection icon in the upper left corner of the screen and then select Form Factor, as shown below: