Table Groupings

Table Groupings

SAP Fiori elements handles table groupings automatically.

The grouping of rows is supported in analytical tables (sap.ui.Table.AnalyticalTable) and responsive tables (sap.m.Table). Grid tables and tree tables are not supported.

An example of row grouping in a table is shown in the following screenshot:

Restrictions

For analytical tables, take the following restrictions into account:

  • Grouping can only be activated for dimension columns.

  • Grouping takes place on the server. The header formatter has no effect on the grouping itself. This means that groups stay separate even if they have the same header after formatting.

  • The TextArrangement annotation is not supported. A property with a text property is displayed as follows: “m – Meter”. For more information, see the API Reference for TextArrangement.

  • Displaying values with units of measure is not supported.

Additional Features in SAP Fiori Elements for OData V2

Grouping Header Text

These group header formatters are automatically set by SAP Fiori elements:

  • Responsive table: Set a grouping function on the sorter: fnGroup of sap.ui.model.Sorter.

  • Analytical table: Set property groupHeaderFormatter of sap.ui.table.AnalyticalColumn.

Grouping Header Types

SAP Fiori elements supports these group header formatters:

OData Type SAP Display Format OData Example Unformatted Formatted Comments
Edm.DateTimeOffsetDate Date /Date(1485471600000 +0000)/ Fri Jan 27 2017 00:00:00 GMT+0100 (Central European Standard Time) Jan 26, 2017 UTC
Edm.DateTimeOffset /Date(1485471600000 +0000)/ Fri Jan 27 2017 00:00:00 GMT+0100 (Central European Standard Time) Jan 27, 2017, 12:00:00 AM
Edm.DateTime Date /Date(1485471600000 +0000)/ Fri Jan 27 2017 00:00:00 GMT+0100 (Central European Standard Time) Jan 26, 2017 UTC
Edm.DateTime /Date(1485471600000 +0000)/ Fri Jan 27 2017 00:00:00 GMT+0100 (Central European Standard Time) Jan 27, 2017, 12:00:00 AM
Edm.Time Time PT11H13M01S [object Object] is: {ms: 43980000, __edmType: "Edm.Time"} 11:13:01 AM
Edm.String Date 20180313 20180313 Mar 13, 2018
Edm.Boolean true true Yes
Edm.Decimal 10 10 10.000 m* Unit of measure
Edm.Decimal 2498.00 2498.00 2,498.00 EUR* Currency
Edm.String m m Meter (m)* Unit of measure and TextArrangement
Edm.String EUR EUR Euro (EUR)* Currency and TextArrangement

* Units of measure or currencies in the grouping header are supported only in responsive tables.

Additional Features in SAP Fiori Elements for OData V4

Table Groupings

Grouping is enabled by default for responsive columns. Ensure that all sortable columns can be grouped.

You can disable grouping in a responsive table using the table personalization in the manifest.json as shown in the following sample code:

Sample Code

Hidden
"_Item/@com.sap.vocabularies.UI.v1.LineItem": {
     "tableSettings": {
          "type": "ResponsiveTable",
          "condensedTableLayout": true,
          "personalization": {
               "column": true,
               "sort": false,
               "group": false
          },
          ...
     }
}

Defining Default Groups and Totals

You can define default groups to be loaded when the application is launched. For analytical tables, you can also define totals.

You can define one or several group levels. To do so, use the PresentationVariant annotation. For details about how to use a particular PresentationVariant (PV) or SelectionPresentationVariant (SPV), see Configuring Default Settings (Visualizations, Sort Order, Filter Values).

The default SPV or PV is read as follows:

Sample Code

XML Annotation

Sample Code
Hidden
<Annotations Target="sap.fe.managepartners.ManagePartnersService.EntityContainer/BusinessPartners">
<Annotation Term="UI.PresentationVariant">
  <Record Type="UI.PresentationVariantType">
    <PropertyValue Property="GroupBy">
      <Collection>
        <PropertyPath>Country</PropertyPath>
      </Collection>
    </PropertyValue>
    <PropertyValue Property="Total">
      <Collection>
        <PropertyPath>SalesAmount</PropertyPath>
      </Collection>
    </PropertyValue>
    <PropertyValue Property="Visualizations">
      <Collection>
        <AnnotationPath>@UI.Chart</AnnotationPath>
        <AnnotationPath>@UI.LineItem</AnnotationPath>
      </Collection>
    </PropertyValue>
  </Record>
</Annotation>
</Annotations>

Sample Code

CAP CDS Annotation

Sample Code
Hidden
UI.PresentationVariant : {
    GroupBy : [
        Country
    ],
    Total : [
        SalesAmount
    ],
    Visualizations : [
        '@UI.Chart',
        '@UI.LineItem',
    ]
}

Caution

You must provide a PresentationVariant.Visualizations entry. Otherwise, the presentation variant won't be considered.

The chart visualization is only rendered in the analytical list page template. In the list report, only the line item is rendered.

You can see the grouping applied on the Country property, and the totals for the Sales Amount in the following screenshot:

End users can always change groups and totals via the column header and the aggregation icon of the analytical table:

Note

If no PresentationVariant is defined for the analytical table, a total is provided by default for all the columns with an aggregatable property.

If a PresentationVariant is defined, a total is provided for the columns with aggregatable properties listed in the Total attribute of the PresentationVariant.

If the Total attribute is defined but empty, no total is provided. If the Total attribute is missing, a total is provided by default for all the columns with an aggregatable property.

Restriction

  • Filtering on aggregatable properties is not supported and is also removed from the filter bar and from the filter dialog of the table.

  • If a group has multiple units or currencies in its data, the total cannot be computed directly. In this case, the table displays a Show Details link which opens a popup. The total or subtotal amounts per unit or per currency are shown in the popup.

  • Only one level of grouping is supported in a responsive table. If you have specified multiple levels through a PresentationVariant, for example, only the first level is applied.