- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
Table Toolbar
Intro
The SAP Fiori elements templates support the features and settings for the table toolbar detailed below.
For design information, see the guidelines starting with Table Overview, and see the links below.
Feature Availability
Features in List Report and Object Page |
Availability |
Title | Mandatory |
Table Personalization Actions | Default, you can turn them off. |
Application-Specific Actions | Available |
Select All Action | Available |
Show/Hide Details | Available in responsive tables |
Actions Disabled Before Row Selection | Available |
Conditional Enablement of Navigation Buttons | Available with SAP Fiori elements for OData V4
Requires an extension with SAP Fiori elements for OData V2 |
Messages for Critical Actions | Available |
Messages for Destructive Actions | Available |
List Report-Specific Features |
Availability |
Toolbar Sticky Behavior | Default, you can turn it off. |
Standard Actions: Create, Delete, and Export to Spreadsheet | Default, you can turn them off. |
Object Creation via an Object Page | Default, you can change it. |
Object Creation via a Dialog | Available in certain conditions |
Hide Draft Values / Show Draft Values | Available, with SAP Fiori elements for OData V2 only. |
Hiding Actions in Multiple Content Layout | Available |
Object Page-Specific Features |
Availability |
Search | Available, when the data allows it. |
Edit | Default, when the data allows it. |
Delete | Default, when the data allows it. |
Subobject Creation via Subobject Page | Default, you can change it. |
Subobject Creation via Dialog | Available for applications that are not draft-enabled in certain conditions |
Create Not Visible | In certain conditions |
Inline Creation | Available, in draft-enabled applications for grid and responsive tables |
Prefilling Fields for New Object Creation | Available, in draft-enabled applications |
Copy and Paste from Microsoft Excel | Available, in draft-enabled applications for grid and responsive tables, in certain conditions |
Export to Spreadsheet | Available
Default, when the copy and paste from Microsoft Excel feature is enabled. |
Full Screen Mode for Table Display | Available, not recommended |
Segmented Button for Switching Table Views | Default for a table with a maximum of three views |
Select Control for Switching Table Views | Default for a table with four or more views |
Features in List Report and Object Page
The information below relates to table toolbar actions and settings in both the list report and object page floorplans.
Table Personalization Actions
By default, Sort, Group and Order actions are enabled.
These actions are icon buttons that open the Personalization dialog to the tab for the corresponding action.
For specific use cases, you can disable them. When you do, the user must open the Personalization dialog to access the actions.
For more information, see Table Personalization (Overview).
Application-Specific Actions
You can define these actions and the text displayed on the buttons.
If the action navigates to a different application, the action can be hidden according to the user’s authorization or the screen availability.
For more information, see:
Select All
By default, Select All is hidden with SAP Fiori elements for OData V2. You can display it.
By default, Select All is displayed with SAP Fiori elements for OData V4 when you enable multiple item selection.
When the Select All button is hidden:
- The user can select a range of multiple items, by selecting an item, pressing Shift, and selecting others. When the user selects more items than currently appear onscreen, additional items are loaded from the backend up to a specified limit. The default value for the limit is 200.
- The Undo Selection button appears for the table, instead of the Select All, and allows the user to clear the selected items.
For a responsive table, enabling the multiple item selection is a prerequisite to enabling the Select All button.
For an analytical table, grid table, or tree table, ask the development team to use the Multi-Selection Plugin.
Show / Hide Details
The table toolbar displays the Show Details action when at least one column is hidden from the screen based on its importance. After the user clicks Show Details to display the column, the action changes to Hide Details.
By default in responsive tables:
- Key fields have the importance set to high in list reports.
- Other columns have the importance set to none and are handled like columns assigned medium importance.
You can change the level of importance.
The importance assigned determines whether a column is displayed in all screen sizes, and in the pop-in area for a responsive table when screen space is limited.
Importance |
Screen Sizes Where the Column Is Displayed |
When the Column Moves into the Pop-In Area |
Low | Large | First, starting with the right-most column |
None (Default) | Large and Medium | After low importance columns |
Medium | ||
High | All | Last |
Actions Disabled Until the User Selects a Row
You can set actions in the table toolbar to display as disabled until the user selects one or more table rows for the action.
Note that the development team may call actions that require selection “context-dependent” actions and actions that are enabled without a selection “context-independent” actions.
For more information, see UI Element States.
Conditional Enablement of Navigation Buttons
With SAP Fiori elements for OData V4, you can enable buttons that navigate the user to another page or application based on the value of a specific field.
With SAP Fiori elements for OData V2, this feature requires extensions.
For example, you can enable the Generate Purchase Order button only for sales orders with the completed status.
Messages for Critical Actions
For actions that you set as critical, you can display one of the following after the user triggers the action:
- A message toast confirmation
- A confirmation message box to ensure the user wants to proceed with specific critical actions
Also, the backend can require a confirmation on some actions. In this case, the confirmation message is always shown in a message box.
Example
SAP Fiori elements for OData V2 | SAP Fiori elements for OData V4 | |
Default Text | “Do you really want to execute the action <Action Label>?”
<Action Label> is the label shown on the button. |
“Do you really want to perform this action? |
Replacement Text | “Are you sure you really want to activate this product?” | “Are you sure you really want to activate this product?” |
For more information, see:
Messages for Destructive Actions
By default, a message is displayed for confirmation of an action that will delete or destroy important data.
Example
SAP Fiori elements for OData V2 | SAP Fiori elements for OData V4 | |
Default Text | The default message reuses the title and the description defined for the object in the table.
|
“Do you really want to perform this action? |
Replacement Text | “Are you sure you really want to delete this product?” | “Are you sure you really want to delete this product?” |
For more information, see:
List Report-Specific Features
The information below relates only to table toolbar actions and settings in the list report floorplan.
Standard Actions
By default, Create, Delete, and Export to Spreadsheet are enabled.
You can disable them.
You can also enable or disable the Delete button based on conditions specified in the backend.
Example
You can disable deletion for a sales order that has already been paid. When a user selects an item that cannot be deleted, the Delete button is disabled. In addition, if the user navigates from this item in the list report to the object page, the Delete button is hidden.
Create Object Actions
By default, the create action via the object page is enabled. The action opens the object page in create mode so the user can enter the data.
You can enable the object creation via a dialog for objects that have 8 fields maximum. The action opens a dialog in modal view so the user can enter the data.
This feature is supported only for:
- List reports with the single content layout
- Main object creation from the list report page
Hide Draft Values / Show Draft Values
With SAP Fiori elements for OData V2, you can display this button to allow users to choose between a display of only saved records or of all records. The button is displayed only when the Editing Status filter in the list report filter bar is set to All.
By default, the list report displays active (saved) records, draft (unsaved) records, and draft changes to active records.
Note that this feature is enabled at the application level and also displays the Display Saved Version / Return to Draft button in the object page header.
The selection in the list report determines the state of the object that opens when the user navigates to the object page:
- From a list report with Hide Draft Values selected, the object page opens with the last saved version of the record. If a draft record also exists, the Return to Draft button shows.
- From a list report with Show Draft Values selected, the object page opens in edit mode for drafts with the Display Saved Version button displayed.
When the user navigates back to the list report, it displays with the previously selected state.
Hiding Actions in Multiple Content Layout
You can hide an action from a toolbar for a specific table when the list report contains multiple views with multiple tables.
For more information, see:
Object Page-Specific Features
The information below relates only to table toolbar actions and settings in the object page floorplan.
Search
You can enable a search on the table.
For more information, see Search.
Edit
By default, Edit is displayed when the business object shown in the table is editable.
Delete
By default, Delete is displayed in edit mode when the business object shown in the table is deletable.
You can enable or disable the Delete action to allow users to delete only in certain conditions.
For example, after the sales items for a Sales Order have shipped, you can hide the Delete action for the items. When a user selects an item that cannot be deleted, the Delete action is disabled.
When multiple selection is enabled for the table, the Delete action is enabled if at least one selected item is deletable.
Subobject Creation
By default:
- Create is displayed in edit mode when the business object shown in the table is editable. For specific circumstances when the Create button is disabled, see Create Action Visibility below.
- The default creation action is via the suboject page — the action opens the subobject page in create mode so the user can enter the data.
You can:
- Enable or disable the Create action to allow users to create subobjects only in certain conditions. For example, after a sales order reaches the Delivery is Shipped status, you can hide the Create Sales Item action.
- Enable creation of a subobject via a dialog with 8 fields maximum in an application that is not draft-enabled. The action opens a dialog in modal view so the user can enter the data. The dialog must contain all the mandatory fields for the subobject.
- Enable inline create for draft-enabled applications in grid and responsive tables only. See Inline Creation below.
For more information, see:
Create Action Visibility
Whether or not the Create action is visible in the table toolbar depends on:
- The object page mode.
- Whether the flow is global or local.
- Where the user enters the data for the new subobject — in the subobject page or directly in the table with the inline edit.
Flow Type |
Read Mode for All Tables |
Edit Mode for Tables with Subobject Pages |
Edit Mode for Tables with Inline Edit |
Global Flow for Draft-EnabledApplications with Fiori Elements for OData V2 |
|
|
|
Local Flow for Non-Draft Enabled Applications |
|
|
Not Supported. |
Inline Creation
In grid and responsive tables, you can enable inline creation of entries for applications with draft handling enabled. The Create action is displayed in edit mode.
The inline create action creates a new row where the users can enter the subobject data. By default, the new row is highlighted in blue and displayed at the top of the table. The highlighting disappears after the users save the data.
You can work with the development team to define a custom sort order.
For more information, see Add Items.
Prefilling Fields for a New Object
You can turn this on in draft-enabled applications for the default create action via the object page, where the user navigates to another application to enter the data in the new object page.
The new object must be the main object on the object page.
You determine both the fields to prefill and the default values for the fields.
Copy and Paste from Microsoft Excel
By default, the table toolbar for responsive and grid tables displays Paste when the following are enabled:
- Draft-handling for the application.
- Inline creation for the object page table.
After users copy data from a spreadsheet, they can place the focus anywhere in the table except for the cells and trigger the browser paste with the keyboard shortcut (Ctrl+V for Microsoft Windows, Cmd+V for MacOS).
Limitations
- Pasting is supported only for fields that contain a single value, not for complex fields, such as smart links and images.
- If there are validation errors, a dialog displays an error message so the user can take remedial action.
- The greater the number of records copied, the longer the paste operation takes.
- The order of the of the data copied from the spreadsheet can differ from the order in the table in the application after the paste. SAP Fiori elements cannot control this.
- Users cannot paste data into custom columns of tables.
- This feature is not supported for custom tables.
Export to Spreadsheet
By default, Export to Spreadsheet is enabled with the copy and paste from spreadsheet feature above.
You can enable the button independently of the copy and paste from Microsoft Excel.
The Export to Spreadsheet button triggers the export of the values in the table.
For more information see Export to Spreadsheet.
Full Screen Mode for Table Display
You can enable full screen mode for a table. However, it is generally not recommended.
Users click the Maximize action in the toolbar to display to the table in a dialog. They can return to the object page by clicking either the Minimize or Close action.
For more information on the restrictions for this feature, see Maximize/Minimize.
Content Switch for Table Views
By default, the number of views that you set for the table determines the UI control for the content switch for table views.
- A segmented button for a maximum of three views
- A select control for four or more views.
By default, the count or number of records in the view is not displayed next to the title of the content switch for table views for performance reasons. Talk to the development team about how displaying the counts impacts performance for your use case.
Related Links
Elements and Controls
- Table Overview (guidelines)
- Table Personalization & Dialogs (guidelines)
- List Report Floorplan (guidelines)
- Object Page Floorplan (guidelines)