Examples

Set the type property within tableSettings to the required value in the sap.ui.generic.app section of the manifest.json file:

Example for the list report:

"sap.ui.generic.app": {
    "pages": [
        {
            "entitySet": "Zfarvd_Bs_Hd_Bo",
            "component": {
                "name": "sap.suite.ui.generic.template.ListReport",
                "list": true,
                "settings": {
                    "tableSettings": {
                        "type": "GridTable"
                    }
                }
            }
        }
    ]
}
	

Examples for the object page:

"sap.ui.generic.app": {
    "pages": [
        {
            "entitySet": "STTA_C_MP_Product",
            "component": {
                "name": "sap.suite.ui.generic.template.ListReport",
                "list": true
            },
            "pages": [
                {
                    "entitySet": "STTA_C_MP_Product",
                    "component": {
                        "name": "sap.suite.ui.generic.template.ObjectPage",
                        "settings": {
                            "sections": {
                                "to_ProductText::com.sap.vocabularies.UI.v1.LineItem": {
                                    "navigationProperty": "to_ProductText",
                                    "entitySet": "STTA_C_MP_ProductText",
                                    "tableSettings": {
                                        "type": "TreeTable"
                                    }
                                }
                            }
                        }
                    }
                }
            ]
        }
    ]
}

Defining tableTypes under the settings is supported for backward compatibility. However, using tableSettings is recommended for defining table types.

"pages": [
    {
        "entitySet": "STTA_C_MP_Product",
        "component": {
            "name": "sap.suite.ui.generic.template.ObjectPage",
            "settings": {
                "showRelatedApps": true,
                "tableSettings": {
                    "type": "ResponsiveTable"
                },
                "sections": {
                    "to_ProductText::com.sap.vocabularies.UI.v1.LineItem": {
                        "navigationProperty": "to_ProductText",
                        "entitySet": "STTA_C_MP_ProductText",
                        "tableSettings": {
                            "type": "GridTable"
                        }
                    }
                }
            }
        }
    }
]

Examples

Set the type property within tableSettings to the required values in sap.ui5: routing: targets of the manifest.json file.

Example for the list report:

"targets": {
    "SalesOrderManageList": {
        "type": "Component",
        "id": "SalesOrderManageList",
        "name": "sap.fe.templates.ListReport",
        "options": {
            "settings": {
                "controlConfiguration": {
                    "@com.sap.vocabularies.UI.v1.LineItem": {
                        "tableSettings": {
                            "type": "ResponsiveTable"
                        }
                    }
                }
                ...
            }
        }
    }
}

Example for the object page:

"targets": {
    "SalesOrderManageObjectPage": {
        "type": "Component",
        "id": "SalesOrderManageObjectPage",
        "name": "sap.fe.templates.ObjectPage",
        "options": {
            "settings": {
                "controlConfiguration": {
                    "_Item/@com.sap.vocabularies.UI.v1.LineItem": {
                        "tableSettings": {
                            "type": "GridTable"
                        }
                    }
                }
            }
        }
    }
}

Configuring the Popin Layout for Responsive Tables

When using a responsive table and there is not enough space to show all the columns, columns can be shown within popins using the Show More per Row option in the table toolbar.

The following popin layouts are supported:

• Block (default): Sets a block layout for rendering the table popins. The columns inside the popin container are rendered one below the other.
• GridLarge: Sets a grid layout for rendering the table popins. The width of the grid for each table popin is larger than GridSmall, so this layout renders less content in a single popin row.
• GridSmall: Sets a grid layout for rendering the table popins. The width of the grid for each table popin is small, so this layout allows more content to be rendered in a single popin row.

For more information about the size of the popin layouts, see the Fiori Design Guidelines.

You can configure the popin layout for each responsive table using the popinLayout parameter in the tableSettings section. In the example below, the popin layout is set to GridSmall.

"controlConfiguration": {
    "@com.sap.vocabularies.UI.v1.LineItem": {
        "tableSettings": {
            "type": "ResponsiveTable",
            "popinLayout": "GridSmall"
        }
    },
    ...
}

