Enabling Multiple Selection in Tables

Enabling Multiple Selection in Tables

This feature enables you to configure whether end users can select a single row or multiple rows in a table while triggering table toolbar actions that require context.

SAP Fiori Elements for OData V2

Single selection in tables is enabled by default. If you want, you can enable multi-select.

List Report Settings

When multiSelect is set to true in the manifest.json file of a list report table, the table switches from single-select to multi-select, as shown in the this sample code:

"sap.ui.generic.app": {
  "_version": "1.3.0",
  "pages": {
  "ListReport|STTA_C_MP_Product": {
    "entitySet": "STTA_C_MP_Product",
    "component": {
    "name": "sap.suite.ui.generic.template.ListReport",
    "list": true,
    "settings" : { 
      "tableSettings": {
        "multiSelect": true
      }
    }

Object Page Settings

You have two options:

  • You can enable multiple selection at object page level for all tables on the object page.

    To do so, set multiSelect to true in the manifest.json file of your object page.

    "pages": {
  "ObjectPage|STTA_C_MP_Product": {
  "entitySet": "STTA_C_MP_Product",
  "name": "sap.suite.ui.generic.template.ObjectPage",
    "settings": {
      "showRelatedApps": true,
      "editableHeaderContent": true,
      "tableSettings": {
        "multiSelect": true
      },
      "sections": {
        "to_ProductText::com.sap.vocabularies.UI.v1.LineItem": {
          "navigationProperty": "to_ProductText",
          "entitySet": "STTA_C_MP_ProductText",
          "createMode": "inline"
        }

  • You can enable multiple selection at table level, that is, individually for each table.

    To do so, set multiSelect to true for a specific table in the manifest.json file of your object page:

    "pages": {
  "ObjectPage|STTA_C_MP_Product": {
  "entitySet": "STTA_C_MP_Product",
  "name": "sap.suite.ui.generic.template.ObjectPage",
    "settings": {
      "showRelatedApps": true,
      "editableHeaderContent": true,
      "sections": {
        "to_ProductText::com.sap.vocabularies.UI.v1.LineItem": {
          "navigationProperty": "to_ProductText",
          "entitySet": "STTA_C_MP_ProductText",
          "createMode": "inline”,
          "tableSettings": {
            "multiSelect": true
          }
        }

MultiSelectionPlugin

The Select All button is disabled by default. If you want to enable it, set selectAll : true. If selectAll : false, the following applies:

  • The user can still select a range. If new data needs to be loaded from the back-end system for this, the number of lines to be loaded is restricted to the specified limit. The default value for this limit is 200. If selectAll : true, the selection limit is not evaluated.

  • The Undo Selection button is displayed instead of the Select All button. The user can choose this button to reset all selections.

Note

If the user chooses Select All, the system loads all data from the back-end system, possibly in multiple sequential requests. For performance reasons, set selectAll : true only if the expected amount of data is not too high.

Note

Use the MultiSelectionPlugin for grid tables, analytical tables, and tree tables.

For more information, see API Reference and the Sample for MultiSelectionPlugin.

The following sample code shows example table settings for a GridTable with MultiSelectionPlugin. You can place these "tableSettings" underneath "settings" at list report level as well as at object page level.

Sample Code 

     "tableSettings": {
           "type": "GridTable",
           "multiSelect": true,
           "selectAll": false,
           "selectionLimit": 150
     }

SAP Fiori Elements for OData V4

You can make the table rows selectable or non-selectable based on settings. It is also possible to allow single selction or multi-selection of rows in a table. This can be done by specifying appropriate values for the selectionMode property. The following values are possible:

  • Auto: This is the default value. Here, the application first checks for a custom action or UI.DataFieldForIntentBasedNavigation in the table toolbar that requires a context. If this is not found, then it is not possible to allow table selection in display mode. In edit mode, selection including multiple row selection is possible only when a Delete button is available in the table toolbar.

  • Multi: Setting this value allow end users to select multiple entries in a table in both display and edit modes.

  • Single: Setting this value allow end users to select only a single entry in a table in both display and edit modes.

  • None: Setting this value restricts end users to select any table entries in display mode. However, in edit mode, selection including multiple row selection is possible only when a Delete button is available in the table toolbar.

List Report Settings

When selectionMode is set to Multi in the manifest.json file of a list report table, the table switches from single-select to multi-select, as shown in the this sample code:

Sample Code 

{
   "targets":{
      "SalesOrderManageList":{
         "type":"Component",
         "id":"SalesOrderManageList",
         "name":"sap.fe.templates.ListReport",
         "options":{
            "settings":{
               "entitySet":"SalesOrderManage",
               "variantManagement":"Page",
               "controlConfiguration":{
                  "@com.sap.vocabularies.UI.v1.LineItem":{
                     "tableSettings":{
                        "type":"ResponsiveTable",
                        "selectionMode":"Multi"
                     }
                  }
               },
               "navigation":{
                  "SalesOrderManage":{
                     "detail":{
                        "route":"SalesOrderManageObjectPage"
                     }
                  }
               }
            }
         }
      }
   }
}

Object Page Settings

You can enable multiple selection at table level, that is, individually for each table.

To do so, set selectionMode to Multi for a specific table in the manifest.json file of your object page:

Sample Code 

{
   "SalesOrderManageObjectPage":{
      "type":"Component",
      "id":"SalesOrderManageObjectPage",
      "name":"sap.fe.templates.ObjectPage",
      "options":{
         "settings":{
            "entitySet":"SalesOrderManage",
            "navigation":{
               "_Item":{
                  "detail":{
                     "route":"SalesOrderItemObjectPage"
                  }
               }
            },
            "variantManagement":"Control",
            "showRelatedApps":true,
            "editableHeaderContent":false,
            "sectionLayout":"Tabs",
            "controlConfiguration":{
               "_Item/@com.sap.vocabularies.UI.v1.LineItem":{
                  "tableSettings":{
                     "type":"GridTable",
                     "selectionMode":"Multi",
                     "personalization":{
                        "column":true,
                        "sort":false
                     },
                     "creationMode":{
                        "name":"CreationRow",
                        "createAtEnd":true
                     }
                  }
               },
               "_Partner/@com.sap.vocabularies.UI.v1.LineItem":{
                  "tableSettings":{
                     "personalization":false
                  }
               }
            }
         }
      }
   }
}

If you enable mutli-selection mode for the table, the Select All checkbox is enabled by default.