SAP Fiori uses qualitative, sequential, and semantic color palettes for chart visualization.

This article explains what the three color palettes are designed to do and how you can leverage their unique properties.

Palette Overview

For color names and HEX values, see Chart Color Palettes – Values and Names.

Rules

1. Only use colors contained in the SAP chart palettes.
   To ensure that we maintain visual design consistency across all charts used in all SAP applications, you should only use colors from the SAP color palettes.
2. Only use one palette per chart.
   Don’t combine colors from different palettes in the same chart. Each palette has been carefully designed to serve a distinct purpose.
3. Ensure chart color token names are referenced in the code – not HEX values!
   To support consistent color implementation across SAP UI technologies, as well as our theming capabilities, colors are defined by token names. This means that the HEX values of the colors may not be exactly the same in past, present, and future SAP visual design themes. This flexibility is made possible by the fact that the color token names will stay the same across all past, present and future SAP themes. You can get the color names and corresponding HEX values from the article on color palette values and names.
4. Don’t use color to distinguish between forecast, actual, and target values.
   Use semantic patterns instead.

Default Colors

By default, every chart type comes with built-in colors that are applied automatically, based on your dataset. Here are three examples:

Changing the Colors

There are three ways to change the colors in charts:

Qualitative Palette

Highlight Category Items

By default, all the categories use the first color from the qualitative palette. However, you can use other colors from the qualitative palette if you want to highlight category items.

Group Items by Color

You can use the qualitative palette to group items into categories. In this example, we use green for Europe, blue for America, and orange for Asia.

Semantic Palette

Using the Semantic Palette

Here are some ways you can use the semantic palette:

Illustrate the Top Three Values

This column chart uses the semantic palette to display the sales revenue per month. The color green is used to highlight the top three months with the highest revenue.

Show Positive and Negative Series

These stacked bars represent the availability of materials. The available series is green, the inspection series is orange, and the blocked series is red.

Denote Good or Bad Values

Each data point has a color based on its value. Data points are red if their value is below a certain threshold, green if their value is above another threshold, and orange if their value is between the two.

Visualize Different Levels

In this geomap, green is used to indicate states with good performance, and red for states with bad performance. The different shades express different levels of good and bad performance.

Default Color Shade Names

Selecting the Correct Combination of Shades (Semantic Palette)

There are 4 semantic colors with 9 tints and shades for each that are used to maximize flexibility for chart design application teams. For the full set of color options, see Chart Color Palettes – Values and Names.

The table below gives an example of how to combine shades for bad (negative) values. You can apply the same principle to critical, neutral, and good (positive) values.

No. of Levels

Shades to Use

Color Token Names

1 level

sapChart_Sequence_Bad

2 levels

sapChart_Sequence_Bad_Plus2
sapChart_Sequence_Bad

3 levels

sapChart_Sequence_Bad_Plus2
sapChart_Sequence_Bad
sapChart_Sequence_Bad_Minus2

4 levels

sapChart_Sequence_Bad_Plus2
sapChart_Sequence_Bad_Plus1
sapChart_Sequence_Bad
sapChart_Sequence_Bad_Minus1

5 levels

sapChart_Sequence_Bad_Plus2
sapChart_Sequence_Bad_Plus1
sapChart_Sequence_Bad
sapChart_Sequence_Bad_Minus1
sapChart_Sequence_Bad_Minus2

6 levels

sapChart_Sequence_Bad_Plus3
sapChart_Sequence_Bad_Plus2
sapChart_Sequence_Bad_Plus1
sapChart_Sequence_Bad
sapChart_Sequence_Bad_Minus1
sapChart_Sequence_Bad_Minus2

Sequential Palette

Using the Sequential Palette

Here are some ways you can use the sequential palette:

Distinguish between Past and Present

These two series use different shades of the same color to distinguish between last year and the current year.

Show Time Gradation

These stacked bars represent payable aging by country. The different gradations of brightness are used to represent different time periods.

Visualize Different Levels

This bullet chart shows direct costs in a dark shade and indirect costs in a light shade.

This geomap contains two measures. Shades of blue are used to visualize high and low values for one measure while shades of orange are used to visualize high and low values for the other measure.

Ranked Values

In this bubble chart, the size of the bubbles represents future sales deals. The probability of converting these deals is expressed using different shades of blue.

Selecting the Correct Combination of Shades (Sequential Palette)