You can also define a default popin layout at the application level. A popin layout defined at the table level takes precedence over a popin layout defined at the application level. In the example below, the default popin layout is GridLarge.

"sap.fe": {
    "macros": {
        "table":{
            "defaultPopinLayout": "GridLarge"
        }
    }
}

Annotating a Service as an Analytical Service

To set the analytical capabilities of your service or entity, use the Aggregation.ApplySupported annotation at the entity set level.

<Annotations Target="sap.fe.managepartners.ManagePartnersService.Customers">
    <Annotation Term="Aggregation.ApplySupported">
    </Annotation>
</Annotations>

// at root level of your entity
@Aggregation.ApplySupported : {
}

The analytical table renders data that can be grouped and aggregated.

• Defining Groupable Properties

  The analytical table offers the possibility to group rows based on groupable properties. You must define which properties are groupable so that the table allows grouping the relevant properties.

  To annotate a set of properties as groupable, add it to the GroupableProperties annotation:

  Sample Code

  XML Annotation

  Sample Code

  Hidden

  <Annotations Target="sap.fe.managepartners.ManagePartnersService.Customers">
      <Annotation Term="Aggregation.ApplySupported">
          <PropertyValue Property="GroupableProperties">
              <Collection>
                  <PropertyPath>Segment</PropertyPath>
                  <PropertyPath>Country</PropertyPath>
              </Collection>
          </PropertyValue>
      </Annotation>
  </Annotations>
  

  Sample Code

  CAP CDS Annotation

  Sample Code

  Hidden

  @Aggregation.ApplySupported : {
      GroupableProperties: [Segment, Country]
  }

  Users can then group rows of the table:

  

• Defining Aggregatable Properties

  The properties can also be annotated as aggregatable (measures). To do so, at the entity level, you must also define the Aggregation.CustomAggregate annotation, which has the property name as the qualifier:

  Sample Code

  XML Annotation

  Sample Code

  Hidden

  <Annotations Target="sap.fe.managepartners.ManagePartnersService.BusinessPartners/SalesAmount">
      <Annotation Term="Aggregation.default" EnumMember="Aggregation.defaultType/SUM"/>
      <Annotation Term="Analytics.Measure" Bool="true"/>
  </Annotations> 
  
  // At the entity level you must also define the Aggregation.CustomAggregate annotation which has the property name as the qualifier: 
  <Annotations Target="sap.fe.managepartners.ManagePartnersService.EntityContainer">
      <Annotation Term="Aggregation.CustomAggregate" Qualifier="SalesAmount" String="Edm.Decimal"/>
  </Annotations>

  Sample Code

  CAP CDS Annotation

  Sample Code

  Hidden

  SalesAmount @Analytics.Measure : true @Aggregation.default : #SUM; //use the aggregation function you want
  // At the entity level you must also define the Aggregation.CustomAggregate annotation which has the property name as the qualifier: 
  @Aggregation.CustomAggregate #SalesAmount : 'Edm.Decimal'

  Caution

  The analytical table displays only properties that are annotated as groupable and/or aggregatable. Otherwise, the property won't be requested and will have no value in the table.

• Enabling and Disabling the Search Field

  You can use the Transformation annotation to enable and disable the Search field in an analytical table, as well as in a chart. You enable the Search field by listing it in the corresponding annotation. If you don't specify any transformation, the Search field is enabled by default. This is shown in the following sample code:

  Sample Code

  XML Annotation

  Sample Code

  Hidden

  <Annotations Target="sap.fe.managepartners.ManagePartnersService.Customers">
       <Annotation Term="Aggregation.ApplySupported">
            <Record Type="Aggregation.ApplySupportedType">
                 <PropertyValue Property="Transformations">
                      <Collection>
                           <String>search</String>
                           <String>topcount</String>
                           <String>bottomcount</String>
                           <String>identity</String>
                           ...                    
                      </Collection>
                 </PropertyValue>
            </Record>
        </Annotation></Annotations>

  Sample Code

  CAP CDS Annotation

  Sample Code

  Hidden

  @Aggregation.ApplySupported : {
     Transformations : [
        'search',
        'topcount',
        'bottomcount',
        'identity',
        ...   
     ],
  }

