The shell bar is above the analytical list page. The page itself uses the dynamic page layout and has two main areas:

1. Analytical list page header:
   The page header is the filter area. Users can expand and collapse the header using the expand/collapse header icon.
2. Analytical list page content area:
   The content area shows the content for the chosen filters.

All elements are described in more detail in the Components section below.

Layout Variants

The layout of the analytical list page is quite flexible. The display is determined by the header and content views chosen by the user.

• In the expanded page header, users can switch between the visual filter bar and the filter bar using the filter type switch.
• In the content area, users can switch between a hybrid view (chart and table), a chart-only view, or a table-only view using the view switch.

The analytical list page always offers all of the above layout options. You cannot restrict the available views at app level. For example, you can’t offer only a visual filter (with no option to show the standard filter bar). Likewise, you can’t show only a table view (with no option to display the hybrid or chart views).

Responsiveness

The analytical list page is responsive, except for the global KPIs. Apps with one or more global KPIs are not supported on screen sizes smaller than size L (desktop).

Likewise, the analytical list page is only fully supported in the flexible column layout if no global KPIs are used. If you use the analytical list page with global KPIs within the flexible column layout, the column should have at least size M.

Size S

On size S, the analytical list page supports both the chart-only and table-only views. The table-only view supports only the responsive table. If no responsive table is available, the chart-only view is displayed without a view switch toggle.

Global KPIs are not supported on size S.

Size M

On size M, the analytical list page supports both the chart-only and table-only views. You can use a responsive table or analytical table in the table-only view.

Components

The collapsed page header contains the following elements:

• Variant management (serves as page variant) (mandatory)
• Global key performance indicator tags (= global KPI tags) (optional)
• Global key performance indicator cards (= global KPI cards) (optional)
• Filter dialog via the Adapt Filters (x) link. Visible only in live mode. (mandatory)
• Header toolbar with global actions (optional)
• Summary of applied filters

Initially when the app is launched the header is expanded by default. The expanded page header contains the following elements:

• Variant management (serves as page variant) (mandatory)
• Global key performance indicator tags (= global KPI tags) (optional)
• Global key performance indicator cards (= global KPI cards) (optional)
• Filter dialog via the Adapt Filters (x) link (mandatory)
• Header toolbar with global actions (optional)
• Filter area, including the visual filter bar and filter bar (mandatory)
• Filter type switch (   |   ) (mandatory)

The analytical list page content area contains the following elements:

• View switch (   |    |    )

• Hybrid view: View with one chart, chart toolbar, one table, and a table toolbar

• Chart-only view: View with one chart and a chart toolbar

• Table-only view: View with one table and a table toolbar

Variant management in the analytical list page allows users to save a page variant whenever there are changes in the underlying structures of the filter/content area. Variant management for the page is handled by the standard SAPUI5 page variant management.

Currently, the page variant captures the following states across the page:

• Filter view switch state: Visual filter bar or filter bar
• Filter set: The filters set in the visual filter bar and filter bar
• Filter selections: Selected values in the visual filter bar and filter bar
• Content view switch state: hybrid view  , chart-only view  , or table-only view  
• Chart and table configurations, such as measures and dimensions used, sort order, or grouping
• Chart drill-down state, based on the current selections (slice & dice)
• Table entry switch state: Hide (  ) or Show  (  ) selected table records

Use a global KPI tag (= global key performance indicator tag) if you would like to show a global KPI related to the task in hand. The global KPI value changes only if an action is executed on the transactional content. For example, the user needs to know the effect of releasing sales orders on a related global KPI, or the effect of posting an accounting document on certain financial global KPIs.

You can display a maximum of three global KPIs. Clicking a global KPI tag opens a global KPI card that displays more details on the KPI.

The global KPI tags and corresponding KPI cards are independent of the filter area. This means that global KPI tags do not react to filters set in the visual filter bar and filter bar.

A global KPI tag has four components:

• Global KPI label
• Global KPI value
• Global KPI color and criticality indicator

Global KPI Label

The global KPI label is an abbreviation of the complete global KPI title. It is formed using the first three letters of the first three words of the global KPI title.
Examples: AMR for Actual Monthly Revenue, TAR for Total Advertising Revenue, or LPC for Landing Page Conversation Rates

If there is only one word in the global KPI title, the first three letters of the word are displayed. Example: CON for Contracts

If the global KPI title has only two words, only the first letters of these two words are displayed. Examples: AC for Actual Costs, SG for Sales Growth

Global KPI Value

The global KPI value is displayed using a semantic color and a scaling factor. Relative values are shown with a percentage sign and one decimal place.
Examples: 0.3%, 82.9%
Absolute values are shown without decimal places, a currency, or a unit of measure.
Examples: 2K, 75K, 30M, 14B

Global KPI Color and Criticality Indicator

The color of the global KPI value is based on the thresholds defined for the particular KPI in the annotation. The global KPI tag also uses a line to indicate the criticality. The color of the line is the same as that of the global KPI value.

