Place actions in the correct level of hierarchy in different UI components.

Chart

Place actions that affect a specific item (or local actions) near the item. Depending on the importance and relevance, actions can be listed in the toolbar of the component or in-line with the item.

Chart Toolbar

Place application-specific actions and general chart actions in the chart toolbar, which is usually mandatory. General chart actions include a perspective switch or title, switch view, show legend, personalize, zoom in/out, enter full-screen mode, and show overflow when there isn’t enough action space.

Order these actions and present them as defined in the Chart Toolbar.

Chart Popover

Actions related to the selected data points in the chart should be placed in the popover, and should be directly triggered from the selection. If there are more than four actions, they should be aggregated using in-place navigation, and if there are less than four, they can be placed at the end of the popover as a list.

For more information, see Popover – Related Actions.

Image

Dialog

If an action affects the entire content of the dialog, place it in the footer of the dialog. It can include actions that determine the follow-up step of the content in the dialog – to finalize the process, to stop the process, or to dismiss the dialog.

If an action only affects a specific item in the dialog, follow the action placement guideline of a component used to present the item.

If you would like more information, you can see Dialog.

Image

Form

Action for a Single Entry

If an action affects a single field in the form, place it close to the field where it makes sense. It can be next to the field, above, or below the field.

Image

Action for Multiple Entries

If an action affects multiple fields in the form, but not the entire page, it can also be placed near the fields.

Image

In case an action affects the entire page, consider placing it in header or footer toolbars.

Popover

Default popover with actions

Popover

A popover is used to show additional information about an object, and it optionally includes related actions.

Consider using an action list to present items instead of a default footer. This can prevent labels from being truncated or items from being hidden under the overflow button.

Table

Many actions can be performed within the table. Users can add a row, perform app-specific operations that affect the entire table or a single item, or change how the table is displayed.

Place them in the correct level of hierarchy in the screen, to set the right focus on the content.

Usage

<div> <div>Action</div> <div>Description</div> <div>Location</div> <div>Example</div> </div> <div> <div>Table actions</div> <div>Actions that affect the entire table or display of the table.</div> <div>Table Toolbar</div> <div> <p>Add an item</p> <p>View Settings (Filter, Sort, Group, Table Personalization)</p> </div> </div> <div> <div> <p>Bulk actions</p> <p>(Multiple row-based actions)</p> </div> <div>Actions that affect multiple selected items in the table. Usually displayed together with table toolbar actions.</div> <div>Table Toolbar</div> <div> <p>Delete selected items</p> <p>Start backup on multiple</p> <p>database instances</p> </div> </div> <div> <div>Column actions</div> <div>Actions that apply to the selected column of the table.</div> <div>Column Header</div> <div> <p>Sort items</p> <p>Perform a data transformation on an entire column of data</p> </div> </div> <div> <div>Single row-based in-line actions</div> <div>Actions that affect a single item in the table. It can be either general table actions or app-specific actions.</div> <div>In-line within the affected row</div> <div> <p>Delete or Edit a single item</p> <p>Navigate to a detailed view of an item</p> <p>Restart a database</p> </div> </div>

Table Toolbar

Both table actions and bulk actions are placed in the right-hand side of the table toolbar, which is positioned in the top of the table.

Guidelines

The content in the toolbar including actions, is arranged in the following order:

For more information, see Table Toolbar.

In-Line Actions

You can add row-specific actions on the right-hand side of the table row. These actions are grouped together under a separate column named “Actions”. The column should be fixed at the end of the row and not be included in the table personalization.

General Table Actions

General table actions such as navigation, deleting, or editing are displayed in icons and positioned on the right-most side of the row, as defined in table properties.

For more information, see Responsive Table – Line Item Level.

App-Defined Actions

The Fiori Design Guidelines suggest placing only one action in each table row. However, we extend this guideline to accommodate complex use cases of Database, Data Management & Analytics products, where users want to perform various actions on a single item without switching the view.

If there’s only one action, place an action in the “Action” column along with general table actions, if exist.

If there are multiple actions with one dominant action (or the most important action), place the dominant action with the text button, and hide others under the overflow button.

If multiple actions have the same importance, place them all under the overflow button.

Use the Contextual Menu to list items that are aggregated under the overflow button.

This component helps organize items in the list by grouping related actions together, separating groups using borders, and hiding repetitive actions with in-place navigation.

Image

Filtering

Contextual vs Global Filters

Filters in Header, Contextual Sorting and Grouping (Hybrid)

Filters in Header

When the page is designed with a single section, either utilizing a table or card layout, and its main objective is to facilitate data filtering, it's advisable to integrate the filtering options directly into the page header. This placement ensures that the filtering controls are immediately accessible and prominently positioned.
Contextual Filtering, Sorting, and
Grouping

Filters in Content

If the page is structured with multiple sections that use tables or card layouts, or if filtering actions are not a primary function of your page, you might want to use content-level filtering. This approach allows users to apply filters within specific sections of the page, rather than applying a global filter that affects the entire page.
2
do
false

Recommended

  • Use filtering in the Page Header when it affects the whole page.
  • When filters are in the Page Header, place sorting and grouping in the Table Header
dont
false

Not Recommended

  • Don't use filtering in the page header when there are multiple tables or sections on the page. Use contextual filtering instead.
  • Do not hide the filters when they are active.

Contextual Menus

Contextual menus allow for actions on-demand relevant to the context, be it a data point, a control, an area or section of the interface, or a particular view. Contextual menus are used to provide shortcuts to frequently used commands that benefit from being closer to the user’s cursor.

Often invoked by a right-click or a menu button (ellipsis, or "•••" icon) on the control itself, this type of menu is most appropriate for business, managing content, managing layout, and generic actions. Workflow actions should be placed in other levels of the hierarchy on the page instead.

Learn more about contextual menus in the Components section.

Action Types

Content-Level Actions

Here are action styles for component-level toolbars.

<div> <div>Type of Action</div> <div>Description</div> <div>Example</div> <div>Button Style</div> </div> <div> <div>Primary</div> <div> <p>Use the emphasized button if there’s one primary action on the page.</p> <p>Consider adding an icon to the emphasized buttons. Otherwise, use the standard button.</p> </div> <div> <p>Create</p> <p>Edit</p> <p>Save</p> </div> <div> <p>Emphasized if there’s one primary action on the page.</p> <p>Otherwise, use the standard button.</p> </div> </div> <div> <div>Secondary</div> <div>All actions that are not primary or negative path actions</div> <div> <p>Copy</p> <p>Save as template</p> </div> <div>Transparent</div> </div> <div> <div>Negative Path</div> <div>Actions that cancel the workflow</div> <div>Cancel</div> <div>Transparent</div> </div>

In-Line Actions

Here are action styles used for in-line actions.

<div> <div>Type of Action</div> <div>Description</div> <div>Example</div> <div>Button Style</div> </div> <div> <div>Primary</div> <div>Most important action</div> <div> <p>Copy ID</p> <p>Edit</p> <p>Purchase</p> <p>Start a database</p> </div> <div>Ghost</div> </div> <div> <div>Secondary</div> <div> <p>Actions that are not primary are usually aggregated under the overflow button.</p> <p>The overflow button also falls into this type.</p> </div> <div></div> <div>Transparent</div> </div>

Resources

Dialog

Table Floorplan

UX Consistency

UXC-014 Action Placement (SAP Wiki)

Action Placement (Fiori Design Guidelines)

Support

If you have any questions or feedback about this page, please contact our team. For further information and questions in regards to the Design System, please visit the DNA Design SharePoint.