The table toolbar always appears above the table. The control is used for key actions that impact the entire table.

Usage

Use the table toolbar if:

• There are multiple objects on your page and you need to edit only a single table.
• You want to show actions as close to their corresponding controls as possible.
• You need a title for your table.

Do not use the table toolbar if:

• You are using single selection and have only one or two actions. In this case, place the actions on each line.

Responsiveness

To enable responsiveness, use the overflow toolbar control. For more information, see Toolbar Overview – Responsiveness.

Components

The table toolbar can contain several components, including a title and several types of button. Actions are grouped by the following action types:

• Finalizing actions, such as Save or Cancel. Finalizing actions are app-specific and are used only if the table is editable.
• Business actions, such as Edit or Create. Business actions can be app-specific or general object management actions.
• Actions for managing the content, such as Sort or Filter. These settings are also known as “view settings”.
• Generic actions, such as Export to Spreadsheet.

Between the groups, add a separator line.

The following content can be part of the table toolbar. Use only the content your users really need. For the remaining content, keep the order shown below:

• Title
• Variant management or content switch (for example, as used to switch between multiple views in a list report)
• Search
• Finalizing actions:
  • Save
  • Cancel
• Business actions: Use this action type for app-specific actions. This group contains:
  • App-specific business actions
  • Actions for object management
    • Create (for new items) or Add (for existing items)
    • Edit
    • Delete (if the object itself is deleted) or Remove (if the reference to an item is removed)
  • Paste

The order of actions in this group is not “fixed”. Place all the business actions, except for Paste, in the order of their importance for the use case. Always keep Paste as the last business action in the group.

Try to keep Create/Add, Edit, and Delete/Remove together, but only if this is meaningful in your app.

• Actions for content management (view settings)
  • Show Details / Hide Details
  • Sort
  • Filter
  • Group
  • Column Settings
• Generic actions
  • Export to Spreadsheet
  • Print
    
• Maximize / Minimize
• View switch (for example, to switch between table and chart view)
• Overflow

Behavior and Interaction

App-Specific Business Actions

If needed, you can define your own actions for the app. In this case, use text-only buttons with a short, unambiguous text for the action the button performs. A button text is usually a single-word verb (for example, Share). Note that text strings can be longer in other languages.

Title

Variant Management

In tables, a variant stores all the settings that define the table view, such as the column layout, column visibility, sorting, filter settings, and grouping. The variant management control enables users to load, save, and change variants. In most cases, variant management replaces the title.

Title and Variant Management

If you need both a title and variant management, place the variant management control directly after the title. Use a separator between the title and variant management.

Since using both controls often leads to truncation problems, this pattern is not recommended.

Content Switch

To switch between different predefined views, use a select control or a segmented button. The content switch replaces the title and the variant management control. In the rare case that the content switch is shown together with a title, the content switch follows the title.

A predefined view contains settings for sorting, filtering, grouping, column layout, and column visibility. Nevertheless, in most cases, the content switch is just used for different filter settings like All, Mine, and Others. In this case, make sure that the content switch doesn’t interfere with other filter settings. For example, remove the corresponding filter from the filter bar. If possible, include an item counter per view.

Another common pattern for content switches are views like By X, and By Y, which are usually defined using group settings.

Use the segmented button and the select control as follows:

• For a limited set of views (2-3), use the segmented button for desktop and tablet devices. Replace it with a select control if there is not enough screen space.
• If the number of views can change or is larger than 3, use the select control.

For more information, see multiple views for list reports.

Search

For tables with a large number of items, consider adding a search field. Use a search field only if there is no other way to search within the table (for example, if there is no additional filter bar).

Place the search field on the right side of the toolbar. Since the search field cannot be moved into the overflow menu, always provide a minimum width.

Ideally, search for results in all columns. As a minimum, search in all currently visible columns.

For more information, see Search.

Edit

There are several options for editing a table:

Edit a Single Item

To allow the user to edit a single item, show an icon-only Edit button at the end of the item (depending on the table control, use sap.m.ListItemBase, property: type, value: sap.m.ListType.Detail or sap.m.ListType.DetailAndActive; or row actions). The user can click the button to trigger the edit event. Use this event to make the item editable.

Mass Editing

See: Mass Editing

Edit the Whole Table

To let the user edit a whole table, use a text-only Edit button. When the user triggers the edit action, switch the table to edit mode. In edit mode, do not show the Edit button and add the finalizing actions Save and Cancel instead. Remove any actions that are meaningless in edit mode. Keep the view settings available.

See also: Object Handling (Create, Edit, Delete)

Create / Add

Delete / Remove

Show Details / Hide Details

Based on the responsive behavior of a table, data can be shown in the pop-in area. With the Hide Details / Show Details segmented button, users can switch between a full data set and a reduced data set.

The tooltip labels are as follows:

• Hide: Show less per row
• Show: Show more per row

This function is part of the view settings group and is displayed at the first position of this group.

For more information, see Smart Table.

Sort, Filter, Group

When the user chooses one of these actions, open the view settings dialog or the P13n Dialog with only the corresponding settings.

• If sorting, filtering, and/or grouping is a common use case in your app, offer one, two, or all three of the corresponding features. Do not provide these features if the table is expected to have only a small number of entries (up to 20 in most cases).
• If filtering is a main use case, do not offer filtering on the table toolbar; use the filter bar instead.

Always use only the view settings you really need. For example, do not offer grouping if it does not support your use case.

Ensure a consistent user experience. When a user reopens the app and if variant management is not used, show the table with the same view settings that were last defined by this user.

For more information, see Table Personalization.

Column Settings

Use the table personalization dialog or the P13n Dialog for adding, removing, and rearranging columns.

Offer column settings if you need more columns than those that fit on a tablet screen (which is usually five) to fulfill 80% of your main use cases. Before you do this, try to reduce the number of columns, for example, by using several lines per column or by using the pop-in feature.

Ensure a consistent user experience. When a user reopens the app and if variant management is not used, show the table with the same column settings that were last defined by this user.

For more information, see Table Personalization.

Export to Spreadsheet

The Export to Spreadsheet action allows the user to export table rows and is represented by an icon-only menu button.

Print

The action for printing table items is represented by an icon-only button.

Maximize / Minimize

To allow the user to show the table in full screen mode (property: ShowFullScreenButton), show the   Maximize button.  The user can exit the full screen by clicking the   Minimize button.

View Switch

View switches are right-aligned in the toolbar and allow the user to switch between different chart types and different controls for displaying items (for example list, responsive table, grid list). Provide the view switch if a chart relies on subtle color differences or gradients of color. In these cases, users with visual impairments can switch to the table view.

Switches are optional and do not have to be provided if there is no need to switch between different charts or tables.

Define the number of chart types and switches with care. Offer only chart types that are meaningful for visualizing the respective data and that best assist the user. Ideally, offer no more than three types of visualization.

The sequence of chart type switches is not fixed. Sort them in order of importance.

The chart type currently in use is highlighted. To show this, use a segmented button with icons.

For more information about the icons and the chart types they represent, see Chart Toolbar.

Overflow

See: Toolbar Overview – Overflow.

Styles

On the table toolbar, use the following button styles:

• If the single primary action for the whole page is on the table toolbar, use the emphasized button style.
• if the single primary action for the whole page is not on the table toolbar, you can still highlight the most important button of the table toolbar by using the ghost button style.
• For secondary actions and negative path actions, use the transparent button style.
• For split buttons and menu buttons, use the transparent button style.
• Do not use semantic button styles on the table toolbar.

For more information, see Button and Action Placement.

Guidelines

To indicate if an action can be applied to the current selection:

• Enable the action if it always works, regardless of whether or not items are selected.
• Enable the action if it can be applied to all selected items.
• Enable the action if it can be applied to some of the selected items. If the action is triggered, show a message that informs the user how many items will be affected. Let the user choose whether to apply the action anyway or cancel the action.
• Only disable the action if:
  • The action can’t be applied to any of the selected items.
  • The number of selected items doesn’t match the action. For example, disable Compare if only one item is selected.

For more details, see UI Element States.

If the items are still available after the action was applied, keep them selected.

For further guidelines, see Toolbar Overview – Guidelines.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.

Usage

Use the tree toolbar if:

• There are multiple objects on your page and you need to edit only a single tree.
• You want to show actions as close to their corresponding controls as possible.
• You need a title for your tree.

Don’t use the tree toolbar if:

• You are using single selection and only one or two actions. In this case, place the actions on each line.

Responsiveness

To enable responsiveness, use the overflow toolbar control. For more information, see Toolbar Overview – Responsiveness.

Components

The tree toolbar can contain several components, including a title and several types of button. Actions are grouped by the following action types:

• Finalizing actions, such as Save or Cancel. Finalizing actions are app-specific, and are used only if the tree is editable.
• Business actions, such as Edit or Create. Business actions can be app-specific or general object management actions. They also include actions for organizing the tree.
• Actions for managing the content, such as Sort or Filter. These settings are also known as “view settings”.
• Actions for managing the layout, such as Maximize or Minimize.
• Generic actions, such as Export to Spreadsheet.

Between the groups, add a separator line.

The following content can be part of the tree toolbar. Use only the content your users really need. For the remaining content, keep the order shown below:

• Title
• Variant management or content switch (for example, as used to switch between multiple views in a list report)
• Search
• Finalizing actions:
  • Save
  • Cancel
• Business actions: Use this action type for app-specific actions. This group contains:
  • App-specific business actions
  • Actions for object management
    • Create (for new items) or Add (for existing items)
    • Edit
    • Delete (if the object itself is deleted) or Remove (if the reference to an item is removed)

The order of actions in this group is not “fixed”. Place the most important action first, followed by the second most important action, and so on. Try to keep Create/Add, Edit, and Delete/Remove together, but only if this is meaningful in your app.

• Actions for organizing the tree:
  • Cut
  • Copy
  • Paste and / or Paste from Spreadsheet
• Actions for content management (view settings):
  • Collapse All / Expand All
  • Sort
  • Filter
  • Group
  • Column Settings
• Actions for managing the layout:
  • Maximize / Minimize
• Generic actions:
  • Export to Spreadsheet
  • Print
• View switch (for example, to switch between tree and chart view)
• Overflow

Behavior and Interaction

App-Specific Business Actions

If needed, you can define your own actions for the app. In this case, use text-only buttons with a short, unambiguous text for the action that the button performs. A button text is usually a single-word verb (for example, Share). Note that text strings can be longer in other languages.

Title

Variant Management

