Last Update: July 02, 2022

Platform: Web

Designers: Kathrin Fischer, Paul Hopkins, Anton Fischer

Intro

The Action column pattern describes how we display item-level actions in Responsive Table rows.

Pattern Summary

We put buttons (icon-only and text buttons) that trigger item-level actions into one Responsive Table column at the end of the table.
The buttons are right-aligned within the column and have a spacing of 0.5rem between them.
The action column shows no column header, but we use pseudo-invisible text to provide a label for screen readers
We use tertiary (“Transparent”) button style
The column has high priority, so that we keep the actions from moving into the pop-in area for as long as possible.
If delete and edit, as well as custom actions are available, the order is (left-to-right): [custom action(s)] [edit] [delete]
Keep the number of actions as small as possible, to no more than 3
This pattern is compatible with actions in the table toolbar and other in-column actions

Rationale

The Fiori Guidelines for Responsive Table recommend against adding a specific column for actions. However, we found that in a lot of our UIs, it’s desired to be able to trigger an action from a line item for various reasons:

It’s clumsy to use the table toolbar if the action will mostly be performed on individual items. Users would have to select the item (and potentially unselect other items), then trigger the action from the table toolbar. It feels more immediate to trigger the action from the item itself.
In our solutions, not every object has its own object page that a user could navigate to and that could – in theory – hold more object-specific actions. Moreover, there are performance implications through the back and forth navigation.

Usage

You represent items in a Responsive Table and you have a small number of actions that are used frequently.
The actions relate to the item/table row as a whole.
You want to display up to 3 item-level actions.
The action is used only infrequently. In that case, add it to the Table Toolbar or allow navigation to an Object Page including less-frequently used actions.
The action is usually performed on multiple items. In that case, add it to the table toolbar (and allow multi-selection on the table)
The action is related to one specific column and not the item as a whole. In that case, add the action to the column it relates to (as described in the guideline on Responsive Table)
You want to display more than 3 item-level actions. In that case, add only 3 in the actions column and the others, e.g. to the table toolbar.

Structure and Components

Make sure the table column's horizontal alignment is set to End (i.e. right-aligned in a left-to-right context) and the title is not shown in Popin-Mode
All relevant buttons get added to a horizontal container (sap.m.HBox)
Buttons should use tertiary ("Transparent") style
The order of buttons is to be determined by the designer, however, if either edit or delete (or both) are available, use the order (left to right):
context-specific action, edit, delete
Edit button uses icon sap-icon://edit
Delete button uses icon sap-icon://decline

information

Make sure to set the sap.m.HBox displayInline property to true. Otherwise, it will mess with the column alignment.The spacing between buttons should be 0.5rem. In UI5, this can be achieved by applying CSS-Class sapUiTinyMarginBegin to buttons.

xml

Behavior & Interaction

Make sure buttons are in the correct focus order from left to right (in a left-to-right context).
If actions aren't available for a line item, don’t show them (i.e. hide the button instead of merely disabling it).

Responsiveness and Adaptiveness

The action column should be set to high priority and will thus only go into pop-in only on very small screens. Once in pop-in display, the buttons are left-aligned. Also, don't show a column label.

Application-specific examples (usage in SF modules)

In the Onboarding Dashboard - New Hire Details UI the user finds in the first tap the data collection table with a column for direct actions.

New Hire Detail Page.PNG

Accessibility

We don't display a visible column header, but we do need one for screen readers and valid code structure. In order to achieve both, we add a column header label (“Actions”) and set it to pseudo-invisible.

information

In UI5, this can be achieved by applying class sapUiPseudoInvisibleText to the column header label.