There are 12 colors with 9 tints and shades for each that are used to maximize flexibility for chart design application teams.

The table below gives an example of how to combine shades for the default category item color (sapChart_Sequence_1). You can apply the same principle to the other colors in the palette.

No. of Values

Shades to Use

Color Token Names

1 level

sapChart_Sequence_1

2 levels

sapChart_Sequence_1_Plus2
sapChart_Sequence_1

3 levels

sapChart_Sequence_1_Plus2
sapChart_Sequence_1
sapChart_Sequence_1_Minus2

4 levels

sapChart_Sequence_1_Plus2
sapChart_Sequence_1_Plus1
sapChart_Sequence_1
sapChart_Sequence_1_Minus1

5 levels

sapChart_Sequence_1_Plus2
sapChart_Sequence_1_Plus1
sapChart_Sequence_1
sapChart_Sequence_1_Minus1
sapChart_Sequence_1_Minus2

6 levels

sapChart_Sequence_1_Plus3
sapChart_Sequence_1_Plus2
sapChart_Sequence_1_Plus1
sapChart_Sequence_1
sapChart_Sequence_1_Minus1
sapChart_Sequence_1_Minus2

Resources

Intro

The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.

Usage

Use the smart chart if:

• Data is fed through OData services.
• You need to reduce development effort.
• You would like to profit from drilldown and detailed information support.

Do not use the smart chart if:

• You create your own UI coding, and the data is not fed through OData services. In this case, use the VizFrame chart instead.

Responsiveness

Layout

Behavior and Interaction

Selection

Data points can be selected by clicking or dragging. Both single selection and multiple selection are possible. Data points, labels, and legend items can be selected. Clicking into the background deselects all data points. For more information, see Chart – Selection.

Details

Guidelines

Semantic Colors

To display chart measures, the smart chart uses semantic coloring based on the UI.DataPoint annotation.

Semantic Patterns

Resources

The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.

Usage

Use the network graph if:

• You need to display a large amount of data and contextual information. Use cases include material management and supply chains, logistics structures, and value chains.
• You want to display complex nonlinear structures, trees, and generic charts (such as organizational charts).
• You want to give the data a spatial context.

Do not use the network graph if:

• You want to visualize a document flow. Use the Process Flow control instead.
• You want to enable editing of displayed data. Note that the network graph is available in read-only display mode.
• You need to embed the chart into smaller areas or use it as embedded analytics.

Responsiveness

Layout

Types

The network graph comes with three different layout algorithms:

• Generic unordered KLay layout
• Column-based layout displayed as either vertical or horizontal swim lanes
• Force layout

Each of the layouts can be visualized as a directed or undirected chart. A bi-directional mode is also supported.

Undirected: Data dependency (parent-child) or data flow is not implemented.

Directed: Data dependency is implemented, and different chart orientation can be set. By default, the network graph is oriented left-to-right. Other chart orientations include top-down, center-out, or right-to-left.

Components

By default, the network graph is split into the header toolbar area and the graph content. Within the graph content, groups, nodes, and connectors are displayed. All of these elements are interactive and display action menus or popovers with additional information.

Behavior and Interaction

Navigation and Zoom

Component Interaction

Styles

Each node can be visualized with a circle or rounded rectangle shape. These two shapes can be combined inside one graph to provide users with deeper semantic meanings: for example, circular nodes represent customers, whereas rounded rectangles represent suppliers.

Semantic meanings can be assigned to line styles for connectors, and semantic colors can be assigned to both nodes and connectors.

Guidelines

In applications, embed the network graph only within components that use the whole canvas area, such as the tab container on the object page. Do not embed the network graph in smaller containers, such as panels, headers, tables, forms, and dialogs.

The network graph is not a substitute for a Process Flow. For more details, see the Usage section at the top of this article.

Keep the amount of information inside each node to a minimum. You can reveal more information via the details popover.

Resources

Intro

The smart chart is a wrapper around existing chart types, and can be used together with all existing chart types within VizFrame. The main purpose of the smart chart is to reduce development effort. However, this comes at the expense of decreased flexibility. The smart chart creates visualization based on the underlying OData service and the corresponding annotations. It also adds some generic functionality, such as a toolbar, complex personalization settings, variant management, breadcrumb, tooltip, drilldown and zoom capabilities. Everything that can be done using the smart chart can also be achieved using the standard VizFrame Chart, but with more development effort.