In trees, a variant stores all the settings that define the table view, such as the column layout, column visibility, sorting, filter settings, and grouping. The variant management control enables users to load, save, and change variants. In most cases, variant management replaces the title.

Title and Variant Management

If you need both a title and variant management, place the variant management control directly after the title. Use a separator between the title and variant management.

However, since displaying both the title and variant often results in truncated texts, this pattern is not recommended.

Content Switch

To switch between different predefined views, use a select control or a segmented button. The content switch replaces the title and the variant management control. In the rare case that the content switch is shown together with a title, the content switch follows the title.

A predefined view contains settings for sorting, filtering, grouping, column layout, and column visibility. However, in most cases, the content switch is just used for different filter settings like All, Mine, and Others. In this case, make sure that the content switch doesn’t interfere with other filter settings. For example, remove the corresponding filter from the filter bar. If possible, include an item counter per view.

Another common pattern for content switches are views like By X, and By Y, which are usually defined using group settings.

Use the segmented button and the select control as follows:

• For a limited set of views (2-3), use the segmented button for desktop and tablet devices. Replace it with a select control if there is not enough screen space.
• If the number of views can change or is larger than 3, use the select control.

For more information, see multiple views for list reports.

Search

For trees with a large number of items, consider adding a search field. Use a search field only if there is no other way to search within the tree (for example, if there is no additional filter bar).

Place the search field on the right side of the toolbar. Since the search field cannot be moved into the overflow menu, always provide a minimum width.

Ideally, search for results in all columns. As a minimum, search in all currently visible columns.

For more information, see Search.

Create / Add

Edit

There are several options for editing a tree:

Edit a Single Item

To allow the user to edit a single item, show an icon-only Edit button at the end of the item (depending on the tree control, use sap.m.TreeItemBase, property: type, value: sap.m.ListType.Detail or sap.m.ListType.DetailAndActive; or row actions). The user can click the button to trigger the edit event. Use this event to make the item editable.

Mass Editing

See: Mass Editing

Edit the Whole Tree

To let the user edit a whole tree, use a text-only Edit button. When the user triggers the edit action, switch the table to edit mode. In edit mode, don’t show the Edit button and add the finalizing actions Save and Cancel instead. Remove any actions that are meaningless in edit mode. Keep the view settings available.

More information: Object Handling (Create, Edit, Delete)

Delete / Remove

Cut, Copy, Paste

Use icon-only buttons for Cut and for Copy. Offer these actions if the tree structure is editable. Always pair them with drag and drop.

For Paste, use either an icon-only button or an icon-only menu button. In the menu, offer:

• Paste: to paste cut/copied rows
• Paste from Spreadsheet: to create new rows with data from the clipboard. Since the clipboard can’t be accessed directly, use this button to show a hint on how to paste via shortcut (Ctrl+V) or browser context menu.

When pasting, insert the item(s) in the following position:

• If a single node is selected, insert it as a child item to this node
• If a single leaf is selected, insert it as a sibling to this leaf (within the same node)
• If no item is selected, insert it into the visible “root” node

Collapse All, Expand All

Use icon-only buttons for Collapse All and Expand All.

Collapse All closes all nodes up to the visible root level: only items on the first visible level are shown. Expand All opens all nodes down to the lowest level: all items are visible.

Sort, Filter, Group

When the user chooses one of these actions, open the view settings dialog or the P13n Dialog with only the corresponding settings.

• If sorting, filtering, and/or grouping is a common use case in your app, offer one, two, or all three of the corresponding features. Don’t provide these features if the tree is expected to have only a small number of entries (up to 20 in most cases).
• If filtering is a main use case, don’t offer filtering on the tree toolbar; use the filter bar instead.

Only use the view settings you really need. For example, don’t offer grouping if it doesn’t support your use case.

Ensure a consistent user experience. When a user reopens the app and variant management is not used, show the tree with the same view settings last defined by this user.

For more information, see Table Personalization.

Column Settings

Use the table personalization dialog or the P13n Dialog for adding, removing, and rearranging columns.

Offer column settings if you need more columns than those that fit on a tablet screen (which is usually five) to fulfill 80% of your main use cases.

Ensure a consistent user experience. When a user reopens the app and if variant management is not used, show the tree with the same column settings last defined by this user.

For more information, see Table Personalization.

Maximize / Minimize

Use an icon-only button for Maximize or Minimize. Offer the Maximize button to open the same tree sized to fit the full screen. When maximized, offer the Minimize button to go back to the standard view.

Export to Spreadsheet

The Export to Spreadsheet action allows the user to export table rows. It is represented by an icon-only menu button.

Print

The action for printing tree items is represented by an icon-only button.

View Switch

View switches are right-aligned in the toolbar and allow the user to switch between different chart types and different controls for displaying items (for example list, grid list, tree, tree table). Provide the view switch if a chart relies on subtle color differences or gradients of color. In these cases, users with visual impairments can switch to the tree view.

Switches are optional: they don’t have to be provided if there is no need to switch between different charts or trees.

Define the number of chart types and switches with care. Offer only chart types that help to visualize the respective data and that best assist the user. Ideally, offer no more than three types of visualization.

The sequence of chart type switches is not fixed. Sort them in order of importance.

The chart type currently in use is highlighted. To show this, use a segmented button with icons.

For more information about the icons and the chart types they represent, see Chart Toolbar.

Overflow

More information: Toolbar Overview – Overflow.

Styles

On the tree toolbar, use the following button styles:

• If the single primary action for the whole page is on the tree toolbar, use the emphasized button style.
• if the single primary action for the whole page is not on the tree toolbar, you can still highlight the most important button by using the ghost button style.
• For secondary actions and negative path actions, use the transparent button style.
• For split buttons and menu buttons, use the transparent button style.
• Don’t use semantic button styles on the tree toolbar.

For more information, see Button and Action Placement.

Guidelines

To indicate if an action can be applied to the current selection:

• Enable the action if it always works, regardless of whether or not items are selected.
• Enable the action if it can be applied to all selected items.
• Enable the action if it can be applied to some of the selected items. If the action is triggered, show a message that informs the user how many items are affected. Let the user choose whether to apply the action anyway or cancel it.
• Only disable the action if it can be applied to none of the selected items.

For more information, see UI Element States.

If the items are still available after the action was applied, keep them selected.

For further guidelines, see Toolbar Overview – Guidelines.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The table toolbar always appears above the table. The control is used for key actions that impact the entire table.

Usage

Use the table toolbar if:

• There are multiple objects on your page and you need to edit only a single table.
• You want to show actions as close to their corresponding controls as possible.
• You need a title for your table.

Do not use the table toolbar if:

• You are using single selection and have only one or two actions. In this case, place the actions on each line.

Responsiveness

To enable responsiveness, use the overflow toolbar control. For more information, see Toolbar Overview – Responsiveness.

Components

The table toolbar can contain several components, including a title and several types of button. Actions are grouped by the following action types:

• Finalizing actions, such as Save or Cancel. Finalizing actions are app-specific and are used only if the table is editable.
• Business actions, such as Edit or Create. Business actions can be app-specific or general object management actions.
• Actions for managing the content, such as Sort or Filter. These settings are also known as “view settings”.
• Generic actions, such as Export to Spreadsheet.

Between the groups, add a separator line.

The following content can be part of the table toolbar. Use only the content your users really need. For the remaining content, keep the order shown below:

• Title
• Variant management or content switch (for example, as used to switch between multiple views in a list report)
• Search
• Finalizing actions:
  • Save
  • Cancel
• Business actions: Use this action type for app-specific actions. This group contains:
  • App-specific business actions
  • Actions for object management
    • Create (for new items) or Add (for existing items)
    • Edit
    • Delete (if the object itself is deleted) or Remove (if the reference to an item is removed)
  • Paste

The order of actions in this group is not “fixed”. Place all the business actions, except for Paste, in the order of their importance for the use case. Always keep Paste as the last business action in the group.

Try to keep Create/Add, Edit, and Delete/Remove together, but only if this is meaningful in your app.

• Actions for content management (view settings)
  • Show Details / Hide Details
  • Sort
  • Filter
  • Group
  • Column Settings
• Generic actions
  • Export to Spreadsheet
  • Print
    
• Maximize / Minimize
• View switch (for example, to switch between table and chart view)
• Overflow

Behavior and Interaction

App-Specific Business Actions

If needed, you can define your own actions for the app. In this case, use text-only buttons with a short, unambiguous text for the action the button performs. A button text is usually a single-word verb (for example, Share). Note that text strings can be longer in other languages.

Title

Variant Management

In tables, a variant stores all the settings that define the table view, such as the column layout, column visibility, sorting, filter settings, and grouping. The variant management control enables users to load, save, and change variants. In most cases, variant management replaces the title.

Title and Variant Management

If you need both a title and variant management, place the variant management control directly after the title. Use a separator between the title and variant management.

Since using both controls often leads to truncation problems, this pattern is not recommended.

Content Switch

To switch between different predefined views, use a select control or a segmented button. The content switch replaces the title and the variant management control. In the rare case that the content switch is shown together with a title, the content switch follows the title.

A predefined view contains settings for sorting, filtering, grouping, column layout, and column visibility. Nevertheless, in most cases, the content switch is just used for different filter settings like All, Mine, and Others. In this case, make sure that the content switch doesn’t interfere with other filter settings. For example, remove the corresponding filter from the filter bar. If possible, include an item counter per view.

Another common pattern for content switches are views like By X, and By Y, which are usually defined using group settings.

Use the segmented button and the select control as follows:

• For a limited set of views (2-3), use the segmented button for desktop and tablet devices. Replace it with a select control if there is not enough screen space.
• If the number of views can change or is larger than 3, use the select control.

For more information, see multiple views for list reports.

Search

For tables with a large number of items, consider adding a search field. Use a search field only if there is no other way to search within the table (for example, if there is no additional filter bar).

Place the search field on the right side of the toolbar. Since the search field cannot be moved into the overflow menu, always provide a minimum width.

Ideally, search for results in all columns. As a minimum, search in all currently visible columns.

For more information, see Search.

Edit

There are several options for editing a table:

Edit a Single Item

To allow the user to edit a single item, show an icon-only Edit button at the end of the item (depending on the table control, use sap.m.ListItemBase, property: type, value: sap.m.ListType.Detail or sap.m.ListType.DetailAndActive; or row actions). The user can click the button to trigger the edit event. Use this event to make the item editable.

Mass Editing

See: Mass Editing

Edit the Whole Table

To let the user edit a whole table, use a text-only Edit button. When the user triggers the edit action, switch the table to edit mode. In edit mode, do not show the Edit button and add the finalizing actions Save and Cancel instead. Remove any actions that are meaningless in edit mode. Keep the view settings available.

