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.

Intro

The analytical list page (ALP) offers a unique way to analyze data step by step from different perspectives, to investigate a root cause through drilldown, and to act on transactional content. All this can be done seamlessly within one page. The purpose of the analytical list page is to identify interesting areas within datasets or significant single instances using data visualization and business intelligence.

Visualizations help users to recognize facts and situations, and reduce the number of interaction steps needed to gain insights or to identify significant single instances. Chart visualization increases the joy of use, and enables users to spot relevant data more quickly.

The main target group are users who work on transactional content. They benefit from fully transparent business object data and direct access to business actions. In addition, they have access to analytical views and functions without having to switch between systems. These include KPIs, a visual filter where filter values are enriched by measures and visualizations, and a combined table/chart view with drill-in capabilities (hybrid view). Users can interact with the chart to dig deep into the data. The visualization enables them to identify spikes, deviations and abnormalities more quickly, and to take appropriate action right away.

Usage

Use the analytical list page if:

• Users need to extract key information to understand the current situation or identify a root cause. The way the data is presented is crucial for giving them the insights they need to take the right action.
• Users need a way to analyze data step by step from different perspectives, investigate a root cause through drilldown, and act on transactional content within one page.
• In addition to the filtered dataset, users need to see the impact of their filter settings in a chart (visual filter).
• Users need to switch between integrated chart and table views (hybrid view).
• Users need to see the impact of their action on a global key performance indicator (KPI).
• Users need to find and act on relevant items out of a large set of items by searching, filtering, sorting, grouping, drilling down, and slicing and dicing.

Do not use the analytical list page if:

• Drilldown is rarely used, not used at all, or is only needed after navigating to another page, rather than as free or flexible drilldown within the page itself. In this case, a list report might be sufficient for your use case.
• Users need different visualizations for the entire dataset (for example, as a table or chart), but don’t need to work with both visualizations on the same page (for example, in a reporting scenario). In this case, a list report might be sufficient.
• Users need to find and act on relevant items from within a large set of items by searching, filtering, sorting, and grouping, without using drilldown or “slice and dice”. In this case, consider using a list report.
• Users need to work with multiple views of the same content, for example on items that are “Open”, “In Process”, or “Completed”. They want to be able to switch views using tabs, segmented buttons, or a select control. In this case, consider using a list report.
• Users need to see or edit a single item with all its details. Use the object page floorplan instead.
• Users need to find a specific item, and the item or an identifying data point is known to the user (such as a code). In this case, use the initial page floorplan.
• Users need to work through a comparably small set of items, one by one. In this case, use the worklist floorplan.
• Users have a trivial use case that does require the use of a chart, but that do not involve identifying a root cause, analyzing data, or drilldown. Instead, use a list report with a table/chart switch.

Structure

This section describes the basic layout of the analytical list page, as well as the different layout variants.

Basic Layout

Analytical List Page Header

The page header can be expanded and collapsed on click. Different content is shown in the expanded and collapsed states. For more information about the basic behavior of the header, see Dynamic Page Header.

Collapsed Header

Expanded Header

Analytical List Page Content Area

Analytical List Page Header

Variant Management

Global KPI Tags and Cards

Filter Area: Visual Filter Bar and Filter Bar

Filter Type Switch

Carrying Forward Filter Selections

Visual Filter to Compact Filter

Any values selected in the visual filters are always carried forward to the corresponding compact filters.

Compact Filter to Visual Filter

Filter dimensions that are part of a visual filter are synced to the visual filter. If the dimension value(s) chosen in the compact filter are part of a visual filter, they are shown as selected chart dimensions in the visual filter (single or multiple selections).

Filter dimensions that are not part of the visual filter, parameter values, and interval-based dimensions are applied to the filter query and the content is refreshed.

To show complex conditions, click the link for the number of selected items at the top of the visual filter.

Visual Filter Bar

The visual filter bar combines measures or item counts with filter values. The visual filter bar becomes more powerful if you match measures to the filter dimension instead of just item counts. Use the visual filter bar if you would like to give the user a condensed overview of the data in the dataset. Chart visualization increases the joy of use, and enables users to spot relevant data more quickly.

Chart Types in the Visual Filter Bar

Currently, the visual filter bar supports three interactive chart types:

• Interactive donut chart
• Interactive line chart
• Interactive bar chart

These interactive charts are also referred to as visual filters.

Using Interactive Charts

The interactive charts come with the following features and rules:

• Minimum number of interactive charts: Show at least three visual filters and try to use different chart types.
• Filter title:
  • Use the following naming convention for the filter title, using title case:
    [Measure Name] by [Dimension Name] | [Scale Factor] [Unit of Measure].
    Examples:
    Project Costs by Project | K EUR
    Sales Volume by Commodity | M PC
  • For an item count, use the following naming convention for the filter title, using title case:
    Number of [Dimension] | [Scale Factor] [Unit of Measure].
    Examples:
    Number of Products | PC
    Number of Contracts by Month
  • Note that for some use cases, it might be appropriate to replace “Number” with a different expression. Bear in mind that the space for displaying the filter title is limited. If the measure and/or dimension names are longer than the predefined space, the text will be truncated.

• Filter-to-filter dependencies: Ideally, the filters depend on each other. By selecting one or several chart data points, users can perform a quick analysis of the dataset.
  Examples: Supplier with the lowest supplier performance this year, product with the highest sales volume in March in the EMEA region
• Adding additional filter values: All charts have a maximum number of filter values that can be displayed within the chart itself. More filter values can be selected using the value help or the select popover.
• Selected values: Any data point or segment that is selected in the visual filter’s interactive charts will remain selected even when the user changes the measure, chart type, or sort order in any of the charts. If a selected record falls outside the top/bottom three records being displayed, the number of selected records is shown in parentheses at the top right of the chart.
• Semantic colouring: All interactive charts support semantic colors to indicate the criticality of filter values.
• How to design a visual filter: To design a visual filter, choose a meaningful measure out of the dataset and match it to a filter dimension. If no measures or no meaningful measures are available, use an item count instead. Have a look at the visual filter bar article for more information.

Filter Dialog

In the filter dialog, the user can switch between the visual filter bar and the compact filters using a toggle button, and also manage the filters. For more about the standard filter dialog, see Filter Bar. Visual filters are explained in more detail below.

Hybrid View

Chart-Only View

Table-Only View

Behavior and Interaction

The expand/collapse header and pin/unpin header features work as in the dynamic page.

Select Filters in the Visual Filter

Unlike micro charts, the visual filter charts are interactive. In live search mode, selecting a filter value triggers data filtering in the content area. Both single and multiple selection are supported.

To select a filter value, the user clicks on a value in the chart. The filter can be removed by either clicking on the value help link, or by clicking on the same value in the chart again. The user can select more filter values using the value help or select popover.

Any data point that is selected in a chart still remains selected when the user selects a data point in another chart. Filter values react on each other. If a selected record falls outside the top/bottom three records being displayed, the number of selected records is shown in parentheses at the top right of the chart.

Switch Views: Hybrid, Chart-Only, and Table-Only

Users can switch between the hybrid view, chart-only view, and table-only view.

If the user selects values and then switches the view, the selection remains intact. See the table below for more details.

Show/Hide Table Entries in Hybrid View and Table View

The table toolbar for the analytical list page offers a Show   and Hide    table entries feature as a toggle switch in the hybrid and table views:

• If the Show icon is active, the table shows all items. These include highlighted entries (where values are selected in the chart) and non-highlighted entries.
• If the Hide icon is active, the table shows only items that are selected in the chart.

For example, if the user selects SAP’s Sales Revenue for 2012 as Customer in the chart, all records relating to SAP’s Sales Revenue for 2012 are highlighted (but not selected) in the table. Note that the record is still highlighted even if Customer not displayed as a column in the table. If the table rows are grouped, the entire grouping is highlighted, even if only one record within the grouped set is affected by the chart selection. All values that are not selected in the chart are “hidden” and are not shown in this table mode.

Guidelines

Show the filter dimension with one measure in the visual filter, not multiple measures

Filter dimensions in the compact filters (filter bar) have exactly one representation in the visual filter bar.
Do not show the same filter dimension with two or more different measures at the same time in the visual filter bar. The example shows the filter Dimension Year with two different measures Revenue and Quantity. Showing the filter dimensionYear twice is not in sync with the compact filter, where it is shown only once. Furthermore, matching between the two filter types will not work.

If the use case requires you to show a dimension with different measures, consider using an overview page instead.

The lightbox control allows the user to view an image in its original size. This control displays the image in a popup while dimming the rest of the screen.

Usage

Use the lightbox if:

• The thumbnail view is not detailed enough, and it would help the user to see the image in its original size.
• The original size of the image is bigger than the thumbnail.

Do not use the lightbox if:

• The image you are using is smaller than or as big as the thumbnail.
• There is another click event attached to the image control.
• You are using an image placeholder to display the object.