Usage

Use the smart chart if:

• Data is fed through OData services.
• You need to reduce development effort.
• You would like to profit from drilldown and detailed information support.

Do not use the smart chart if:

• You create your own UI coding, and the data is not fed through OData services. In this case, use the VizFrame chart instead.

Responsiveness

Layout

Behavior and Interaction

Selection

Data points can be selected by clicking or dragging. Both single selection and multiple selection are possible. Data points, labels, and legend items can be selected. Clicking into the background deselects all data points. For more information, see Chart – Selection.

Details

Guidelines

Semantic Colors

To display chart measures, the smart chart uses semantic coloring based on the UI.DataPoint annotation.

Semantic Patterns

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.

Intro

The calendar card is an interactive calendar for a single entity, such as a person. It shows a chronological list of appointments for the selected date.

The calendar card is an integration card that uses the generic structure of the sap.f.card control.

When to Use

You can use the calendar card to show a calendar for one person, based on the single planning calendar.

Do not use it to show multiple appointments/calendars. Use the planning calendar instead.

Components

1. Header: Basic information about the calendar card, including the title, subtitle, and appointment counter.

You can define a navigation target for the header area (recommended). This is typically the underlying application containing the full calendar.

2. Calendar title: Title set by the application team. Use a title that reflects the use of the calendar in your application context.

3. Calendar subtitle: Subtitle set by the application team to further qualify the focus of the calendar.

4. Counter: Indicates how many appointments are displayed on the card and how many exist for the selected day overall.

5. Calendar navigation: Users can navigate to the previous/next period (for example previous/next month) or use the picker to select the month and year directly.

6. Calendar with interactive days: Interactive calendar, showing the selected day, current day, and special days.

7. Legend: In-place legend. You can specify the number of items that are shown. The More (x) text indicates how many legend items are hidden.

The different types of legend items are indicated by different shapes: Squares refer to highlighted days, circles refer to types of appointment.

Group titles from the planning calendar legend are not shown in the calendar card.

8. Appointment list: Shows appointments for the selected day. You can define the number of visible appointments.

9. Appointment duration: Indicates the duration using a dynamic combination of start date, duration, and end date. The format is determined automatically based on the user’s locale.

10. Appointment: The appointment can have an icon, a title, and a subtitle.

The appointment title and subtitle do not wrap. If there is insufficient space on the card, the text is truncated.

11. Indicator for more appointments: The More button indicates that additional appointments exist for the selected day.

You can define a navigation target for the button (recommended). This is typically the detail app containing all the appointments.

Behavior and Interaction

Calendar Card Header

When a day is selected, the counter adapts to show the number of appointments for that day (visible appointments/total appointments).

If a navigation target has been defined, clicking the navigation header opens the corresponding application.

Selecting a Date

Instead of offering a date picker in a popover, the calendar card changes views in place and allows the user to drill in.

At each level, the user can select the relevant period, navigate back and forth using the Previous and Next arrows, or drill down to the next level using the date picker.

Appointment List

When a day is selected, the appointment list adapts to show the appointments for that day.

If a navigation target has been set for the appointment, clicking the appointment navigates to the corresponding application (one click area).

If additional appointments exist, and a navigation target has been defined, clicking More opens the corresponding application.

Responsiveness

The responsive behavior of the calendar card depends on the container control of the host environment (for example, SAP Fiori launchpad). The size of the card adapts dynamically to the size of the container.

Width

Calendar cards adapt to the available width. If the width exceeds 589 px, the card switches automatically from a 1-column layout to a 2-column layout.

You configure the width of the calendar card by specifying the number of grid columns. The width of the card (and thus the breakpoint for the 2-column layout) is then determined by the grid.

Height

The height of the calendar card is determined by the content (no scrolling possible). It depends on the number of appointments that exist for the selected day and the maximum number of visible appointments you have defined.

When the width exceeds 589px and the card rearranges into two columns, and the height of the card shrinks. The minimum number of rows is determined by the number of visible appointments.

Note: If the calendar card snaps to the grid row (depending on overall card snapping behavior), this will sometimes result in blank space in the card.

Top Tips

• Keep the legend as simple as possible.
• Consider the height of the card when you define the number of visible appointments.

Related Links

A chart popover is used to display information or an action related to the selected data points of a chart.

By default, the chart popover:

• Displays dimension members and measure values fed into the chart that relate to the data point.
• Displays the number of selected items when in multiselection mode.
• Does not display related actions.

The entire content of the popover can be changed or a related action can be added at the end.

Selection and Popover

The content displayed in the popover depends on the selection mode; in other words, whether the chart is in single-selection or multiselection mode.

In Single-Selection Mode

When the user clicks an item that is not selected, the popover appears with information about this selected item only. The item that was previously selected becomes deselected.

In Multiselection Mode

When the user clicks an item that is not selected, the item is added to the selection. The popover appears with information about the last selected item and any other selected items. When the user clicks an item that is already selected, this item is removed from the selection. If there are no more selected items, the popover disappears.

Structure

1. Related information about last selected item
2. Number of selected items
3. Related actions

For more information, see the table below.

Default Information

Number of Selected Items

If multiselection is possible, the popover displays the number of items that have been selected. If multiple items have been selected, it is not possible to display the values of all selected items. If you need to display these values, you will have to develop your own solution. For example, you can add a Compare Values or Display Values button at the bottom of the popover. This button is only displayed when multiple items have been selected.

Related Actions

Group of Actions

Customization and UI Controls

The UI controls for customizing the popover are listed below.

sap.m.responsivePopover:

1. Use SAPUI5-formatters
 (currency included)
2. sap.m.ActionListItem

In-Place Navigation:

1. sap.m.List with sap.m.StandardListItem type=”Navigation”
2. sap.m.NavContainer
 for the animation 
(left to right and right to left)
3. sap.m.Page for the scroll bar

Resources

The process flow control allows you to show flows of multiple types of objects, such as documents and approvals. Document flows can split into numerous branches, while approval flows are usually straightforward.

Usage

Use the process flow if:

• You need to display document flows.
• You need to display approval flows.
• You need to display other kinds of flows with linear and/or branching paths.

Do not use the process flow if:

• You want to display the process flow header in combination with something other than the flow map. In this case, use the icon tab bar (style: process) instead.

Responsiveness

The process flow reacts to the size of the container it is put into. It has four zoom levels, with level 1 being the largest and level 4 the smallest. In containers wider than 1024 px, level 2 is chosen automatically. For containers from 600 to 1023 px, level 3 is set, and below 600 px, it is level 4. For more information, see Behavior and Interaction.

Layout

The process flow enables different layout forms within the nodes:

• The default layout contains fixed sections that can easily be filled with content.
• The freestyle layout comprises an empty container that can be filled with different controls.

Default (Fixed) Layout

At the top of the control is a bar, with the zoom buttons on the left and the full screen toggle on the right.

Below the bar is the process flow header, which can also be used on its own if the complex visualization of nodes is not required. The header consists of multiple steps, each of which is visualized by a circled icon. Each icon is surrounded by a circular chart to indicate the distribution of statuses per column.

The flow map lies beneath the header. The elements belonging to a certain step are vertically aligned beneath one another. Arrows point to the next (follow-up) element or multiple elements. Dotted arrows pointing to semi-transparent elements indicate planned or pending elements.

Naturally, the header information is mandatory because it is the key identifier of an object. The header should contain a brief but meaningful description and, if necessary, an ID in brackets.

Although the status is optional, an icon appears on an item without a status at the smallest zoom level. When the user zooms out completely, only the status icon remains visible on an item. Without it, the element looks broken and does not provide any information.

There are two options to filter the nodes for certain types or attributes. For simple filtering, you can use a filter button in the toolbar to trigger a filter dialog. For more complex filtering, the filter bar control can be placed on top of the process flow.

Freestyle Layout

The freestyle layout gives you the most freedom within the borders of each node. Inside this empty container, you can structure your content as your use case requires. Of course, you still need to conform to the guidelines for each control you use in your layout. The next sections show two examples of freestyle layouts with texts and images.

If text is the main focus of a node, we recommend using the “dog ear” visualization (property FoldedCorners = true, see Styles section for further details). If an image is the most notable content of a node, we advise against using the “dog ear” visualization.

Regardless of the controls you use inside the nodes, ensure that users can easily identify the item or meaning behind a node without having to click it. Users should only have to click to retrieve additional information or to perform an action, but not to identify an item. An exception to this rule is the lowest zoom level, which only shows the most basic information.