See also: Object Handling (Create, Edit, Delete)

Create / Add

Delete / Remove

Show Details / Hide Details

Based on the responsive behavior of a table, data can be shown in the pop-in area. With the Show Details / Hide Details function, users can switch between a full data set or a reduced data set.

This function is part of the view settings group and is displayed at the first position of this group.

For more information, see Smart Table.

Sort, Filter, Group

When the user chooses one of these actions, open the view settings dialog or the P13n Dialog with only the corresponding settings.

• If sorting, filtering, and/or grouping is a common use case in your app, offer one, two, or all three of the corresponding features. Do not provide these features if the table is expected to have only a small number of entries (up to 20 in most cases).
• If filtering is a main use case, do not offer filtering on the table toolbar; use the filter bar instead.

Always use only the view settings you really need. For example, do not offer grouping if it does not support your use case.

Ensure a consistent user experience. When a user reopens the app and if variant management is not used, show the table with the same view settings that were last defined by this user.

For more information, see Table Personalization.

Column Settings

Use the table personalization dialog or the P13n Dialog for adding, removing, and rearranging columns.

Offer column settings if you need more columns than those that fit on a tablet screen (which is usually five) to fulfill 80% of your main use cases. Before you do this, try to reduce the number of columns, for example, by using several lines per column or by using the pop-in feature.

Ensure a consistent user experience. When a user reopens the app and if variant management is not used, show the table with the same column settings that were last defined by this user.

For more information, see Table Personalization.

Export to Spreadsheet

The Export to Spreadsheet action allows the user to export table rows and is represented by an icon-only menu button.

Print

The action for printing table items is represented by an icon-only button.

Maximize / Minimize

To allow the user to show the table in full screen mode (property: ShowFullScreenButton), show the   Maximize button.  The user can exit the full screen by clicking the   Minimize button.

View Switch

View switches are right-aligned in the toolbar and allow the user to switch between different chart types and different controls for displaying items (for example list, responsive table, grid list). Provide the view switch if a chart relies on subtle color differences or gradients of color. In these cases, users with visual impairments can switch to the table view.

Switches are optional and do not have to be provided if there is no need to switch between different charts or tables.

Define the number of chart types and switches with care. Offer only chart types that are meaningful for visualizing the respective data and that best assist the user. Ideally, offer no more than three types of visualization.

The sequence of chart type switches is not fixed. Sort them in order of importance.

The chart type currently in use is highlighted. To show this, use a segmented button with icons.

For more information about the icons and the chart types they represent, see Chart Toolbar.

Overflow

See: Toolbar Overview – Overflow.

Styles

On the table toolbar, use the following button styles:

• If the single primary action for the whole page is on the table toolbar, use the emphasized button style.
• if the single primary action for the whole page is not on the table toolbar, you can still highlight the most important button of the table toolbar by using the ghost button style.
• For secondary actions and negative path actions, use the transparent button style.
• For split buttons and menu buttons, use the transparent button style.
• Do not use semantic button styles on the table toolbar.

For more information, see Button and Action Placement.

Guidelines

To indicate if an action can be applied to the current selection:

• Enable the action if it always works, regardless of whether or not items are selected.
• Enable the action if it can be applied to all selected items.
• Enable the action if it can be applied to some of the selected items. If the action is triggered, show a message that informs the user how many items will be affected. Let the user choose whether to apply the action anyway or cancel the action.
• Only disable the action if:
  • The action can’t be applied to any of the selected items.
  • The number of selected items doesn’t match the action. For example, disable Compare if only one item is selected.

For more details, see UI Element States.

If the items are still available after the action was applied, keep them selected.

For further guidelines, see Toolbar Overview – Guidelines.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible and will not scroll away. It contains actions that are relevant for the entire page.

Our general guideline is to use only icon buttons or text buttons. Icon and text should not be combined into one button. Buttons are always right-aligned.

Buttons are sorted from frequently-used to seldom-used. This ensures that the most important buttons go into the overflow last.

Usage

Use the header toolbar if:

• Your page contains several controls, and the actions are valid for the entire page.

Do not use the header toolbar if:

• You have closing or finalizing actions for the whole page. Place them in the footer toolbar instead.
• You have actions that belong to a specific UI element. Place them as close as possible to the corresponding object (for example, in a table or chart toolbar).

Responsiveness

To enable responsiveness, use the OverflowToolbar control. For more information, see the corresponding section in the Toolbar Overview article.

The height of the toolbar changes on desktops (compact mode), tablets, and smartphones (cozy mode). For more information about cozy and compact modes, see Content Density.

Components

The header toolbar can contain the following components:

• App-specific business actions
• Generic actions

The following actions count as generic:

• Flag and Favorite
• Share menu
• Overflow
• Paging

Behavior and Interaction

Business Actions

If needed, the app team can define their own actions for the app. In this case, the text buttons should contain a short, unambiguous text that explains what action the button performs. A button text is usually a single-word verb (for example, Synchronize). Note that translated UIs may increase the length of the text string.

Text vs. Icon Buttons

Use text-only buttons for all business actions (such as Edit and Create).
Use icon buttons only for generic actions (such as  for Share). For icons, always provide a suitable text label as a tooltip.

Edit and Delete (1)

If you want to perform a global edit action, use the Edit button.

If you want to perform a global delete action, use the Delete button.

Add / Create (2)

Place the Add or Create (item or row) action as close to the content as possible.

If the Add or Create action is a main function, don’t move the action into the overflow.

For more information on when to use add or create, see UI Text Guidelines. 

Favorite and Flag (Generic) (3)

Users can mark objects as a favorite or flag objects for quick subsequent retrieval. The user does this by clicking the relevant generic Favorite or Flag button in the header toolbar. For more information, see Flag and Favorite.

Share (Generic) (4)

The Share menu allows users to work with content outside the app they are currently using. It can include a variety of actions. All the buttons contain either text only or a combination of an icon and text. The following actions can be used and complemented by each app:

• Send Email (icon: email  )
• Discuss in SAP Jam (icon: discussion-2  )
• Share in SAP Jam (icon: share-2  )
• Send Message (icon: post  )
• Save as Tile (icon: add favorite  )
• Print (icon: print  )
• Export as Excel (icon: Excel attachment  )
• Export as PDF (icon: pdf attachment  )
• Export As…
• Open In…

If you expect the user to use the Open In… functionality frequently, place it directly in the header toolbar.

The Share action can appear on the full screen or the details screen, and is never moved into the overflow menu. It is always right-aligned. The overflow starts to the right side of the Share icon.

Overflow (Generic) (5)

If apps use the overflow toolbar, the overflow is generated automatically. The overflow is activated if there is not enough space for all the actions on the toolbar, or if some actions are considered less important than others. In this case, the app team decides that only certain actions appear in the overflow.

The app team also decides whether some actions are so important that they should never move into the overflow.

The  “…” (overflow) button can be used to toggle the overflow menu on and off.

The user clicks the overflow button to open a popover. In this action sheet, all icon buttons are labeled with text and the user can overflow the following controls:

• sap.m.SegmentedButton – when in the overflow, the segmented button is in select mode and looks like a select button, although it is technically still a segmented button
• sap.m.Select – when in the overflow, it is always in default mode to take advantage of the extra space, even if it was set to icon-only mode in the toolbar
• sap.m.ToggleButton
• sap.m.Checkbox
• sap.m.Input
• sap.m.SearchField
• sap.m.ComboBox
• sap.m.DateTimeInput

Split-screen layouts have their own overflow menus.

All buttons go into the overflow from right to left. This ensures that the most important buttons are the last to be moved into the overflow menu.

Paging (Layout)

Use the paging buttons if you want to navigate to the previous or next object.

Use the following tooltip labels:

• Icon: Up arrow
  Tooltip label: Previous [Object]
  Example: Previous Purchase Order Item
• Icon: Down arrow
  Tooltip label: Next [Object]
  Example: Next Purchase Order Item

To avoid translation issues, never use “Next” and “Previous” as standalone labels. Always state the object you are navigating to.

If you are using the Share button, place paging buttons to the right of the Share button.

Styles

• Use button styles only if they help the user, and not for decoration.
• Use them for primary actions, such as Edit and Create.
• Use a positive/negative style (property: type = accept or reject) or an emphasized style (property: type = emphasized).
• Use only one emphasized button per toolbar and never mix emphasized and semantic buttons.
  Exception 1: Messaging button appears
  Exception 2: Object has been flagged or marked as a favorite

For more information, see Button.

Guidelines

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The table toolbar always appears above the table. The control is used for key actions that impact the entire table.

Usage

Use the table toolbar if:

• There are multiple objects on your page and you need to edit only a single table.
• You want to show actions as close to their corresponding controls as possible.
• You need a title for your table.

Do not use the table toolbar if:

• You are using single selection and have only one or two actions. In this case, place the actions on each line.

Responsiveness

To enable responsiveness, use the overflow toolbar control. For more information, see Toolbar Overview – Responsiveness.

Components

The table toolbar can contain several components, including a title and several types of button. Actions are grouped by the following action types:

• Finalizing actions, such as Save or Cancel. Finalizing actions are app-specific and are used only if the table is editable.
• Business actions, such as Edit or Create. Business actions can be app-specific or general object management actions.
• Actions for managing the content, such as Sort or Filter. These settings are also known as “view settings”.
• Generic actions, such as Export to Spreadsheet.

Between the groups, add a separator line.

The following content can be part of the table toolbar. Use only the content your users really need. For the remaining content, keep the order shown below:

• Title
• Variant management or content switch (for example, as used to switch between multiple views in a list report)
• Search
• Finalizing actions:
  • Save
  • Cancel
• Business actions: Use this action type for app-specific actions. This group contains:
  • App-specific business actions
  • Actions for object management
    • Create (for new items) or Add (for existing items)
    • Edit
    • Delete (if the object itself is deleted) or Remove (if the reference to an item is removed)
  • Paste

The order of actions in this group is not “fixed”. Place the most important action first, followed by the second most important action, an so on. Try to keep Create/Add, Edit, and Delete/Remove together, but only if this is meaningful in your app.
Exception: Keep Paste as the last action in this category.

• Actions for content management (view settings)
  • Show Details / Hide Details
  • Sort
  • Filter
  • Group
  • Column Settings
• Generic actions
  • Export to Spreadsheet
  • Print
    
• Maximize / Minimize
• View switch (for example, to switch between table and chart view)
• Overflow

Behavior and Interaction

App-Specific Business Actions