Responsiveness

Components

Behavior and Interaction

Resources

The Gantt chart enables you to present time-dependent data in an intuitive graphical manner, from a hierarchical and/or resource-oriented viewpoint. It shows the user the sequence in which various activities occur and the dependencies between these activities. The user can easily see the start and end of a particular activity.

The Gantt chart control provides the basis for creating such a Gantt chart and is a generic tool. Applications can consume the control in order to implement their use cases, and if necessary, they may even enhance the control.

It consists of three areas: a chart area, a table area, and a global toolbar.

Another feature is the option to have a split screen that includes two or more views next to one another, each view consisting of one table and one chart. These views can be arranged vertically or horizontally, and they share a common (global) toolbar.

Usage

Use the Gantt chart if:

• You want to build an interactive and complex planning application involving activities, resources, hierarchical project structures, relationships, and other basic shapes such as diamonds, utilization line charts, or bar charts.
• You want to build a simple application which may be read-only or which does not have a table component.
• You want to build a simple application that is also capable of evolving into a more powerful application later on.

Do not use the Gantt chart if:

• Your application needs to run on a smartphone. Consider using the planning calendar control instead.
• You need to show less than 100 rows. You can still use a Gantt chart, but consider using the planning calendar control instead.
• You want to show only a simple graphical representation based on rectangles (in other words, without relationships, milestones, and so on). Consider using the planning calendar control instead.

Responsiveness

The Gantt chart is responsive in principle. It can be displayed in a small window (size M) and preserve its layout without needing to create multiple levels of scrollbars nested in one another in the browser window. However, the control is not available in smartphone size (size S).

The Gantt chart control can be used to display data in tablet (size M).

Types

Like all SAP Fiori controls, the Gantt Chart is shown in compact mode on a desktop and in cozy mode on tablets.

For desktop devices, you can fit even more rows onto the screen by using the condensed mode together with the compact mode. This renders less white space for each item.

The condensed content density must always be set in addition to the compact mode. Do not use the condensed mode on its own. Do not mix condensed with cozy. Doing so could lead to unpredictable or unwanted results, such as cozy-sized controls in condensed-sized containers, missing padding, and so on.

Note that neither compact mode nor condensed mode support touch interaction. Even on a desktop with a touch screen, users will have difficulty selecting rows or using controls inside the cells with their fingers.

Furthermore, condensed mode is not available for Internet Explorer 9. If you plan to use condensed mode, please provide a fallback.

For more information on cozy and compact modes, see content density.

Components

The Gantt chart consists of three areas: a global toolbar, a table area, and a chart area. There can be more than two table and chart areas in a split-screen layout.

Global Toolbar

The global toolbar provides standard functions, which are required by several applications. However, app teams can add extra functions. The user can also hide certain standard functions.

The following standard functions are available:

• Legend (see details below)
• Settings (see details below)
• Zooming (see details below)
• View combination switch: This dropdown menu is shown only if the consuming application provides more than one view combination.
• View arrangement: Hide one of multiple views; add views; switch between vertical and horizontal alignment of the views. This can be skipped by the consuming application.
• Overflow behavior: The global toolbar has the same overflow behavior as the SAPUI5 toolbars. For more information, see toolbar overview.

Legend

For the legend, we provide two templates to address fast implementation in most use cases:

• List template: Displays a list of shapes and their corresponding texts. You can also add a checkbox before each shape, which allows the application to control if the shape will be displayed in the chart.
• Dimension template: Shows a matrix of shapes and their corresponding texts for varied combinations of two dimensions.

Settings

Users can configure the display of the Gantt chart using the Change Settings button ( ). The control offers some standard settings (such as Indicate Current Time, Show Cursor Line, Show Divider Lines, Show Ad Hoc Lines, and Synchronize Time Scroll). The app team can also add their own settings to the settings dialog, giving users more options to control the behavior of the Gantt chart.

You can hide the Change Settings button if the settings are not suitable for your use case. The Gantt Chart control provides the API setToolbarSchemes, which allows applications to override the default buttons in the chart toolbar. Other APIs also allow you to define default values for all the settings. For more information, check out the API reference.

Zooming

The control provides a zooming function for the chart area. It consists of a Zoom In/Zoom Out magnifier buttons and a slider. You can hide the slider if there is not sufficient room for it, for example in size M. The zooming function also controls the labelling of the time axis, which determines whether you see years, months, or days. For more information, see time axis.

