Intro

With a list report, users can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page.

List report

When to Use

Use the list report floorplan if:

• Users need to find and act on relevant items within a large set of items by searching, filtering, sorting, and grouping.
• You want to let users display the whole dataset using different visualizations (for example, as a table or as a chart), but no interactions are required between these visualizations. An example use case might be reporting.
• Users need to work with multiple views of the same content, for example on items that are “Open”, “In Process”, or “Completed”. You want to let users switch views using tabs, segmented buttons, or a select control.
• Drilldown is rarely or never used, or is only available via navigation to another page, and not as free or flexible drilldown within the page itself.
• Users work on different kinds of items.

Do not use the list report floorplan if:

• Users need to see or edit one item with all its details. Use the object page floorplan instead.
• Users need to find one specific item, and the item or an identifying data point is known to the user (such as a code). Use the initial page floorplan instead.
• Users need to work through a comparably small set of items, one by one. Use the worklist floorplan instead.
• Users need to extract knowledge or insights from data, either to better understand the current situation, or to identify the root cause for a certain value. Use the analytical list page instead.
• Charts are not only used for visualization. Users need to switch between integrated chart and table views (hybrid view). Use the analytical list page instead.
• Users need to see the impact of their action on a KPI. Use the analytical list page instead.
• Users need to see not only the result, but also the impact of their filter settings directly in a chart representation. Use the analytical list page instead.

Components

The list report is a full screen floorplan. It can also be used in flexible column layout, where it is usually displayed in the first column.

The list report page is based on the dynamic page, and is divided into a header area and a content area, as defined by the dynamic page layout.

Schematic visualization of a list report

• The dynamic page header (1) contains the header title (2) and the expandable/collapsible header content (5).

  • The header title (2) is part of the header area and should display a title or variant (3) for the whole page (mandatory), filter information (if the header is collapsed), and a header toolbar (4) with global actions, such as Share (optional).
  • The header content (5) is used to display the filter bar (mandatory).
  • The header features (6) allow users to expand/collapse the header (6a) (mandatory) and pin/unpin the header area (6b).

• The content area (7) is used to display:

  • A table/chart title, textual icon tab bar, or select (8) (optional)
  • One table/chart toolbar (9) per tab
  • One or multiple tables and/or charts (10). You can use any kind of table. If you use a chart, you can display the chart on its own (without a table).

• The footer toolbar (11): Use a footer toolbar to display the message button when messages are present.

Behavior and Interaction

Initial Focus

When the list report is loaded, set the initial focus as follows:

• If the header is expanded, set the focus on the first filter field (live update mode) or on the Go button (manual update mode).
• If the header contains empty mandatory fields, set the focus on the first empty mandatory field.
• If the header is collapsed, set the focus on the first table row.

Standard Naming Conventions

For all objects, follow the standard conventions for action buttons, the object name, and the title in the shell bar. For more information see:

• Object Handling – Naming Guidelines
• Launchpad Shell Bar – Page Title and Navigation Menu

Header Title

Variant Management

Filter Information

Header Toolbar

Header Content

Search

Header Content - Expand / Collapse Behavior

The header content collapses when the user scrolls down the page (except for desktop-centric tables), and expands again when the user scrolls back up (“snap on scroll”). Users can pin the header content to keep it visible. For more information, see Dynamic Page – Expand/Collapse Header.

Exception: The “Snap on scroll” and “pin header” features are not provided if the main content area contains desktop-centric tables (grid tables, analytical tables, tree tables) or any other content with its own scrollbar. In these cases, users need to expand and collapse the header content manually using the Show Filters / Hide Filters button.

When starting the application, expand the header content if no query was fired (and the table is therefore empty). Otherwise, collapse the header content.

Content Area

General Layout

There are three basic list report layouts: simple content, multiple views, and multiple content. These are described in more detail below.

Simple Content

In most cases, the content consists of just a table toolbar and a table. If needed, provide an option to switch between the table and a corresponding chart view.

Table Toolbar

Typical toolbar in the list report floorplan with the table title, item count, and buttons for actions and settings

Display a table title (ideally with an item count) and a (Settings) button that opens the P13n-Dialog for the required sorting, grouping, and column settings. It can also include more extensive functionality, such as grouping or sorting on several levels or for tables with more than 20 columns. Enable only the features required.

Do not offer additional filter settings on the table toolbar.