If needed, you can define your own actions for the app. In this case, use text-only buttons with a short, unambiguous text for the action the button performs. A button text is usually a single-word verb (for example, Share). Note that text strings can be longer in other languages.

Title

Variant Management

In tables, a variant stores all the settings that define the table view, such as the column layout, column visibility, sorting, filter settings, and grouping. The variant management control enables users to load, save, and change variants. In most cases, variant management replaces the title.

Title and Variant Management

If you need both a title and variant management, place the variant management control directly after the title. Use a separator between the title and variant management.

Since using both controls often leads to truncation problems, this pattern is not recommended.

Content Switch

To switch between different predefined views, use a select control or a segmented button. The content switch replaces the title and the variant management control. In the rare case that the content switch is shown together with a title, the content switch follows the title.

A predefined view contains settings for sorting, filtering, grouping, column layout, and column visibility. Nevertheless, in most cases, the content switch is just used for different filter settings like All, Mine, and Others. In this case, make sure that the content switch doesn’t interfere with other filter settings. For example, remove the corresponding filter from the filter bar. If possible, include an item counter per view.

Another common pattern for content switches are views like By X, and By Y, which are usually defined using group settings.

Use the segmented button and the select control as follows:

• For a limited set of views (2-3), use the segmented button for desktop and tablet devices. Replace it with a select control if there is not enough screen space.
• If the number of views can change or is larger than 3, use the select control.

For more information, see multiple views for list reports.

Search

For tables with a large number of items, consider adding a search field. Use a search field only if there is no other way to search within the table (for example, if there is no additional filter bar).

Place the search field on the right side of the toolbar. Since the search field cannot be moved into the overflow menu, always provide a minimum width.

Ideally, search for results in all columns. As a minimum, search in all currently visible columns.

For more information, see Search.

Edit

There are several options for editing a table:

Edit a Single Item

To allow the user to edit a single item, show an icon-only Edit button at the end of the item (depending on the table control, use sap.m.ListItemBase, property: type, value: sap.m.ListType.Detail or sap.m.ListType.DetailAndActive; or row actions). The user can click the button to trigger the edit event. Use this event to make the item editable.

Mass Editing

See: Mass Editing

Edit the Whole Table

To let the user edit a whole table, use a text-only Edit button. When the user triggers the edit action, switch the table to edit mode. In edit mode, do not show the Edit button and add the finalizing actions Save and Cancel instead. Remove any actions that are meaningless in edit mode. Keep the view settings available.

See also: Object Handling (Create, Edit, Delete)

Create / Add

Delete / Remove

Show Details / Hide Details

Based on the responsive behavior of a table, data can be shown in the pop-in area. With the Show Details / Hide Details function, users can switch between a full data set or a reduced data set.

This function is part of the view settings group and is displayed at the first position of this group.

For more information, see Smart Table.

Sort, Filter, Group

When the user chooses one of these actions, open the view settings dialog or the P13n Dialog with only the corresponding settings.

• If sorting, filtering, and/or grouping is a common use case in your app, offer one, two, or all three of the corresponding features. Do not provide these features if the table is expected to have only a small number of entries (up to 20 in most cases).
• If filtering is a main use case, do not offer filtering on the table toolbar; use the filter bar instead.

Always use only the view settings you really need. For example, do not offer grouping if it does not support your use case.

Ensure a consistent user experience. When a user reopens the app and if variant management is not used, show the table with the same view settings that were last defined by this user.

For more information, see Table Personalization.

Column Settings

Use the table personalization dialog or the P13n Dialog for adding, removing, and rearranging columns.

Offer column settings if you need more columns than those that fit on a tablet screen (which is usually five) to fulfill 80% of your main use cases. Before you do this, try to reduce the number of columns, for example, by using several lines per column or by using the pop-in feature.

Ensure a consistent user experience. When a user reopens the app and if variant management is not used, show the table with the same column settings that were last defined by this user.

For more information, see Table Personalization.

Export to Spreadsheet

The Export to Spreadsheet action allows the user to export table rows and is represented by an icon-only menu button.

Print

The action for printing table items is represented by an icon-only button.

Maximize / Minimize

To allow the user to show the table in full screen mode (property: ShowFullScreenButton), show the   Maximize button.  The user can exit the full screen by clicking the   Minimize button.

View Switch

View switches are right-aligned in the toolbar and allow the user to switch between different chart types and different controls for displaying items (for example list, responsive table, grid list). Provide the view switch if a chart relies on subtle color differences or gradients of color. In these cases, users with visual impairments can switch to the table view.

Switches are optional and do not have to be provided if there is no need to switch between different charts or tables.

Define the number of chart types and switches with care. Offer only chart types that are meaningful for visualizing the respective data and that best assist the user. Ideally, offer no more than three types of visualization.

The sequence of chart type switches is not fixed. Sort them in order of importance.

The chart type currently in use is highlighted. To show this, use a segmented button with icons.

For more information about the icons and the chart types they represent, see Chart Toolbar.

Overflow

See: Toolbar Overview – Overflow.

Styles

On the table toolbar, use the following button styles:

• If the single primary action for the whole page is on the table toolbar, use the emphasized button style.
• if the single primary action for the whole page is not on the table toolbar, you can still highlight the most important button of the table toolbar by using the ghost button style.
• For secondary actions and negative path actions, use the transparent button style.
• For split buttons and menu buttons, use the transparent button style.
• Do not use semantic button styles on the table toolbar.

For more information, see Button and Action Placement.

Guidelines

To indicate if an action can be applied to the current selection:

• Enable the action if it always works, regardless of whether or not items are selected.
• Enable the action if it can be applied to all selected items.
• Enable the action if it can be applied to some of the selected items. If the action is triggered, show a message that informs the user how many items will be affected. Let the user choose whether to apply the action anyway or cancel the action.
• Only disable the action if:
  • The action can’t be applied to any of the selected items.
  • The number of selected items doesn’t match the action. For example, disable Compare if only one item is selected.

For more details, see UI Element States.

If the items are still available after the action was applied, keep them selected.

For further guidelines, see Toolbar Overview – Guidelines.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The chart toolbar acts as a container for charts.

The width and height of the chart container are never defined by the app, but are always set by the container itself (as explained in Size of the Chart Container).

The toolbar is mandatory. Small charts or micro charts, such as dashboards, table cells, and small frames are an exception to this rule. In these cases, the developer must provide a consistent UI to enable action on the chart.

The toolbar is always placed on top of the chart. It provides actions such as multiple box selection for selecting dimensions, full screen format, personalization actions, and a toggle function for showing and hiding legends.

Responsiveness

The chart container uses the sap.m.OverflowToolbar control. It is a container based on sap.m.Toolbar that provides overflow when its content does not fit in the visible area. For more information, please refer to the toolbar overview article (under Responsiveness).

Components

Behavior and Interaction

Business Actions (app-specific)

Title

A title provides a short, meaningful summary of the content, often in a single word. To display a title, use the title control.

Use a title if you need the chart toolbar, and if the title of the chart is not indicated in the surrounding area. Note that the title is truncated if there is not enough space.

Variant Management

In charts, a variant stores all the settings that define the chart view (for example, the selected dimensions and the sort and filter settings). The variant management control enables users to load, save, and change variants. In most cases, variant management replaces the title.

Title and Variant Management

If you need both a title and variant management, place the variant management control directly after the title. Use a separator between the title and variant management.

Since using both controls often leads to truncation problems, this pattern is not recommended.

Perspective Switch

The perspective switch is left-aligned in the toolbar. It can be used to switch between different dimensions. We recommend using a select control, but any other dropdown control can be used as well. The perspective switch replaces the title and the variant management control.

For SAP Smart Business apps, the view incorporates and defines the chart description, the dimension, the measure, and the defaulted chart type. The various views are preconfigured and maintained by an SAP Smart Business administrator.

Ensure that all switches have a meaningful title. We recommend using a short chart description followed by the dimensions:

You also have the option of extending the perspective switch if the app needs to switch between specific subdimensions. The number of dimensions and subdimensions that are needed depends on the app.

If the app does not need a perspective switch, use the chart title (property: title).

Legend (Generic)

The Legend button (property: ShowLegend) is the first generic action. The user clicks this button to hide or show the chart legend.

The legend also allows the user to select or deselect data points.

Zoom In/Zoom Out

We recommend offering the zoom feature on the chart toolbar. Two icon buttons depicting a magnifying glass are then displayed. When the user clicks the Zoom In or Zoom Out button, the chart zooms accordingly.

Settings

You can add a Settings button to the chart toolbar to enable app-specific settings (property: ShowPersonalization). The corresponding popover or dialog must also be implemented by the app team.

We do not recommend using this feature. If you do choose to use it, exercise caution. Bear in mind that the perspective switch feature already allows preconfiguration of several combinations of dimensions, measures, and chart type selections.

When viewing charts, users do not usually want to think about which chart types, dimensions, or measures are most suitable in a particular use case. Instead, decide on the most valuable chart/dataset combinations for the end user beforehand and provide users with the most appropriate preconfigured chart view.

View Switch (Generic)

View Switch – Switch Between Chart and Table

The view switch allows you to switch easily between tables and charts.

Some actions are only available in certain views. For example, the Legend icon is only visible in the chart view. If the user selects the table view, the Filter action is visible and the Legend icon is hidden.

Icon Usage

Each visualization of a chart is represented by an icon. The icon explorer helps you to find the most appropriate icon.

Maximize / Minimize

In addition to zooming, the app can use the full screen mode of the chart container (property: FullScreen).

The user can open the chart in a full screen dialog via this toggle button. When the chart is maximized, the    Maximize button is replaced by a corresponding    Minimize button.

Overflow (Generic)

See Overflow in the Toolbar Overview article.

Guidelines

See the detailed Guidelines section in the Toolbar Overview article.

Additional Guidelines

• Think carefully about what actions you really need in the chart toolbar – do not overload the toolbar with actions.
• Try to put the actions as close to the content as possible.
• Use appropriate tooltips to label icon buttons in the chart toolbar.

Resources

The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.

Usage

Use the tree toolbar if:

• There are multiple objects on your page and you need to edit only a single tree.
• You want to show actions as close to their corresponding controls as possible.
• You need a title for your tree.

Don’t use the tree toolbar if:

• You are using single selection and only one or two actions. In this case, place the actions on each line.

Responsiveness

To enable responsiveness, use the overflow toolbar control. For more information, see Toolbar Overview – Responsiveness.

Components

The tree toolbar can contain several components, including a title and several types of button. Actions are grouped by the following action types:

• Finalizing actions, such as Save or Cancel. Finalizing actions are app-specific, and are used only if the tree is editable.
• Business actions, such as Edit or Create. Business actions can be app-specific or general object management actions. They also include actions for organizing the tree.
• Actions for managing the content, such as Sort or Filter. These settings are also known as “view settings”.
• Actions for managing the layout, such as Maximize or Minimize.
• Generic actions, such as Export to Spreadsheet.

Between the groups, add a separator line.

The following content can be part of the tree toolbar. Use only the content your users really need. For the remaining content, keep the order shown below:

• Title
• Variant management or content switch (for example, as used to switch between multiple views in a list report)
• Search
• Finalizing actions:
  • Save
  • Cancel
• Business actions: Use this action type for app-specific actions. This group contains:
  • App-specific business actions
  • Actions for object management
    • Create (for new items) or Add (for existing items)
    • Edit
    • Delete (if the object itself is deleted) or Remove (if the reference to an item is removed)

The order of actions in this group is not “fixed”. Place the most important action first, followed by the second most important action, and so on. Try to keep Create/Add, Edit, and Delete/Remove together, but only if this is meaningful in your app.

• Actions for organizing the tree:
  • Cut
  • Copy
  • Paste and / or Paste from Spreadsheet
• Actions for content management (view settings):
  • Collapse All / Expand All
  • Sort
  • Filter
  • Group
  • Column Settings
• Actions for managing the layout:
  • Maximize / Minimize
• Generic actions:
  • Export to Spreadsheet
  • Print
• View switch (for example, to switch between tree and chart view)
• Overflow

Behavior and Interaction

App-Specific Business Actions

If needed, you can define your own actions for the app. In this case, use text-only buttons with a short, unambiguous text for the action that the button performs. A button text is usually a single-word verb (for example, Share). Note that text strings can be longer in other languages.

Title

Variant Management

In trees, a variant stores all the settings that define the table view, such as the column layout, column visibility, sorting, filter settings, and grouping. The variant management control enables users to load, save, and change variants. In most cases, variant management replaces the title.

Title and Variant Management

If you need both a title and variant management, place the variant management control directly after the title. Use a separator between the title and variant management.

However, since displaying both the title and variant often results in truncated texts, this pattern is not recommended.

Content Switch

To switch between different predefined views, use a select control or a segmented button. The content switch replaces the title and the variant management control. In the rare case that the content switch is shown together with a title, the content switch follows the title.

A predefined view contains settings for sorting, filtering, grouping, column layout, and column visibility. However, in most cases, the content switch is just used for different filter settings like All, Mine, and Others. In this case, make sure that the content switch doesn’t interfere with other filter settings. For example, remove the corresponding filter from the filter bar. If possible, include an item counter per view.

Another common pattern for content switches are views like By X, and By Y, which are usually defined using group settings.

Use the segmented button and the select control as follows:

• For a limited set of views (2-3), use the segmented button for desktop and tablet devices. Replace it with a select control if there is not enough screen space.
• If the number of views can change or is larger than 3, use the select control.

For more information, see multiple views for list reports.

Search

For trees with a large number of items, consider adding a search field. Use a search field only if there is no other way to search within the tree (for example, if there is no additional filter bar).

Place the search field on the right side of the toolbar. Since the search field cannot be moved into the overflow menu, always provide a minimum width.

Ideally, search for results in all columns. As a minimum, search in all currently visible columns.

For more information, see Search.

Create / Add

Edit

There are several options for editing a tree:

Edit a Single Item

To allow the user to edit a single item, show an icon-only Edit button at the end of the item (depending on the tree control, use sap.m.TreeItemBase, property: type, value: sap.m.ListType.Detail or sap.m.ListType.DetailAndActive; or row actions). The user can click the button to trigger the edit event. Use this event to make the item editable.

Mass Editing

See: Mass Editing

Edit the Whole Tree

To let the user edit a whole tree, use a text-only Edit button. When the user triggers the edit action, switch the table to edit mode. In edit mode, don’t show the Edit button and add the finalizing actions Save and Cancel instead. Remove any actions that are meaningless in edit mode. Keep the view settings available.

More information: Object Handling (Create, Edit, Delete)

Delete / Remove

Cut, Copy, Paste

Use icon-only buttons for Cut and for Copy. Offer these actions if the tree structure is editable. Always pair them with drag and drop.

For Paste, use either an icon-only button or an icon-only menu button. In the menu, offer:

• Paste: to paste cut/copied rows
• Paste from Spreadsheet: to create new rows with data from the clipboard. Since the clipboard can’t be accessed directly, use this button to show a hint on how to paste via shortcut (Ctrl+V) or browser context menu.

When pasting, insert the item(s) in the following position:

• If a single node is selected, insert it as a child item to this node
• If a single leaf is selected, insert it as a sibling to this leaf (within the same node)
• If no item is selected, insert it into the visible “root” node

Collapse All, Expand All

Use icon-only buttons for Collapse All and Expand All.

Collapse All closes all nodes up to the visible root level: only items on the first visible level are shown. Expand All opens all nodes down to the lowest level: all items are visible.

Sort, Filter, Group

When the user chooses one of these actions, open the view settings dialog or the P13n Dialog with only the corresponding settings.

• If sorting, filtering, and/or grouping is a common use case in your app, offer one, two, or all three of the corresponding features. Don’t provide these features if the tree is expected to have only a small number of entries (up to 20 in most cases).
• If filtering is a main use case, don’t offer filtering on the tree toolbar; use the filter bar instead.

Only use the view settings you really need. For example, don’t offer grouping if it doesn’t support your use case.

Ensure a consistent user experience. When a user reopens the app and variant management is not used, show the tree with the same view settings last defined by this user.

For more information, see Table Personalization.

Column Settings

Use the table personalization dialog or the P13n Dialog for adding, removing, and rearranging columns.

Offer column settings if you need more columns than those that fit on a tablet screen (which is usually five) to fulfill 80% of your main use cases.

Ensure a consistent user experience. When a user reopens the app and if variant management is not used, show the tree with the same column settings last defined by this user.

For more information, see Table Personalization.

Maximize / Minimize

Use an icon-only button for Maximize or Minimize. Offer the Maximize button to open the same tree sized to fit the full screen. When maximized, offer the Minimize button to go back to the standard view.

Export to Spreadsheet

The Export to Spreadsheet action allows the user to export table rows. It is represented by an icon-only menu button.

Print

The action for printing tree items is represented by an icon-only button.

View Switch

View switches are right-aligned in the toolbar and allow the user to switch between different chart types and different controls for displaying items (for example list, grid list, tree, tree table). Provide the view switch if a chart relies on subtle color differences or gradients of color. In these cases, users with visual impairments can switch to the tree view.

Switches are optional: they don’t have to be provided if there is no need to switch between different charts or trees.

Define the number of chart types and switches with care. Offer only chart types that help to visualize the respective data and that best assist the user. Ideally, offer no more than three types of visualization.

The sequence of chart type switches is not fixed. Sort them in order of importance.

The chart type currently in use is highlighted. To show this, use a segmented button with icons.

For more information about the icons and the chart types they represent, see Chart Toolbar.

Overflow

More information: Toolbar Overview – Overflow.

Styles

On the tree toolbar, use the following button styles:

• If the single primary action for the whole page is on the tree toolbar, use the emphasized button style.
• if the single primary action for the whole page is not on the tree toolbar, you can still highlight the most important button by using the ghost button style.
• For secondary actions and negative path actions, use the transparent button style.
• For split buttons and menu buttons, use the transparent button style.
• Don’t use semantic button styles on the tree toolbar.

For more information, see Button and Action Placement.

Guidelines

To indicate if an action can be applied to the current selection:

• Enable the action if it always works, regardless of whether or not items are selected.
• Enable the action if it can be applied to all selected items.
• Enable the action if it can be applied to some of the selected items. If the action is triggered, show a message that informs the user how many items are affected. Let the user choose whether to apply the action anyway or cancel it.
• Only disable the action if it can be applied to none of the selected items.

For more information, see UI Element States.

If the items are still available after the action was applied, keep them selected.

For further guidelines, see Toolbar Overview – Guidelines.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The table toolbar always appears above the table. The control is used for key actions that impact the entire table.

Usage

Use the table toolbar if:

• There are multiple objects on your page and you need to edit only a single table.
• You want to show actions as close to their corresponding controls as possible.
• You need a title for your table.

Do not use the table toolbar if:

• You are using single selection and have only one or two actions. In this case, place the actions on each line.

Responsiveness

To enable responsiveness, use the overflow toolbar control. For more information, see Toolbar Overview – Responsiveness.

Components

The table toolbar can contain several components, including a title and several types of button. Actions are grouped by the following action types:

• Finalizing actions, such as Save or Cancel. Finalizing actions are app-specific and are used only if the table is editable.
• Business actions, such as Edit or Create. Business actions can be app-specific or general object management actions.
• Actions for managing the content, such as Sort or Filter. These settings are also known as “view settings”.
• Generic actions, such as Export to Spreadsheet.

Between the groups, add a separator line.

The following content can be part of the table toolbar. Use only the content your users really need. For the remaining content, keep the order shown below:

• Title
• Variant management or content switch (for example, as used to switch between multiple views in a list report)
• Search
• Finalizing actions:
  • Save
  • Cancel
• Business actions: Use this action type for app-specific actions. This group contains:
  • App-specific business actions
  • Actions for object management
    • Create (for new items) or Add (for existing items)
    • Edit
    • Delete (if the object itself is deleted) or Remove (if the reference to an item is removed)
  • Paste

The order of actions in this group is not “fixed”. Place the most important action first, followed by the second most important action, an so on. Try to keep Create/Add, Edit, and Delete/Remove together, but only if this is meaningful in your app.
Exception: Keep Paste as the last action in this category.

• Actions for content management (view settings)
  • Show Details / Hide Details
  • Sort
  • Filter
  • Group
  • Column Settings
• Generic actions
  • Export to Spreadsheet
  • Print
    
• Maximize / Minimize
• View switch (for example, to switch between table and chart view)
• Overflow

Behavior and Interaction

App-Specific Business Actions

If needed, you can define your own actions for the app. In this case, use text-only buttons with a short, unambiguous text for the action the button performs. A button text is usually a single-word verb (for example, Share). Note that text strings can be longer in other languages.

Title

Variant Management

In tables, a variant stores all the settings that define the table view, such as the column layout, column visibility, sorting, filter settings, and grouping. The variant management control enables users to load, save, and change variants. In most cases, variant management replaces the title.

Title and Variant Management

If you need both a title and variant management, place the variant management control directly after the title. Use a separator between the title and variant management.