• Aggregation Based on Visible Properties

  By default, an analytical table requests all key properties for the displayed entity even if these properties are not displayed within the table. To display aggregation based solely on visible columns, configure the aggregationOnLeafLevel flag in the manifest.json file as shown in the following sample code:

  Sample Code

  manifest.json

  Hidden

  "controlConfiguration":
  {
      "@com.sap.vocabularies.UI.v1.LineItem":
       {        "tableSettings":
          {
              "type": "AnalyticalTable",
              "analyticalConfiguration":
              {
                  "aggregationOnLeafLevel": true
              },
              "personalization": true
          }
      }
  }

  When aggregationOnLeafLevel is set to true, any navigation or bound actions are enabled only if all key properties of the entity are displayed in the table. If the missing key properties are added through the table settings, both the navigation and the bound actions are enabled.

  Note

  If the rowPress event is overridden at the table level, the navigation indicator is still displayed even when aggregationOnLeafLevel is set to true.

  In the following screenshots, Identifier is a key property:

  

  In the example above, the Identifier column is not displayed in the table, so navigation and bound actions are disabled.

  

  In the example above, the Identifier column is displayed in the table, so navigation and bound actions are enabled.

Using an Analytical Table with a Draft-Enabled Service

The list report can display an analytical table with a draft-enabled service with the following behavior:

• Only the active entities are displayed.

• The Editing Status field is not displayed in the filter bar.

• The draft indicator is shown if a draft exists for an active record.

• When creating a new object, the new object needs to be saved or discarded.

• The behavior of already saved objects remains unchanged: a draft can be saved, kept, or discarded. The navigation is also unchanged.

When used in an object page or in a custom page, the analytical table is displayed in read-only mode, and delete and create operations aren't available.

Setting Transformation Filters on Aggregate Controls

SAP Fiori elements for OData V4 assumes that the back end supports transformation filters for aggregate controls, such as analytical tables. For more information about transformation filters, see OData Extension for Data Aggregation Version 4.0.

Activating the Tree Table

You can activate the tree table in the manifest.json file. To do so, set the table type in the TableSettings section to TreeTable and provide the hierarchy qualifier.

"controlConfiguration": {
                "@com.sap.vocabularies.UI.v1.LineItem": {
                  "tableSettings": {
                    "type": "TreeTable",
                    "hierarchyQualifier": "SalesOrgHierarchy",
                    "personalization": true
                  }
                }
              }

For more detailed information about using tree tables, see Tree Tables.

Defining the Number of Visible Rows

When a grid table is not the sole control within a section of an object page or when the sectionLayout is set to Page, 5 fixed rows are displayed in the table by default. In a tree table and an analytical table, 10 fixed rows are displayed by default in the same situation. You can change the number of rows displayed by defining the rowCount and rowCountMode parameters within the table settings in the manifest.json file as follows:

• The rowCount parameter defines the number of rows to be displayed in the table.

• The rowCountMode parameter defines how the table handles the visible rows. This parameter doesn't apply to responsive tables. The following values are allowed:

  • Fixed: The number of rows displayed in the table always matches the value defined in the rowCount property.

  • Auto: The number of rows is changed by the table automatically, adjusting to the space it is allowed to cover (limited by the surrounding container), but there are always at least as many rows as defined in the rowCount property.

  • Interactive: The user can change the number of displayed rows by dragging a resize handle.

"controlConfiguration": {
    "@com.sap.vocabularies.UI.v1.LineItem": {
        "tableSettings": {
	            "type": "GridTable",
                    "rowCount": 10,
                    "rowCountMode": "Fixed"
                    "personalization": true,
                     ...
        }
    },
    ...
}