In rare cases, you can offer an additional layout variant on the table toolbar. The layout variant stores view settings like the column order and the sort and group settings. If you use a layout variant, do not store the table settings in the filter variant. Offer this additional layout variant only if there is a strong use case for switching filter and layout variants independently. If there is no strong use case, or you are unsure, do not use a layout variant at all.

Layout variant in the table toolbar

In addition, offer any other actions needed. Disable selection-dependent actions (such as Delete) if no items are selected, or if the action cannot be applied to the selected items. Always enable selection-independent actions (such as Add). To save space on the table toolbar, group similar actions using a menu button. For example:

• Release and Release with Conditions
• Add Contact and Replace Contact
• Edit Account and Edit Title

For more information on table/chart actions, see the guidelines for the table toolbar, the chart toolbar, and for managing objects.

Table

If there are no items to display, use the “no data” text of the corresponding table. Explain why the table is empty, and what the user needs to do to display items.

Examples:

• After starting the app, no filters are applied:
  To start, set the relevant filters.
• The filter was executed, but no items were found. This can also happen if the list report was opened by a related app, and the filter criteria were transferred automatically:
  No data found. Try adjusting the filter settings.

If you are using a responsive table, always enable “scroll to load” behavior.

Sticky Behavior

The icon tab bar, table/chart toolbar, and column headers of all table types must be “sticky”. This means that they stay fixed on top when the user scrolls down the page.

Navigation

There are three types of navigation at item level in the list report floorplan:

• Line item navigation: If applicable, allow navigation to a detail view (usually an object page) at line item level. Show a navigation indicator (chevron icon) for each line item that provides a detail view. In a list, tree, or responsive table, clicking the line item triggers the navigation.
  In a grid table, analytical table, or tree table, clicking the navigation indicator triggers the navigation.
  Another option is to use a link as the identifier for the line item. This link triggers the navigation. Use this only if the navigation indicator is being used for a different target.
  Only show navigation indicators for target pages the user is authorized to access.
• Drilldown navigation: If a line item contains aggregated data, allow navigation to a view that contains details for the aggregated amount. This is usually another list report. In this case, use a link to display the aggregated amount. If the table contains many columns with links, use the link options to provide different levels of highlighting.
  In charts, offer the drilldown navigation link in the popover for the chart element. In this case, also navigate to the corresponding list report to show the details.
• Cross navigation: If a line item contains cross-references to other entities, such as people or business objects, use a link to display the corresponding data point in the table. Triggering the link opens a quick view. Typically, the quick view displays basic details of the referenced object and a navigation link to another page (usually an object page) or another app that shows the object details.

Working Modes

When the user edits a list item in a filtered list, the changed item might no longer match the filter criteria. For this use case, there are two alternative working modes:

• Worklist Mode

  Users want to see a direct system reaction to their changes. Items that don’t match the current filters vanish immediately. This mode applies to about 80% of all use cases.

• Continuous Working Mode

  The user still needs the edited item, even though it no longer matches the filter criteria. The item stays in the list until the next filtering process is triggered. The item is marked, and a system message informs the user about the filter mismatch. This mode applies to about 20% of all use cases.
  
  The app developer can choose the appropriate working mode for the app use case.

Footer Toolbar

Use the the footer toolbar to display the message button, when messages are present. The button opens the message popover with a list of all messages.

For more information, see the guidelines for the footer toolbar.

Actions

Places for actions in the list report

(1) Global actions in the header toolbar
(2) Table actions in the table toolbar
(3) Line item actions

1. Global Actions

Place actions that affect the entire page in the header toolbar in the header title (1). These include the following standard actions:

• Show Filters / Hide Filters: This button expands and collapses the header content. Show this button only if the list report contains a grid table, analytical table, or tree table.
• Share: This button opens an action sheet that contains actions like Save as Tile (if the SAP Fiori Launchpad is available), Send Email, and Share in SAP Jam (if SAP Jam is available). Show the Share button only if it makes sense for your application.

Hide actions that cannot be used at all (for example, because the user has no authorization). To save space on the header toolbar, group similar actions using a menu button.

Do not place actions that finalize the current process (“finalizing actions”) on the header toolbar of the header title, even if they affect the entire page.

For more information on global actions, see the guidelines for the header toolbar.

2. Table/Chart Actions