Since using both controls often leads to truncation problems, this pattern is not recommended.

Content Switch

To switch between different predefined views, use a select control or a segmented button. The content switch replaces the title and the variant management control. In the rare case that the content switch is shown together with a title, the content switch follows the title.

A predefined view contains settings for sorting, filtering, grouping, column layout, and column visibility. Nevertheless, in most cases, the content switch is just used for different filter settings like All, Mine, and Others. In this case, make sure that the content switch doesn’t interfere with other filter settings. For example, remove the corresponding filter from the filter bar. If possible, include an item counter per view.

Another common pattern for content switches are views like By X, and By Y, which are usually defined using group settings.

Use the segmented button and the select control as follows:

• For a limited set of views (2-3), use the segmented button for desktop and tablet devices. Replace it with a select control if there is not enough screen space.
• If the number of views can change or is larger than 3, use the select control.

For more information, see multiple views for list reports.

Search

For tables with a large number of items, consider adding a search field. Use a search field only if there is no other way to search within the table (for example, if there is no additional filter bar).

Place the search field on the right side of the toolbar. Since the search field cannot be moved into the overflow menu, always provide a minimum width.

Ideally, search for results in all columns. As a minimum, search in all currently visible columns.

For more information, see Search.

Edit

There are several options for editing a table:

Edit a Single Item

To allow the user to edit a single item, show an icon-only Edit button at the end of the item (depending on the table control, use sap.m.ListItemBase, property: type, value: sap.m.ListType.Detail or sap.m.ListType.DetailAndActive; or row actions). The user can click the button to trigger the edit event. Use this event to make the item editable.

Mass Editing

See: Mass Editing

Edit the Whole Table

To let the user edit a whole table, use a text-only Edit button. When the user triggers the edit action, switch the table to edit mode. In edit mode, do not show the Edit button and add the finalizing actions Save and Cancel instead. Remove any actions that are meaningless in edit mode. Keep the view settings available.

See also: Object Handling (Create, Edit, Delete)

Create / Add

Delete / Remove

Show Details / Hide Details

Based on the responsive behavior of a table, data can be shown in the pop-in area. With the Show Details / Hide Details function, users can switch between a full data set or a reduced data set.

This function is part of the view settings group and is displayed at the first position of this group.

For more information, see Smart Table.

Sort, Filter, Group

When the user chooses one of these actions, open the view settings dialog or the P13n Dialog with only the corresponding settings.

• If sorting, filtering, and/or grouping is a common use case in your app, offer one, two, or all three of the corresponding features. Do not provide these features if the table is expected to have only a small number of entries (up to 20 in most cases).
• If filtering is a main use case, do not offer filtering on the table toolbar; use the filter bar instead.

Always use only the view settings you really need. For example, do not offer grouping if it does not support your use case.

Ensure a consistent user experience. When a user reopens the app and if variant management is not used, show the table with the same view settings that were last defined by this user.

For more information, see Table Personalization.

Column Settings

Use the table personalization dialog or the P13n Dialog for adding, removing, and rearranging columns.

Offer column settings if you need more columns than those that fit on a tablet screen (which is usually five) to fulfill 80% of your main use cases. Before you do this, try to reduce the number of columns, for example, by using several lines per column or by using the pop-in feature.

Ensure a consistent user experience. When a user reopens the app and if variant management is not used, show the table with the same column settings that were last defined by this user.

For more information, see Table Personalization.

Export to Spreadsheet

The Export to Spreadsheet action allows the user to export table rows and is represented by an icon-only menu button.

Print

The action for printing table items is represented by an icon-only button.

Maximize / Minimize

To allow the user to show the table in full screen mode (property: ShowFullScreenButton), show the   Maximize button.  The user can exit the full screen by clicking the   Minimize button.

View Switch

View switches are right-aligned in the toolbar and allow the user to switch between different chart types and different controls for displaying items (for example list, responsive table, grid list). Provide the view switch if a chart relies on subtle color differences or gradients of color. In these cases, users with visual impairments can switch to the table view.

Switches are optional and do not have to be provided if there is no need to switch between different charts or tables.

Define the number of chart types and switches with care. Offer only chart types that are meaningful for visualizing the respective data and that best assist the user. Ideally, offer no more than three types of visualization.

The sequence of chart type switches is not fixed. Sort them in order of importance.

The chart type currently in use is highlighted. To show this, use a segmented button with icons.

For more information about the icons and the chart types they represent, see Chart Toolbar.

Overflow

See: Toolbar Overview – Overflow.

Styles

On the table toolbar, use the following button styles:

• If the single primary action for the whole page is on the table toolbar, use the emphasized button style.
• if the single primary action for the whole page is not on the table toolbar, you can still highlight the most important button of the table toolbar by using the ghost button style.
• For secondary actions and negative path actions, use the transparent button style.
• For split buttons and menu buttons, use the transparent button style.
• Do not use semantic button styles on the table toolbar.

For more information, see Button and Action Placement.

Guidelines

To indicate if an action can be applied to the current selection:

• Enable the action if it always works, regardless of whether or not items are selected.
• Enable the action if it can be applied to all selected items.
• Enable the action if it can be applied to some of the selected items. If the action is triggered, show a message that informs the user how many items will be affected. Let the user choose whether to apply the action anyway or cancel the action.
• Only disable the action if it can be applied to none of the selected items.

For more details, see UI Element States.

If the items are still available after the action was applied, keep them selected.

For further guidelines, see Toolbar Overview – Guidelines.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The tree toolbar always appears above a tree or tree table. The control is used for key actions that impact the entire tree.

Usage

Use the tree toolbar if:

• There are multiple objects on your page and you need to edit only a single tree.
• You want to show actions as close to their corresponding controls as possible.
• You need a title for your tree.

Don’t use the tree toolbar if:

• You are using single selection and only one or two actions. In this case, place the actions on each line.

Responsiveness

To enable responsiveness, use the overflow toolbar control. For more information, see Toolbar Overview – Responsiveness.

Components

The tree toolbar can contain several components, including a title and several types of button. Actions are grouped by the following action types:

• Finalizing actions, such as Save or Cancel. Finalizing actions are app-specific, and are used only if the tree is editable.
• Business actions, such as Edit or Create. Business actions can be app-specific or general object management actions. They also include actions for organizing the tree.
• Actions for managing the content, such as Sort or Filter. These settings are also known as “view settings”.
• Actions for managing the layout, such as Maximize or Minimize.
• Generic actions, such as Export to Spreadsheet.

Between the groups, add a separator line.

The following content can be part of the tree toolbar. Use only the content your users really need. For the remaining content, keep the order shown below:

• Title
• Variant management or content switch (for example, as used to switch between multiple views in a list report)
• Search
• Finalizing actions:
  • Save
  • Cancel
• Business actions: Use this action type for app-specific actions. This group contains:
  • App-specific business actions
  • Actions for object management
    • Create (for new items) or Add (for existing items)
    • Edit
    • Delete (if the object itself is deleted) or Remove (if the reference to an item is removed)

The order of actions in this group is not “fixed”. Place the most important action first, followed by the second most important action, and so on. Try to keep Create/Add, Edit, and Delete/Remove together, but only if this is meaningful in your app.

• Actions for organizing the tree:
  • Cut
  • Copy
  • Paste and / or Paste from Spreadsheet
• Actions for content management (view settings):
  • Collapse All / Expand All
  • Sort
  • Filter
  • Group
  • Column Settings
• Actions for managing the layout:
  • Maximize / Minimize
• Generic actions:
  • Export to Spreadsheet
  • Print
• View switch (for example, to switch between tree and chart view)
• Overflow

Behavior and Interaction

App-Specific Business Actions

If needed, you can define your own actions for the app. In this case, use text-only buttons with a short, unambiguous text for the action that the button performs. A button text is usually a single-word verb (for example, Share). Note that text strings can be longer in other languages.

Title

Variant Management

In trees, a variant stores all the settings that define the table view, such as the column layout, column visibility, sorting, filter settings, and grouping. The variant management control enables users to load, save, and change variants. In most cases, variant management replaces the title.

Title and Variant Management

If you need both a title and variant management, place the variant management control directly after the title. Use a separator between the title and variant management.

However, since displaying both the title and variant often results in truncated texts, this pattern is not recommended.

Content Switch

To switch between different predefined views, use a select control or a segmented button. The content switch replaces the title and the variant management control. In the rare case that the content switch is shown together with a title, the content switch follows the title.

A predefined view contains settings for sorting, filtering, grouping, column layout, and column visibility. However, in most cases, the content switch is just used for different filter settings like All, Mine, and Others. In this case, make sure that the content switch doesn’t interfere with other filter settings. For example, remove the corresponding filter from the filter bar. If possible, include an item counter per view.

Another common pattern for content switches are views like By X, and By Y, which are usually defined using group settings.

Use the segmented button and the select control as follows:

• For a limited set of views (2-3), use the segmented button for desktop and tablet devices. Replace it with a select control if there is not enough screen space.
• If the number of views can change or is larger than 3, use the select control.

For more information, see multiple views for list reports.

Search

For trees with a large number of items, consider adding a search field. Use a search field only if there is no other way to search within the tree (for example, if there is no additional filter bar).

Place the search field on the right side of the toolbar. Since the search field cannot be moved into the overflow menu, always provide a minimum width.

Ideally, search for results in all columns. As a minimum, search in all currently visible columns.

For more information, see Search.

Create / Add

Edit

There are several options for editing a tree:

Edit a Single Item

To allow the user to edit a single item, show an icon-only Edit button at the end of the item (depending on the tree control, use sap.m.TreeItemBase, property: type, value: sap.m.ListType.Detail or sap.m.ListType.DetailAndActive; or row actions). The user can click the button to trigger the edit event. Use this event to make the item editable.

Mass Editing

See: Mass Editing

Edit the Whole Tree

To let the user edit a whole tree, use a text-only Edit button. When the user triggers the edit action, switch the table to edit mode. In edit mode, don’t show the Edit button and add the finalizing actions Save and Cancel instead. Remove any actions that are meaningless in edit mode. Keep the view settings available.

More information: Object Handling (Create, Edit, Delete)

Delete / Remove

Cut, Copy, Paste

Use icon-only buttons for Cut and for Copy. Offer these actions if the tree structure is editable. Always pair them with drag and drop.

For Paste, use either an icon-only button or an icon-only menu button. In the menu, offer:

• Paste: to paste cut/copied rows
• Paste from Spreadsheet: to create new rows with data from the clipboard. Since the clipboard can’t be accessed directly, use this button to show a hint on how to paste via shortcut (Ctrl+V) or browser context menu.