What should be displayed at the lowest zoom (level 4) depends on the context and use case of your application. If an image is the centerpiece of the node, a down-sampled version of this image can help users to identify each individual node. In other instances, an icon might be more appropriate to show the status of a node or hint at its content. In both cases, it is mandatory for applications to supply an icon (such as  to indicate that the object is in process, or   to show that the item contains textual information). You can also use status icons with semantic colors if they support the use case.

You can offer actions on the popover or quick view that is triggered to show additional information. If no additional information is required, you can also use the node’s click event to trigger an action sheet. However, use this latter option with caution; for most use cases, you will need to show additional information, especially at the lowest zoom level.

Freestyle Example: Text

If you need to display text inside a node, you can use the built-in click event to show a popover with the full text and any additional actions. While zooming out, less and less text is shown until the smallest zoom level is reached. Since text cannot be previewed in such a small container, use the icon   to indicate that the item contains textual information.

Freestyle Example: Image

The following examples show how images can be displayed inside the process flow nodes – in this case to represent an employee. Additional information, such as the employee’s profile and contact information, can be shown in a quick view. As the node gets smaller with each zoom level, some information needs to be omitted. On the lowest zoom level, only the image is shown.

Components

The process flow control consists of the process flow header and the flow map.

For better usability, it is highly recommended to add a toolbar with zooming controls (    ).

A full-screen switch is optional and can also be put in the toolbar (  ).

Behavior and Interaction

Navigation and Zoom

User can move the whole flow with the left mouse button held down, just like they would move a street map in a browser.

To zoom in or out, the user can use the mouse wheel or, if implemented, click the respective buttons on the bar on top of the flow line. The zoom is semantic: detailed information is added or removed depending on the zoom level.

If the process flow is wider than the available space, a chevron (< or >) appears on the side where the flow extends beyond the visible area. A number also indicates how many process steps lie outside, such as < 2 or 5 >.

Level 1

Larger elements provide the most space for
textual information. However, fewer elements
fit on the screen.

Level 2 (automatic preset for screens wider than 1024 px)

The standard size provides the best combination
of content information and overview.

Level 3 (automatic preset for screen widths from 600 px to 1023 px)

Elements are reduced to header and status
information to provide a better overview for
large flows.

Level 4 (automatic preset for screens below 600 px width)

The smallest zoom level provides a maximum
overview of the flow while the information about
each element is reduced to a status icon.

When a node is clicked, applications should provide a popover with additional details about this element. It should give users a deeper insight into the status or, in the event of an issue, a way to solve the problem. From the quick overview, users should be able to navigate to the element’s fact sheet.

If no additional information needs to be displayed, an action sheet can be triggered instead of the popover to allow users to perform actions on the item.

Labels on Connections

Some use cases focus on the connections between the nodes as much as on the nodes themselves. For these cases, we provide labels that can be displayed on each connection which, in turn, provide the user with the necessary information.

If multiple paths overlap, applications need to aggregate the respective labels and show the ‘worst’ status.

When the user clicks an aggregated label, app developers need to provide a popover showing a list of connection paths for the user to select from.

In the popover, the user should now be able to browse through the paths, while the process flow is updated accordingly.

To give the user more information, a Details button needs to be shown in the footer.

The details must be shown in the same popover, and a back button must be offered that allows the user to return to the path overview.

The footer of the details overview can contain up to two actions.

Highlighted Path

The “highlighted path” feature allows users to focus on specific nodes and their path through the process flow, for example by highlighting a search or filter result.

Example: A user searches for a specific item inside an order. The nodes containing or exclusively representing this item are highlighted, while the rest of the flow is dimmed.

Attention: Do not combine a highlighted path with a selected path. When you set one path type, make sure that the other is deactivated.

Business Focus

The business focus is a rarely used feature. It allows applications to put a visual focus on a node that is separate from (and not to be confused with) the selection or keyboard focus.

If, for example, the process flow is used next to another control (such as the timeline), the business focus can be used to highlight a node that corresponds to a selection in the other control:

1. The timeline shows an automated post “There is an invoicing problem with Item 0815 from Order 4711.”
2. The user clicks the post (not onto a specific link).
3. The respective node in the lane Invoice is highlighted.

If you use the business focus, make sure that only one node is selected at a time.

Editing

If users can edit a node’s content, offer an Edit button. Place the button on whatever is triggered when the user clicks a node (action sheet, popover, quick view). The editing itself can be handled in a small dialog. The information structure depends on the controls used inside the node. Usually, a form and/or text areas will cover most use cases.