As shown in the above examples, you can display a vertical line indicating the current date. The actual date can be displayed on the axis. It’s also possible to show non-working time frames, such as weekends, by graying out these time frames. These dates can vary from line to line.

Basic Shapes

The Gantt control offers these basic shapes:

• Rectangle
• Polygon
• Line (for example, to show notifications for rectangles)
• Triangle (for example, to represent constraints such as time windows)
• Diamond (for example, to represent milestones)
• Chevron (for example, to represent project phases)
• Cursor (for example, to represent checklist items)
• Image (for example, to place images in the chart)

These shapes can also be combined. The chart control can render the shapes with different border and fill styles and border and fill colors, and use gradients. For more information, see colors.

App teams can add their own shapes, but they must adhere to the chart guidelines on colors. In general, you should use the qualitative palette, but if you need more colors, use the sequential palette.

When choosing the colors and hues to represent different object types, remember to select those that have a significant contrast.

The most commonly used shape is the rectangle (or bar).

Although it is technically feasible to use two bars above and below each other in one row, we do not recommend this practice. Particularly with high screen resolutions, this can lead to visual crowding so that the user cannot discern between different elements.

For example, if you want to show the degree of completion in a bar, it may be better to superimpose the finished section using a different shade over the original task.

Relationships

You can link two shapes with a line in various styles and colors. The exact meaning of the relationship depends on the use case and the application. However, it usually implies that one activity has to be performed or at least started before the subsequent activity can begin.

• A relationship can begin from the start or end date of a shape.
• A relationship can end at the start or end date of a shape.
• The end of a relationship is shown using an arrow.
• One shape can have multiple relationships.

The app team should define the logic of a relationship, such as rescheduling.

Utilization Chart

The utilization line chart and utilization bar chart enable you to display the level of consumed capacity of a resource at a specific point in time.

The system displays the utilization curve of the selected resource in the chart panel. You are notified of low load utilization and over-capacity by predefined colors. Moreover, the tooltip along the utilization curve displays the utilization of a resource in specific aspects according to your settings. You can customize it to fit your business needs, for example, to display the loading utilization of a vehicle resource in terms of volume or weight.

Recommendations

Use line widths large enough for the user to distinctly recognize the line. Avoid using dotted or dashed lines whenever possible.

Table Area

The Gantt control contains a table area that allows you to display and edit details of each line. For example, you may want to edit dates using a date picker rather than dragging a shape into the chart area. The table used in the control is the SAPUI5 tree table.

Various tooltips can be shown, but you should not use them to show additional information because users cannot access this functionality on touch devices.

The Gantt chart supports various events, allowing you to build rich and interactive applications.

Shape Selection

When a shape (including relationships) is clicked, the shape is highlighted and an event is raised. The application can provide respective event handling to catch the event and perform tasks as needed, such as showing an action sheet, or showing a detailed information popover. A parameter is provided to enable three different selection behaviors for different usage environments:

• Single selection of the shape via clicking
• Multi-selection of the shapes via clicking
• Multi-selection of the shapes by pressing the Ctrl key and clicking

Shape Drag and Drop

When you click a shape and hold the mouse in the chart area, a shadow of the shape moves along the mouse. When you release the mouse, an event is raised, and then the application can provide an event handler to catch the event and perform tasks as needed, such as moving the shape to a new position. You can also drag and drop the shape across different views inside the same Gantt chart or even outside the Gantt chart; it’s also possible to drag-and-drop multiple selected shapes.

Shape Resize

When you move the mouse icon to a certain border of a shape, the mouse icon changes into a double-headed arrow, pointing left and right. This indicates that you can resize the shape. You can click and hold the mouse and then drag the shape border horizontally. Once the border reaches the expected position, release the mouse. The Gantt chart raises an event when the mouse is released. Your application can use an event handler to catch the event and then perform tasks as needed, such as changing the duration of the shape.

Relationship Creation

You can connect shapes in the Gantt chart. This can be used to represent the relationship between two activities.

To connect shapes:

1. Click a shape to display its connection points on the shape borders.
2. Click the connection point of the shape and then slightly drag it. This displays the connection points of all other connectable shapes.
3. Connect the shape to another one by reaching its connection point via drag and drop.

Row Selection

You can select a row the same way as in a tree table, and the corresponding row in the tree table and chart part is highlighted;

Here are other important events supported by Gantt control:

• Chart click
• Chart right-click
• Chart double-click
• Chart mouse over
• Horizontal scroll
• Vertical scroll
• Splitter resize

For more information, see the API reference.

Resources

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