When pasting, insert the item(s) in the following position:

• If a single node is selected, insert it as a child item to this node
• If a single leaf is selected, insert it as a sibling to this leaf (within the same node)
• If no item is selected, insert it into the visible “root” node

Collapse All, Expand All

Use icon-only buttons for Collapse All and Expand All.

Collapse All closes all nodes up to the visible root level: only items on the first visible level are shown. Expand All opens all nodes down to the lowest level: all items are visible.

Sort, Filter, Group

When the user chooses one of these actions, open the view settings dialog or the P13n Dialog with only the corresponding settings.

• If sorting, filtering, and/or grouping is a common use case in your app, offer one, two, or all three of the corresponding features. Don’t provide these features if the tree is expected to have only a small number of entries (up to 20 in most cases).
• If filtering is a main use case, don’t offer filtering on the tree toolbar; use the filter bar instead.

Only use the view settings you really need. For example, don’t offer grouping if it doesn’t support your use case.

Ensure a consistent user experience. When a user reopens the app and variant management is not used, show the tree with the same view settings last defined by this user.

For more information, see Table Personalization.

Column Settings

Use the table personalization dialog or the P13n Dialog for adding, removing, and rearranging columns.

Offer column settings if you need more columns than those that fit on a tablet screen (which is usually five) to fulfill 80% of your main use cases.

Ensure a consistent user experience. When a user reopens the app and if variant management is not used, show the tree with the same column settings last defined by this user.

For more information, see Table Personalization.

Maximize / Minimize

Use an icon-only button for Maximize or Minimize. Offer the Maximize button to open the same tree sized to fit the full screen. When maximized, offer the Minimize button to go back to the standard view.

Export to Spreadsheet

The Export to Spreadsheet action allows the user to export table rows. It is represented by an icon-only menu button.

Print

The action for printing tree items is represented by an icon-only button.

View Switch

View switches are right-aligned in the toolbar and allow the user to switch between different chart types and different controls for displaying items (for example list, grid list, tree, tree table). Provide the view switch if a chart relies on subtle color differences or gradients of color. In these cases, users with visual impairments can switch to the tree view.

Switches are optional: they don’t have to be provided if there is no need to switch between different charts or trees.

Define the number of chart types and switches with care. Offer only chart types that help to visualize the respective data and that best assist the user. Ideally, offer no more than three types of visualization.

The sequence of chart type switches is not fixed. Sort them in order of importance.

The chart type currently in use is highlighted. To show this, use a segmented button with icons.

For more information about the icons and the chart types they represent, see Chart Toolbar.

Overflow

More information: Toolbar Overview – Overflow.

Styles

On the tree toolbar, use the following button styles:

• If the single primary action for the whole page is on the tree toolbar, use the emphasized button style.
• if the single primary action for the whole page is not on the tree toolbar, you can still highlight the most important button by using the ghost button style.
• For secondary actions and negative path actions, use the transparent button style.
• For split buttons and menu buttons, use the transparent button style.
• Don’t use semantic button styles on the tree toolbar.

For more information, see Button and Action Placement.

Guidelines

To indicate if an action can be applied to the current selection:

• Enable the action if it always works, regardless of whether or not items are selected.
• Enable the action if it can be applied to all selected items.
• Enable the action if it can be applied to some of the selected items. If the action is triggered, show a message that informs the user how many items are affected. Let the user choose whether to apply the action anyway or cancel it.
• Only disable the action if it can be applied to none of the selected items.

For more information, see UI Element States.

If the items are still available after the action was applied, keep them selected.

For further guidelines, see Toolbar Overview – Guidelines.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The table toolbar always appears above the table. The control is used for key actions that impact the entire table.

Usage

Use the table toolbar if:

• There are multiple objects on your page and you need to edit only a single table.
• You want to show actions as close to their corresponding controls as possible.
• You need a title for your table.

Do not use the table toolbar if:

• You are using single selection and have only one or two actions. In this case, place the actions on each line.

Responsiveness

To enable responsiveness, use the overflow toolbar control. For more information, see Toolbar Overview – Responsiveness.

Components

The table toolbar can contain several components, including a title and several types of button. Actions are grouped by the following action types:

• Finalizing actions, such as Save or Cancel. Finalizing actions are app-specific and are used only if the table is editable.
• Business actions, such as Edit or Create. Business actions can be app-specific or general object management actions.
• Actions for managing the content, such as Sort or Filter. These settings are also known as “view settings”.
• Generic actions, such as Export to Spreadsheet.

Between the groups, add a separator line.

The following content can be part of the table toolbar. Use only the content your users really need. For the remaining content, keep the order shown below:

• Title
• Variant management or content switch (for example, as used to switch between multiple views in a list report)
• Search
• Finalizing actions:
  • Save
  • Cancel
• Business actions: Use this action type for app-specific actions. This group contains:
  • App-specific business actions
  • Actions for object management
    • Create (for new items) or Add (for existing items)
    • Edit
    • Delete (if the object itself is deleted) or Remove (if the reference to an item is removed)
  • Paste

The order of actions in this group is not “fixed”. Place the most important action first, followed by the second most important action, an so on. Try to keep Create/Add, Edit, and Delete/Remove together, but only if this is meaningful in your app.
Exception: Keep Paste as the last action in this category.

• Actions for content management (view settings)
  • Show Details / Hide Details
  • Sort
  • Filter
  • Group
  • Column Settings
• Generic actions
  • Export to Spreadsheet
  • Print
    
• Maximize / Minimize
• View switch (for example, to switch between table and chart view)
• Overflow

Behavior and Interaction

App-Specific Business Actions

If needed, you can define your own actions for the app. In this case, use text-only buttons with a short, unambiguous text for the action the button performs. A button text is usually a single-word verb (for example, Share). Note that text strings can be longer in other languages.

Title

Variant Management

In tables, a variant stores all the settings that define the table view, such as the column layout, column visibility, sorting, filter settings, and grouping. The variant management control enables users to load, save, and change variants. In most cases, variant management replaces the title.

Title and Variant Management

If you need both a title and variant management, place the variant management control directly after the title. Use a separator between the title and variant management.

Since using both controls often leads to truncation problems, this pattern is not recommended.

Content Switch

To switch between different predefined views, use a select control or a segmented button. The content switch replaces the title and the variant management control. In the rare case that the content switch is shown together with a title, the content switch follows the title.

A predefined view contains settings for sorting, filtering, grouping, column layout, and column visibility. Nevertheless, in most cases, the content switch is just used for different filter settings like All, Mine, and Others. In this case, make sure that the content switch doesn’t interfere with other filter settings. For example, remove the corresponding filter from the filter bar. If possible, include an item counter per view.

Another common pattern for content switches are views like By X, and By Y, which are usually defined using group settings.

Use the segmented button and the select control as follows:

• For a limited set of views (2-3), use the segmented button for desktop and tablet devices. Replace it with a select control if there is not enough screen space.
• If the number of views can change or is larger than 3, use the select control.

For more information, see multiple views for list reports.

Search

For tables with a large number of items, consider adding a search field. Use a search field only if there is no other way to search within the table (for example, if there is no additional filter bar).

Place the search field on the right side of the toolbar. Since the search field cannot be moved into the overflow menu, always provide a minimum width.

Ideally, search for results in all columns. As a minimum, search in all currently visible columns.

For more information, see Search.

Edit

There are several options for editing a table:

Edit a Single Item

To allow the user to edit a single item, show an icon-only Edit button at the end of the item (depending on the table control, use sap.m.ListItemBase, property: type, value: sap.m.ListType.Detail or sap.m.ListType.DetailAndActive; or row actions). The user can click the button to trigger the edit event. Use this event to make the item editable.

Mass Editing

See: Mass Editing

Edit the Whole Table

To let the user edit a whole table, use a text-only Edit button. When the user triggers the edit action, switch the table to edit mode. In edit mode, do not show the Edit button and add the finalizing actions Save and Cancel instead. Remove any actions that are meaningless in edit mode. Keep the view settings available.

See also: Object Handling (Create, Edit, Delete)

Create / Add

Delete / Remove

Show Details / Hide Details

Based on the responsive behavior of a table, data can be shown in the pop-in area. With the Show Details / Hide Details function, users can switch between a full data set or a reduced data set.

This function is part of the view settings group and is displayed at the first position of this group.

For more information, see Smart Table.

Sort, Filter, Group

When the user chooses one of these actions, open the view settings dialog or the P13n Dialog with only the corresponding settings.

• If sorting, filtering, and/or grouping is a common use case in your app, offer one, two, or all three of the corresponding features. Do not provide these features if the table is expected to have only a small number of entries (up to 20 in most cases).
• If filtering is a main use case, do not offer filtering on the table toolbar; use the filter bar instead.

Always use only the view settings you really need. For example, do not offer grouping if it does not support your use case.

Ensure a consistent user experience. When a user reopens the app and if variant management is not used, show the table with the same view settings that were last defined by this user.

For more information, see Table Personalization.

Column Settings

Use the table personalization dialog or the P13n Dialog for adding, removing, and rearranging columns.

Offer column settings if you need more columns than those that fit on a tablet screen (which is usually five) to fulfill 80% of your main use cases. Before you do this, try to reduce the number of columns, for example, by using several lines per column or by using the pop-in feature.

Ensure a consistent user experience. When a user reopens the app and if variant management is not used, show the table with the same column settings that were last defined by this user.

For more information, see Table Personalization.

Export to Spreadsheet

The Export to Spreadsheet action allows the user to export table rows and is represented by an icon-only menu button.

Print

The action for printing table items is represented by an icon-only button.

Maximize / Minimize

To allow the user to show the table in full screen mode (property: ShowFullScreenButton), show the   Maximize button.  The user can exit the full screen by clicking the   Minimize button.

View Switch

View switches are right-aligned in the toolbar and allow the user to switch between different chart types and different controls for displaying items (for example list, responsive table, grid list). Provide the view switch if a chart relies on subtle color differences or gradients of color. In these cases, users with visual impairments can switch to the table view.

Switches are optional and do not have to be provided if there is no need to switch between different charts or tables.

Define the number of chart types and switches with care. Offer only chart types that are meaningful for visualizing the respective data and that best assist the user. Ideally, offer no more than three types of visualization.

The sequence of chart type switches is not fixed. Sort them in order of importance.

The chart type currently in use is highlighted. To show this, use a segmented button with icons.

For more information about the icons and the chart types they represent, see Chart Toolbar.

Overflow

See: Toolbar Overview – Overflow.

Styles

