Updated: October 5, 2022

Table Rows

Intro

The SAP Fiori elements templates support the features and settings for table rows or inline items detailed below.

For design information see the table guidelines, starting with Table Overview, and the links below.

Feature Availability

 

Actions

 

Availability

Inline Actions Available
Single Item Selection Default
Multiple Item Selection Available
Delete Available in responsive tables only
Custom Actions Available
Messages for Critical Actions Default, replace the generic placeholder text with meaningful text for the user.
 

Display

 

Availability

Editing Status: Displayed in First Column Default for draft-enabled applications
Rating Indicator Available
Progress Indicator Available
Quick Contact View Available
Avatar Available
Other Images Available with live box mode only
Highlighting New Line Items Available with SAP Fiori elements for OData V2

Default with SAP Fiori elements for OData V4 for grid and responsive tables in draft-enabled applications

Highlighting Line Items Based on Criticality Available
 

Responsive Table Only

 

Availability

Multiple Fields in a Single Column Available
Smart Micro Chart Available

Actions


Inline Actions

You can define actions for table rows or inline items. The action types can be:

  • Actions that occur in the system while the user stays on the list report screen, for example Approve or Reject.
  • Actions that navigate to a different application, for example, when the user can open a purchase requisition from a specific purchase order in the table.

When a page contains a grid table, an analytical table, or tree table that leads to object or subobject pages, users can navigate to the object or subject page at row level. The Show Detail button is not displayed in these tables. Instead, users can click the navigation indicator:   .


Item Selection

SAP Fiori elements for OData V2

By default, single selection is enabled and allows users to select one table row for a toolbar action, using a radio button.

You can enable multiple item selection and allow users to select multiple table rows for a toolbar action, using checkboxes.

SAP Fiori elements for OData V4

With the default “auto” mode, the application checks whether any actions in the table toolbar depend on item selection to be enabled. If not, in display mode, item selection is not possible. In edit mode, when the Delete action is enabled, multiple selection is also enabled.

Instead, you can enable:

  • Single item selection in both display and edit modes, called “single” mode.
  • Multiple item selection in both display and edit modes, called “multi” mode. When this mode is enabled, the Select All checkbox is also enabled by default.
  • No item selection in display mode, and multiple item selection in edit mode, when a Delete action is available in the table toolbar. This is mode is called “none.”

Both Versions of SAP Fiori Elements: Object Page

In an object page, you can enable multiple selection for all the tables on the page, or for specific tables only with both SAP Fiori elements for OData V2 and V4.

Warning
Do not enable a delete action in the table rows with multiple selection for the table. The application will fail to load.

Instead, enable a delete action for the table with multiple selection for the table. The delete action is then available in the table toolbar.

Developer Hint
For more information, refer the development team to: Enabling Multiple Selection in Tables.

For more information, see:


Delete

In responsive tables only, you can:

  • Display an inline delete action.
  • Prevent the deletion of certain rows.

In support of best design practices, SAP Fiori elements does not allow you to combine an inline delete action with a central delete action in the toolbar.

For more information, see Delete Single Item Rows.


Custom Actions

You can define custom inline actions.

Because custom inline actions are grouped, you cannot control their exact display order. However, you can control which columns display the groups.


Messages for Critical Actions

For actions that you set as critical, you can display one of the following after the user triggers the action:

  • A message toast confirmation
  • A confirmation message box to check the users want to proceed with specific critical actions

Also, the backend can require a confirmation on some actions. In this case, the confirmation message is always shown in a message box.

Guidelines
Replace the generic placeholder text in the messages with text that’s meaningful to the users, as shown in the example below. You do this by providing the new text to the develoment team for update in the application’s internationalization (i18n) file for the object type.

Ask the development team whether or not the backend requires confirmations for your use case.

Example


SAP Fiori elements for OData V2 SAP Fiori elements for OData V4
Default Text “Do you really want to execute the action <Action Label>?”

<Action Label> is the label shown on the button.

“Do you really want to perform this action?
Replacement Text “Are you sure you really want to activate this product?” “Are you sure you really want to activate this product?”

For more information, see UI Text Guidelines for SAP Fiori Apps.


Display

You can include the display features described below in a table row or inline item.


Editing Status

By default, the table displays the editing status in the first column for draft-enabled applications.

You can also add the semantic key to the status.

The editing status reflects the state of the object or item in the processing cycle. For example, it can give the user information about the state of completion for the item or whether it’s currently available.

  • For Unsaved Changes and Locked statuses, a popover displays the full name or technical name of the user who last changed the object  when the name is available. “Another user” is displayed when it’s not.
  • For Draft, Unsaved Changes and Locked statuses, a popover displays the user who last changed the item and the time of the change.

The user can change the placement of the column through table personalization.

For more information, see Tables.


Rating Indicator

You can add an inline, read-only rating indicator and define a maximum rating of up to five stars. By default, five stars is the maximum.

The number of stars displayed depends on the value of a field in the backend. Decimal values are rounded up or down and when the value after the decimal point falls between x.25 and x.74, it is represented by a half star.

With extensions, you can enable editing of the rating indicator

For more information, see Rating Indicator.


Progress Indicator

You can:

  • Enable an inline progress indicator to visually represent the level of completion of a project or goal, for example.
  • Set the progress measure as a percentage or an absolute number, for example 3 or 8.
  • Configure the progress bar to reflect the state of progress with color, based on the criticality of the progress.

For more information, see Progress Indicator.


Quick Contact View

You can add a quick view to a contact to display key contact details in a popover.

For more information, see: Quickview.


Avatar and Other Images

You can display an avatar in the row.

Warning
Other images are not displayed correctly within the table borders. Only use them with live box mode.

For more information, see: Avatar.


Highlighting Line Items

By default with SAP Fiori elements for OData V4, in draft-enabled applications, a newly created item in draft status is always highlighted in blue in grid and responsive tables.

Highlighting of new line items in draft-enabled applications is available with both SAP Fiori elements for OData V2 and V4.

You can also define highlighting and icons for line items based on their criticality.

After a newly created item is saved, it is highlighted according to the criticality, as follows:

  • Green for success (criticality value 3)
  • Yellow for warning (criticality value 2)
  • Red for error (criticality value 1)
  • No highlighting for no criticality (criticality value 0)

Display in Responsive Table Only

In a responsive table, you can include the display features described below in a table row or inline item.


Multiple Fields in a Single Column

You can combine multiple IDs, descriptions, and action buttons in a single column in a responsive table.

For example, you can display the following in a single column:

  • Company name
  • Company ID
  • Items in Stock
  • Progress Indicator for Items in Stock
  • Overall value of the Items
  • Multiple Action buttons that allow the user to both:
    • Execute an action while staying on the list report page
    • Navigate to other objects and applications

The visibility of a column that combines multiple fields and its position in the table can be changed.

Limitation

When users export to Microsoft Excel, only the first piece of information displayed in the column is exported.


Smart Micro Chart

You can:

  • Add an inline micro chart.
  • Set the chart to indicate the criticality of the data shown in the chart relative to target values or value ranges.

You can choose among the following micro chart types:

  • Area micro chart
  • Bullet micro chart
  • Line micro chart
  • Micro chart/smart micro chart
  • Radial micro chart
  • Stacked bar micro chart
Warning
The user cannot navigate to another page from the chart.

For more information on chart types, see: Choosing the Correct Chart Type.

Related Links