Place actions that affect the content of a table or chart in the table toolbar (2).

If you are using an icon tab bar, be aware that each tab contains its own table toolbar.

When to Enable, Disable, or Hide Actions

Indicate whether an action is available. Some actions are always available (such as Create for new objects). Other actions are only relevant if items have been selected (for example, Edit at item level, Remove, object-specific actions, or actions that change the status of an item).

Enable the following actions:

• All Add/Create actions, unless the user needs to specify where in the table the new item should be added.
• Edit actions that switch the entire table to edit mode (independent of the selected items).
  If the user triggers the Edit button, replace it with Save and Cancel buttons (see Editing the Whole Table).
• Item-dependent actions that can be applied to some or all of the selected items.

Disable the following actions:

• Item-dependent actions when no items have been selected.
• Add/Create actions where the user needs to specify the insert position in the table, but either no item has been selected, or more than one item has been selected.

Hide actions that cannot be used at all (for example, because the user has no authorization).

For more information, also see UI Element States – Control States.

Partial Processing

Enable the user to apply the changes to as many of the selected items as possible.

If an action can’t be applied to all selected items, show a warning message before executing the action:

• Indicate the number of selected items that can’t be processed (out of the total number of selected items).
• Give a reason why the action can’t be applied to these items.
• Let the user choose whether to apply the action to the remaining items anyway or cancel the action.

See an example here.

Note: In some scenarios, you might not be able to identify whether an action can be applied to all selected items before executing it. If the system is unable to apply the action to all items, show a message after executing the action.

Sort, Group, Personalization

If you need to provide sorting, grouping, or personalization for your use case, use the  (Settings) button to open the P13n-Dialog. Enable only the required options.

Add/Create Items Using a Dialog

You can let users add or create new items at list report level using a dialog. This approach is recommended for cases where there are fewer than 8 required fields. Display the action in the table toolbar.

You can use this option for both draft and non-draft scenarios.

More Information

For more information on table and chart actions, see the guidelines for the table toolbar, chart toolbar, and for managing objects.

3. Line Item Actions

In rare cases, actions that affect a single item can be placed directly inside the line item. Use this only for specific, frequently used tasks (3). If the same action can also be applied to several items at once, feel free to also place it on the table toolbar. Nevertheless, if you do so, reconsider whether you really need to offer the action at line item level. Examples of line item actions include:

• Start/Stop (a batch job)
• Approve (an item)
• Assign (an item)

Do not disable line item actions. If an action cannot be used, hide it. This can be the case if the user has no authorization or the line item is in the wrong state.

Responsiveness

In general, the list report floorplan is responsive. However, there are exceptions if the following controls are used:

• Grid table, analytical table, and tree table are supported on desktop and tablet devices only so you cannot use them for mobile use cases.
  Instead, take an adaptive approach:

  • Create a new Fiori application with reduced complexity, not an exact match of the desktop application.
  • With the new application, address the most important use cases for users in a mobile context. The responsive controls (responsive table, list or tree,) or a relevant control for your use case (for example a chart or the category navigation pattern) may suffice.

• Smart table: The smart table is a wrapper around the different existing table controls. If a grid table, analytical table, or tree table is used inside the smart table, you will run into the limitation mentioned above.

For more details, see the respective guideline articles.

List report - Size L

Examples

The examples below show variants of the list report with the most commonly-used controls.

1. Simple content layout, manual update mode with Go button
2. Simple content layout, draft handling enabled, manual update mode
3. Multiple view layout with segmented button, manual update mode
4. Multiple view layout with select control, manual update mode
5. Multiple content layout with icon tab bar, manual update mode
6. Simple content layout, live update mode

Top Tips

• Avoid loading list report page without any data, even if there are no mandatory filters.
• Use only one key identifier in the table.
• If you are using the icon tab bar, place it beneath the filters.
• In the icon tab bar, use text labels only (without icons).
• Choose selection controls that best fit your use case.
• Make sure that columns in the table are aligned correctly.
• Ensure that mandatory filter fields always have default values.
• Avoid using variant management for tables. Use the page variant instead.
• Always enable actions like Add, Create or Edit. Once Edit is triggered, replace it with Save and Cancel.
• Never place finalizing actions in the header toolbar, even if they affect the whole page.
• When using the icon tab bar, be aware that each tab contains its own table toolbar.

Related Links