On the table toolbar, use the following button styles:

• If the single primary action for the whole page is on the table toolbar, use the emphasized button style.
• if the single primary action for the whole page is not on the table toolbar, you can still highlight the most important button of the table toolbar by using the ghost button style.
• For secondary actions and negative path actions, use the transparent button style.
• For split buttons and menu buttons, use the transparent button style.
• Do not use semantic button styles on the table toolbar.

For more information, see Button and Action Placement.

Guidelines

To indicate if an action can be applied to the current selection:

• Enable the action if it always works, regardless of whether or not items are selected.
• Enable the action if it can be applied to all selected items.
• Enable the action if it can be applied to some of the selected items. If the action is triggered, show a message that informs the user how many items will be affected. Let the user choose whether to apply the action anyway or cancel the action.
• Only disable the action if it can be applied to none of the selected items.

For more details, see UI Element States.

If the items are still available after the action was applied, keep them selected.

For further guidelines, see Toolbar Overview – Guidelines.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The footer toolbar always appears as floating footer at the bottom of the screen. The floating footer property creates some padding between screen and toolbar, improving visibility.

The control is used for closing or finalizing actions that impact the whole page. It is only visible when actions appear, when message handling is visible, or when the draft indicator is displayed. One main advantage of the footer bar is that this bar is always visible and will not scroll away.

Our general guideline is to use only icon buttons or text buttons. Icon and text should not be combined into one button. Buttons are always right-aligned.

Buttons are sorted from frequently-used to seldom-used. This ensures that the most important buttons will go into the overflow last.

Usage

Use the footer toolbar:

• If you have closing or finalizing actions on your page that apply to the whole page.

Do not use the footer toolbar:

• If you have different containers on your page (such as charts, tables, and forms) and the action influences only certain items. In this case, place the action as close to the corresponding item(s) as possible.
• If you have global actions (such as Edit or Delete) that are not finalizing or closing actions. In this case, use the header toolbar instead.

Responsiveness

To enable responsiveness, use the OverflowToolbar control. For more information, please refer to the corresponding section in the toolbar overview article.

The height of the toolbar changes on desktops (compact mode), tablets, and smartphones (cozy mode). For more information about cozy and compact modes, see content density.

Components

The footer toolbar can contain the following components:

• Message indicator
• Draft indicator
• Finalizing/closing actions

All closing or finalizing actions are placed on the right side of the toolbar.

The footer toolbar can also include a message and draft indicator. For more information, see draft handling and messaging.

Behavior and Interaction

Our general guideline is to use only icon buttons or text buttons. Icon and text should not be combined into one button. Buttons are always right-aligned.

The buttons are sorted from frequently-used to seldom-used. This ensures that the most important buttons go into the overflow last.

App-Specific Actions

If needed, you can define your own action for the app. Use text-only buttons with a short, unambiguous text for the action the button performs. A button text is usually a single-word verb (for example, Save). Note that text strings can be longer in other languages.

Text vs. Icon Buttons

Use text-only buttons for all finalizing/closing actions (such as Save).

Styles

• Use button styles only if they help the user, and not for decoration.
• Use the emphasized button for primary actions, such as Save.
• Use the ghost button style for secondary actions, such as Return, and the transparent button for negative path actions, such as Cancel.
• Use the semantic button for positive/negative actions (property: type = accept or reject).
• Use only one emphasized button per toolbar and never mix emphasized and semantic buttons.
  Exception: Additional messaging button for the message popover.

For more information, see Button and Action Placement.

Guidelines

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The header toolbar always appears in the header of the page. One main advantage of the header bar is that this bar is always visible and will not scroll away. It contains actions that are relevant for the entire page.

Our general guideline is to use only icon buttons or text buttons. Icon and text should not be combined into one button. Buttons are always right-aligned.

Buttons are sorted from frequently-used to seldom-used. This ensures that the most important buttons go into the overflow last.

Usage

Use the header toolbar if:

• Your page contains several controls, and the actions are valid for the entire page.

Do not use the header toolbar if:

• You have closing or finalizing actions for the whole page. Place them in the footer toolbar instead.
• You have actions that belong to a specific UI element. Place them as close as possible to the corresponding object (for example, in a table or chart toolbar).

Responsiveness

To enable responsiveness, use the OverflowToolbar control. For more information, see the corresponding section in the Toolbar Overview article.

The height of the toolbar changes on desktops (compact mode), tablets, and smartphones (cozy mode). For more information about cozy and compact modes, see Content Density.

Components

The header toolbar can contain the following components:

• App-specific business actions
• Generic actions

The following actions count as generic:

• Flag and Favorite
• Share menu
• Overflow
• Paging

Behavior and Interaction

Business Actions

If needed, the app team can define their own actions for the app. In this case, the text buttons should contain a short, unambiguous text that explains what action the button performs. A button text is usually a single-word verb (for example, Synchronize). Note that translated UIs may increase the length of the text string.

Text vs. Icon Buttons

Use text-only buttons for all business actions (such as Edit and Create).
Use icon buttons only for generic actions (such as  for Share). For icons, always provide a suitable text label as a tooltip.

Edit and Delete (1)

If you want to perform a global edit action, use the Edit button.

If you want to perform a global delete action, use the Delete button.

Add / Create (2)

Place the Add or Create (item or row) action as close to the content as possible.

If the Add or Create action is a main function, don’t move the action into the overflow.

For more information on when to use add or create, see UI Text Guidelines. 

Favorite and Flag (Generic) (3)

Users can mark objects as a favorite or flag objects for quick subsequent retrieval. The user does this by clicking the relevant generic Favorite or Flag button in the header toolbar. For more information, see Flag and Favorite.

Share (Generic) (4)

The Share menu allows users to work with content outside the app they are currently using. It can include a variety of actions. All the buttons contain either text only or a combination of an icon and text. The following actions can be used and complemented by each app:

• Send Email (icon: email  )
• Discuss in SAP Jam (icon: discussion-2  )
• Share in SAP Jam (icon: share-2  )
• Send Message (icon: post  )
• Save as Tile (icon: add favorite  )
• Print (icon: print  )
• Export as Excel (icon: Excel attachment  )
• Export as PDF (icon: pdf attachment  )
• Export As…
• Open In…

If you expect the user to use the Open In… functionality frequently, place it directly in the header toolbar.

The Share action can appear on the full screen or the details screen, and is never moved into the overflow menu. It is always right-aligned. The overflow starts to the right side of the Share icon.

Overflow (Generic) (5)

If apps use the overflow toolbar, the overflow is generated automatically. The overflow is activated if there is not enough space for all the actions on the toolbar, or if some actions are considered less important than others. In this case, the app team decides that only certain actions appear in the overflow.

The app team also decides whether some actions are so important that they should never move into the overflow.

The  “…” (overflow) button can be used to toggle the overflow menu on and off.

The user clicks the overflow button to open a popover. In this action sheet, all icon buttons are labeled with text and the user can overflow the following controls:

• sap.m.SegmentedButton – when in the overflow, the segmented button is in select mode and looks like a select button, although it is technically still a segmented button
• sap.m.Select – when in the overflow, it is always in default mode to take advantage of the extra space, even if it was set to icon-only mode in the toolbar
• sap.m.ToggleButton
• sap.m.Checkbox
• sap.m.Input
• sap.m.SearchField
• sap.m.ComboBox
• sap.m.DateTimeInput

Split-screen layouts have their own overflow menus.

All buttons go into the overflow from right to left. This ensures that the most important buttons are the last to be moved into the overflow menu.

Paging (Layout)

Use the paging buttons if you want to navigate to the previous or next object.

Use the following tooltip labels:

• Icon: Up arrow
  Tooltip label: Previous [Object]
  Example: Previous Purchase Order Item
• Icon: Down arrow
  Tooltip label: Next [Object]
  Example: Next Purchase Order Item

To avoid translation issues, never use “Next” and “Previous” as standalone labels. Always state the object you are navigating to.

If you are using the Share button, place paging buttons to the right of the Share button.

Styles

• Use button styles only if they help the user, and not for decoration.
• Use them for primary actions, such as Edit and Create.
• Use a positive/negative style (property: type = accept or reject) or an emphasized style (property: type = emphasized).
• Use only one emphasized button per toolbar and never mix emphasized and semantic buttons.
  Exception 1: Messaging button appears
  Exception 2: Object has been flagged or marked as a favorite

For more information, see Button.

Guidelines

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

The table toolbar always appears above the table. The control is used for key actions that impact the entire table.

Usage

Use the table toolbar if:

• There are multiple objects on your page and you need to edit only a single table.
• You want to show actions as close to their corresponding controls as possible.
• You need a title for your table.

Do not use the table toolbar if:

• You are using single selection and have only one or two actions. In this case, place the actions on each line.

Responsiveness

To enable responsiveness, use the overflow toolbar control. For more information, see Toolbar Overview – Responsiveness.

Components

The table toolbar can contain several components, including a title and several types of button. Actions are grouped by the following action types:

• Finalizing actions, such as Save or Cancel. Finalizing actions are app-specific and are used only if the table is editable.
• Business actions, such as Edit or Create. Business actions can be app-specific or general object management actions.
• Actions for managing the content, such as Sort or Filter. These settings are also known as “view settings”.
• Generic actions, such as Export to Spreadsheet.

Between the groups, add a separator line.

The following content can be part of the table toolbar. Use only the content your users really need. For the remaining content, keep the order shown below:

• Title
• Variant management or content switch (for example, as used to switch between multiple views in a list report)
• Search
• Finalizing actions:
  • Save
  • Cancel
• Business actions: Use this action type for app-specific actions. This group contains:
  • App-specific business actions
  • Actions for object management
    • Create (for new items) or Add (for existing items)
    • Edit
    • Delete (if the object itself is deleted) or Remove (if the reference to an item is removed)
  • Paste

The order of actions in this group is not “fixed”. Place the most important action first, followed by the second most important action, an so on. Try to keep Create/Add, Edit, and Delete/Remove together, but only if this is meaningful in your app.
Exception: Keep Paste as the last action in this category.

• Actions for content management (view settings)
  • Show Details / Hide Details
  • Sort
  • Filter
  • Group
  • Column Settings
• Generic actions
  • Export to Spreadsheet
  • Print
    
• Maximize / Minimize
• View switch (for example, to switch between table and chart view)
• Overflow

Behavior and Interaction

App-Specific Business Actions

If needed, you can define your own actions for the app. In this case, use text-only buttons with a short, unambiguous text for the action the button performs. A button text is usually a single-word verb (for example, Share). Note that text strings can be longer in other languages.

Title