Styles

Two visualizations are available for the nodes inside the flow: a specific visualization for documents, and one for general objects (basically everything except documents). App teams can use the FoldedCorners property to choose the type of objects that the process flow represents.

FoldedCorners = true: This style gives the node a “dog ear”, which makes it very recognizable as a document.

FoldedCorners = false (default): This setting has no specific visual style and is therefore suitable for all object types.

The property affects the entire flow; in other words, it cannot be applied solely to individual nodes. Therefore, it should only be set to true if all the nodes represent documents (or document-like objects). If some or all of the elements are better visualized with the general style, FoldedCorners should be set to false.

Aggregation

Some flows can be arranged more clearly by using aggregation. Nodes that belong to the same lane (column) can be displayed as a stack by setting the property Type to Aggregated. This means that nodes that would usually be displayed one below the other are shown as a stack of nodes.

The interaction for these stacks is identical to the regular nodes: the control provides a single click event that app developers can use to show a popover with more detailed information.

The description on these stacks should be helpful to users, for example, by telling them how many nodes are in the stack. Aggregated amounts can also be shown.
Use the following format to describe the stack and the number of nodes it contains: <Object Type> (<Counter>). For example, Invoices (8) or Sales Orders (42).

The statuses in the stacks can be heterogeneous. However, it is imperative to show the ‘worst’ status(es) at the top so that users know whether they have to take action.

In the upper example on the right-hand side, the nodes under Delivery and Invoice are shown as stacks instead of individual nodes.
The lower example on the right shows the same stacks when zoomed out (level 4).

Guidelines

The process flow header is not a substitution for the icon tab bar. For more details, see the Usage section at the top of this article.

Keep the amount of information inside each node to a minimum. Reveal more information via a popover.

Although technically possible, the node titles should not be turned into links. The IsTitleClickable property should be left in its default state (“false”). Titles that the user can click may lead to usability issues. Handle every action or interaction via a popover and/or navigation to a subsequent page.

UI Texts

Use a noun to describe the process phase.
Example: Accounting

If the process and a business object have the same name, add Processing to the process name.
Example: Order Processing (in this case, “Order” is used for the business object)

Resources

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

The network graph displays a large amount of data by highlighting the relationships between individual records. Records are displayed as nodes, and connectors (lines) show the relationships between them. The vivid display of network nodes can highlight non-trivial data discrepancies that would have been previously overlooked.

Usage

Use the network graph if:

• You need to display a large amount of data and contextual information. Use cases include material management and supply chains, logistics structures, and value chains.
• You want to display complex nonlinear structures, trees, and generic charts (such as organizational charts).
• You want to give the data a spatial context.

Do not use the network graph if:

• You want to visualize a document flow. Use the Process Flow control instead.
• You want to enable editing of displayed data. Note that the network graph is available in read-only display mode.
• You need to embed the chart into smaller areas or use it as embedded analytics.

Responsiveness

Layout

Types

The network graph comes with three different layout algorithms:

• Generic unordered KLay layout
• Column-based layout displayed as either vertical or horizontal swim lanes
• Force layout

Each of the layouts can be visualized as a directed or undirected chart. A bi-directional mode is also supported.

Undirected: Data dependency (parent-child) or data flow is not implemented.

Directed: Data dependency is implemented, and different chart orientation can be set. By default, the network graph is oriented left-to-right. Other chart orientations include top-down, center-out, or right-to-left.

Components

By default, the network graph is split into the header toolbar area and the graph content. Within the graph content, groups, nodes, and connectors are displayed. All of these elements are interactive and display action menus or popovers with additional information.

Behavior and Interaction

Navigation and Zoom

Component Interaction

Styles

Each node can be visualized with a circle or rounded rectangle shape. These two shapes can be combined inside one graph to provide users with deeper semantic meanings: for example, circular nodes represent customers, whereas rounded rectangles represent suppliers.

Semantic meanings can be assigned to line styles for connectors, and semantic colors can be assigned to both nodes and connectors.

Guidelines

In applications, embed the network graph only within components that use the whole canvas area, such as the tab container on the object page. Do not embed the network graph in smaller containers, such as panels, headers, tables, forms, and dialogs.

The network graph is not a substitute for a Process Flow. For more details, see the Usage section at the top of this article.

Keep the amount of information inside each node to a minimum. You can reveal more information via the details popover.

Resources