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.

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:   .

Conditional Enablement of Navigation Buttons

In list reports and object pages:

• With SAP Fiori elements for OData V4, you can enable buttons that navigate the user to another page or application based on the value of a specific field.
• With SAP Fiori elements for OData V2, this feature requires extensions.

For example, you can enable the Generate Purchase Order button only for sales orders with the completed status.

For more information, see:

• Responsive Table: Select
• Analytical Table: Select
• Grid Table: Select
• Tree Table: Selection Modes

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.

Example

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.

Read-Only Field

With SAP Fiori elements for OData V4, you can set a field to display as read-only in a table, but set it as editable in another place on the UI.

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 and set a tooltip that displays when the focus is on the avatar.

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 a spreadsheet, 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

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

Related Links