Global KPI Card

Clicking the KPI tag opens the analytical card, which displays more information about the current value of the global KPI, the global KPI target, the deviation from the target, and how the global KPI has evolved over time.

The filter area allows users to filter the result set, which feeds the main content area. The analytical list page comes with two filter types: compact filters in the filter bar, and the visual filter bar. Always design both visual filters and compact filters (filter bar) for your app. We recommend setting the visual filter bar as the default, but this is no longer mandatory. You can opt to use the (compact) filter bar as the default if your app has the required parameter values, if your main use case involves date ranges, or if your users often need to combine multiple filters in different ways.

Currently, any visual filter configured in the visual filter bar must always be displayed as a compact filter in the filter bar as well. By contrast, a filter configured as a compact filter in the filter bar may or may not be configured for display as a visual filter. This means that it’s possible to have a smaller set of visual filters and a larger set of compact filters.

Both filter types supports two different modes: live update and manual update. Use the live update mode for both filter types as the default whenever possible. Apply the same mode to both filter types: the visual filter bar and the filter bar. For example, if you use the live update mode in the visual filter bar, you should also use the live update mode for the filter bar.

Users can toggle between the compact filters    (filter bar) and    (visual filter bar) in the upper-right area of the page header. The filter type switch is a core feature of the analytical list page and is mandatory. The switch is only displayed when the page header is expanded. Once the header collapses, it disappears.

Interactive Donut Chart

The interactive donut chart in the visual filter bar is used for non-time-related data (for example, categories) and displays only the top or bottom two values. The rest are aggregated into the “Other” section.

Interactive Line Chart

The interactive line chart is used exclusively for displaying time series data, and can show a maximum of six data points. Always show the first or last six data points (for example, last six days, last six months, first six days, and so on).

Interactive Bar Chart

The interactive bar chart can be used for non-time-related data (for example, categories) and has a maximum of three filter values. These filter values show the top three or bottom three entries.

Filter Dialog for Visual Filters

The filter dialog is launched by clicking the Adapt Filters ([number of applied filters]) link in the page header area. In the filter dialog for visual filters, the user can choose which filter fields are shown in the visual filter bar, and make the following changes:

• Add visual filters
• Delete visual filters
• Hide visual filters in the visual filter bar
• Search for visual filters
• Change the sort order  of each visual filter
• Change the chart type   of each visual filter
• Switch to other measures  in the visual filter display

Analytical List Page Content Area

The content area shows different visualizations of the selected data. In the hybrid view, users can interact with both the chart and table visualizations at the same time. In addition, the analytical list page supports a chart-only view and a table-only view. The analytical list page always comes with all three views. Offering additional views or even tabs would add too much complexity, and is neither supported nor recommended.

Check out the following sections for more details on the hybrid view, chart-only view, and table-only view.

The hybrid view uses both chart and table visualizations at the same time. It enables users to analyze data step by step from different perspectives. Users can interact with both the chart and the table, and drill down through either the smart chart or table entries to investigate a root cause. They can also act directly on transactional content. In the initial view of the chart, visualize the most important aspects of the whole dataset in the chart.

Example: The view shows all the suppliers the user is responsible for, organized by value. By drilling down the material to the plant with the highest/lowest volume, the user can see if materials need to be shifted from one plant to another. The corresponding transactional data is shown in an analytical table below the chart, which might also offer an action for shifting the material.

The chart-only view enables users to analyze data step by step from different perspectives, and to investigate a root cause through drilldown, without direct access to transactional content. The smart chart control provides the chart visualization in the chart-only and hybrid views: it is used to display the dataset as a chart. The smart chart drilldown functionality provides a convenient way to analyze the dataset. In addition, the smart chart offers detailed information on the chart data and a breadcrumb that shows the drilldown path. Ensure that you show the most important aspects of the dataset in the chart.

This mode is perfect for applications with analytical data that can easily be represented visually using charts, but doesn’t need to be linked to the transactional dataset.

The table view provides access to transactional content. The user can act on single or multiple objects, and navigate to the object details or to other applications.

Depending on the use case, you can opt to use either the analytical table or the responsive table.

Snapping or scrolling is not available for desktop-focused tables, such as the analytical table. Scrolling is only available when the responsive table is used. The pin is enabled by default. The table entries are loaded using lazy loading.

Users can apply filters at table level using the Settings button ( ). For analytical tables, filtering is also available at column level. For more information, see Analytical Table (ALV) – Filter.

Initial Focus

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

• If the compact filter is visible by default, set the focus on the first filter field (for live update mode) or on the Go button (for manual update mode).
• If the header contains empty mandatory fields, set the focus on the first empty mandatory field.
• If the visual filter bar is visible by default, set the focus on the first chart container.
• If the header is collapsed (visual or compact filter), set the focus on the first chart data point or the first table row (depending on the selected view).

Open and View the Global KPI Card via the Global KPI Tag

Clicking a KPI tag opens the KPI card, which shows the details for the particular KPI.