The map container is a predefined feature set for maps. It fits most use cases and makes it easier for app developers to work with maps.

If you wish to display a geomap or an analytic map without using the map container features, the app developer can also opt to use the analytic map or geomap control.

Responsiveness

Note: Map container on smartphone displayed menu button instead of list panel icon because of the small screen size.

Components

View Switch (Optional)

Menu for Selection Modes (Optional)

Personalization (Optional)

Full-Screen Mode

Overflow (Generic)

Prioritization

Grouping

List Panel Stack (Optional)

Legend

We recommend to include the map legend in the list panel. All necessary features for a legend are provided through the list panel stack (see above).

If your specific use case does not allow you to include the legend in the list panel, you can also use the map legend.

Navigation Tools

Home Button

The map container provides a Home button. Clicking on the Home button leads to the initial zoom position.

Rectangular Zoom

The Rectangular Zoom button can be used to zoom to a specific position. The rectangular zoom is enabled for the compact form factor by default, and disabled for the cozy form factor. For more information on cozy and compact form factors, see content density.

Zoom In/ Zoom Out

The map container provides Zoom In ( ) and Zoom Out ( ) icon buttons, which are positioned on the bottom right corner of the map. When the user clicks these buttons, the chart automatically zooms in or out to the most appropriate scale.

By default, these buttons are enabled.

Behavior and Interaction

The buttons have a set priority for the overflow by default. The application developer can change this priority. High-prioritized buttons will overflow last.

On desktop and tablet devices, the list panel stack is always visible, whereas the transparent toolbar overflows. The navigation control is hidden behind the panel list stack.

On a smartphone devices, the list panel stack is minimized to a menu button on the top left. The menu icon always remains on the screen, whereas the transparent toolbar buttons overflow. Clicking on the menu button, the list panel stack opens in full-screen mode.

We generally recommend using either icon buttons or text buttons within the transparent toolbar, but not both. Icons and text should not be combined into one button. Buttons with icon and text only appear in the overflow menu. Buttons are always aligned to the right.

Guidelines

• Think carefully about what actions you really need in the transparent map toolbar – do not overload the map toolbar with actions.
• Think carefully about what content you really need in the panel list stack – do not overload the panel with content.
• Think carefully about which features make sense on the map if the map is not used in full screen. For example, it wouldn’t make sense for a map to have a list panel stack if it is being featured on a card of an overview page.
• Use tooltips for switchable content. For example, label icon buttons as “geomap” or “analytic map” in the toolbar.

Resources

Intro

Mass editing allows users to simultaneously change multiple objects that share the same editable properties.

Usage

Use mass editing if:

• Users need to change one or more values for multiple objects.
• The objects share the same editable properties, such as Product Category and Status.

Do not use mass editing if:

• The objects do not share any of the same editable properties.

Components

Mass editing is done in a dialog containing combo boxes and select controls.

The select control restricts the user to a predefined set of values. Additionally, the combo box allows the user to enter a custom value.

Behavior and Interaction

Users will typically select multiple objects from a list or table and press the Edit button. This triggers a modal view dialog containing a select control or combo box for each visible column in the table.

All the existing values are listed alphabetically in the dropdown menu without duplicates. Selecting a value or entering a new one overwrites all the existing values.

In the example below, the user’s task is to make everyone’s salary the same.

The preselected option in the select control or combo field depends on the existing values in the table column:

• If the values are different, < Keep Values >.
• If the values are all identical, that specific value is preselected.
• If a column contains no existing values, the option < Leave Blank > is preselected.

If it’s technically possible, the option < Clear Values > is available in the dropdown list to remove all the values in a column.

If a dialog can be used to enter a new value, the option < Use Value Help > or < Use Select Dialog > will be displayed in the dropdown list.

Guidelines

The examples below illustrate how to “translate” controls into their mass editing equivalent.

Checkbox

Composite Fields

Date Picker

Input (any characters allowed)

Input (restricted to specific characters, such as numbers)

Input (with value help or select dialog)

Radio Buttons

Rating Indicator

Segmented Button

Slider

Switch

Toggle Buttons

General Guidelines

• Provide mass editing in a dialog after the user selects multiple items from a list or table and presses the Edit button.
• Ensure that the option < Keep Values > is listed before the existing values in the dropdown menu.
• Ensure that the option < Leave Blank > is preselected if a column doesn’t contain any values.
• If it’s technically possible, you can provide the< Clear Values >  option in the dropdown list to clear all the values in a column. However, do not make this option available if entering a value is mandatory.
• Include the option < Use Value Help > or < Use Select Dialog > if a dialog or value help can be used to pick a new value – just ensure that the previously selected value (or choice) is restored to the input field if the user presses Cancel in the value help dialog.
• If your application also allows the creation of objects, try to structure the create and mass edit screens similarly. This reduces the cognitive load for the end users. The same rule applies if your users have an additional SAP Fiori application for creating the object.
• If certain fields belong together semantically (such as First Name/Last Name or City/ZIP Code), arrange them in such a way that the user can recognize the connection.

Special Characters (“<” and “>”)

Always use the entries < Keep Values > and < Leave Blank > as described in this guideline: They must start with “<” followed by a blank space, and end with a blank space followed by “>”.

These two characters have been chosen because they are not usually used in text form in objects.

In the unlikely event that these characters are already used by a customer, replace them with another set of unlikely special characters that are not used by this customer. However, you must still ensure that < Keep Values > and < Leave Blank > stay at the top as the first two entries.

Related Links

This page will help you choose the correct chart when you want to compare items that do not need to be displayed in a particular order.  This type of comparison is also called nominal comparison, category comparison, or structure analysis. These chart types can be used to compare items such as revenues in a list of products, or transaction volumes in a list of banks.

If the items you want to compare have an intrinsic order such as dates, age, or time periods, please see the Chart – Variation through Time page.

One Set of Values

If you want to compare items based on one type of value, we recommend using a bar chart as shown in the example below.

You can make it easy to compare items by ranking them in order of the largest value to the smallest value as illustrated below, or vice versa if you wish. Learn more about ranking on the Chart – Ranking page.

Why we recommend using a bar chart instead of a column chart

It’s worth noting that you can use a column chart or a bar chart, but if you use a bar chart you will avoid the undesirable effects that come as a result of displaying the category labels at 45°, making them hard to read and frequently leading to truncation of text.

Hierarchical Categories

Multiple Sets of Values

Compare Values Individually

We recommend using a bar chart to compare values within item categories. If one of the values acts as a point of reference, please refer to the section below on comparison with a point of reference.

The chart below compares the revenues of USA and Germany for nine product lines.

As previously stated, you can make it easy to compare items by ranking them in order of the largest value to the smallest value as illustrated below, or vice versa if you wish.

In the example below, the ranking allows us to clearly see that the top three products in USA are also the top three products in Germany.

Comparing with a Reference Point

Sometimes you might want to see how close a value is to reaching or exceeding a reference point. Typical examples of reference points are target, plan and budget. A benchmark or a value from the previous year can also be considered as reference points.

The chart below compares actual and planned costs for four lines of business.

Comparing Two Entire Sets of Values

If you need to compare two entire sets of values, we recommend using two bar charts side by side. You can order the items in one of the datasets in order to better highlight the differences between the two datasets.

In the example below, we can easily see that the margin for ‘Servers’ is much higher than other product lines that have a similar revenue.

If there are many items within categories, you could also use a scatter plot or a bubble chart which are designed to illustrate correlation between datasets.

Comparing Values that have Different Units

 If the values being compared have different units, you can either convert the values to a common unit such as the percentage, or you can use multiple charts side by side.

The example below displays two sets of values, the transaction volume and the transaction amount for four banks. With this type of visualization, it’s easy to spot that Bank C is the odd one out when comparing the bars.

What Not to do: Take a look at the chart below. It contains the same information as the two charts above, but with a dual axis. It looks like the Transaction Amounts for Bank C and Bank D are bigger than their Transaction Volumes, but this is meaningless because the axes use completely different scales.

Comparing Sum of Values (Stacked Bars)

The following section illustrates how to visualize the sum of values inside and across different category items using a stacked chart. In the example below the number of ‘imported successfully’ bank accounts are stacked on top of number of ‘imported with errors’ bank accounts. However, please notice that this approach does not make it easy to compare the number of ‘Imported with Errors’.

The chart below is used in the Analyze Sentiments app which enables product managers to view sentiment information for multiple products by analyzing the number of mentions in social media broken down by how positive, neutral and negative they were. You can see how the sum of the positive, negative and neutral mentions provides a good indication of the “buzz” around each product, independently of how good or bad it was.

If you want to see which products received the most mentions overall, as well as the most positive, negative, and neutral mentions, then an ideal solution would be to split this information into four separate charts. However, you need to make sure that the four charts use the same horizontal scale.

In the example below, you can easily see that the product line ‘PDAs & Organizers’ received a lot of mentions, although a large percentage of them were actually negative.

An alternative solution would be to use a table with bars inside each column.

Two Categories

You can use bar charts placed side by side if you want to compare values across two categories, such as revenue by products and by region. You do not need to repeat the list of category items on the vertical axis. However, you must make sure that all the charts use the same horizontal scale!

Please be aware that this layout only works well:

• for a limited number of charts (between 2 and 5),
• when vertical scrolling is not required,
• on large screens.

The chart below shows the revenue of each product line for three different regions. You can easily see that the revenue for ‘computer system accessories’ is exceptional high in Asia and you can easily compare values within each business area, although you cannot easily compare values between different business areas.

Two Categories Containing Many Items

You can use a heatmap if the categories you’re comparing contain many items, and you’re just interested in showing approximate values. The heatmap is a two-dimensional representation of data where values are represented just by color. The heatmap below visualises gross sales of products items by month.

In the example below, a heatmap is used by an IT department to visualize response times in ms throughout the weekdays and working hours using semantic colors to differentiate between response times.

If you have a lot of categories, be aware that the heatmap might not render correctly on small devices. This is because all content on the screen will be resized proportionally and the category labels may by hidden due to lack of space.

Three Categories

If you want to compare three categories such as product, region and quarter, we recommend displaying multiple charts in a matrix. All you need to do is make sure the charts all use the same scale.

Be aware that this layout only works well:

• with a limited number of charts,
• on large screens

The chart below shows the percentage deviation of actual revenue versus target revenue, by region and product line, for the last four quarters. It’s immediately obvious that the first quarters have frequently fallen below target, and that ‘graphic cards’ did not perform well in all the regions.

Resources

This article explains how to use patterns like dashes, dots or hatches in order to distinguish:

• Actual Values: What values are (solid pattern).
• Projected Values: What values might be (dashed line, hatched areas).
• Reference Values: What values should be (dotted line with empty circles, empty areas).

Actual Values

Actual values register facts that happened in the past and utilize the solid pattern for areas and lines, as illustrated below.

Projected Values

Projected values are estimates of what might happen in the future such as a forecast, estimation or prediction. They indicate what the actual values will be in the future, and the projection can be calculated by the system, extrapolated from previous time periods, or entered manually by a user.

Example:

• Revenue forecast calculated from previous months.
• Adjusted revenue forecast that has been manually adjusted based on the current context.
• Cost for projects that are committed, but not yet delivered.

Dashed Line

Use dashed lines to show projected values as illustrated below.

A line can change from solid to dashed when the line needs to display actual values followed by projected values. In the example below, the line connecting the last actual value (2015) to the first projected value (2016) is dashed to indicate that the line is a projection.

Hatched Area

Use the hatched pattern in columns and bars to display projected values, as illustrated below.

A series of columns with the solid pattern can be followed by a series of columns with the hatched pattern when a series displays actual values followed by projected values, as illustrated below.

Reference Values

Some values represent a reference for other values (such as a threshold that should be reached or should not be reached) depending on the use case. Here are some examples:

• A target revenue that must be reached.
• An expense budget that should not be exceeded.
• The share price of a competitor to use as a benchmark.
• The number of new customers acquired last year that needs to be exceeded this year.

The bullet chart is the ideal chart to compare values with reference values. The reference value is displayed by the black horizontal lines as illustrated in the chart below.

Dotted Line and Empty Circle

Reference values displayed as a line should use a dotted line and empty circles for the data points as illustrated below.

When there are many data points, the circles are automatically hidden, as illustrated below.

When the chart contains one actual value and one reference value (such as a target), you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference line and the first color from the qualitative palette for the actual value, as illustrated below.

When the chart combines a single reference value (such as a target) with multiple actual values, you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference line and colors from the qualitative palette for the actual values, as illustrated below.

When the reference values and the actual values do not have a direct relationship, you should use colors from the qualitative palette and all the lines should all have different colors, as illustrated below.

Empty Area

When columns or bars are used to display reference values (such as a target, plan or budget), you should use the empty pattern.  You should also use the color sapUiChartPaletteSequentialNeutralDark2 for the reference value and the first color from the qualitative palette for the actual value as illustrated below.

When the chart contains a reference value (like a target) for multiple actual values, you should use color sapUiChartPaletteSequentialNeutralDark2 for the reference value and colors from the qualitative palette for the actual values, as illustrated below.

When multiple reference values and multiple actual values do not have a direct relationship, you should use colors from the qualitative palette.  Columns for the reference values and columns for the actual values should all have different colors, as illustrated below.

Resources

This article explains how to use charts to visualize the different parts of a whole (expressed as a percentage).

Example use case: The regional sales revenue contribution shown in comparison to the total sales revenue of a company.

Bar Charts

When designers think about visualising parts of a whole, they are invariably drawn toward the trusty pie chart. However, in many cases simple bars are in fact a far better option because you can:

• Compare parts to each other.
• Display category labels and value labels associated with each part.
• Display multiple values.
• Display small values in a better way.
• Avoid having to use multiple colors and a corresponding legend.

The first chart in this example below represents the cash position by currency.

If the order of the category items is not important, you should rank the items from the biggest value to the lowest value as illustrated below. This makes it easy to compare items and see the highest values and smallest values.

Pie Charts

The pie chart (donut chart) is best used when there are only two or three slices to display, and when it’s not important to immediately have the exact value of each slice. Note that the values are ranked from the largest to the smallest to make reading and comparison easier, although you can use a different order if it’s important in the context of your application.

Pie charts are great to use if you’re primarily interested in seeing how much the largest values compare to the rest in percentage. In the chart below, a company has ten stores, but we are most interested in seeing how much percentage the three biggest stores represent. The rest of the stores have been grouped under a slice called ‘Other’. You can easily see that the first three stores represent approximatively 75-80%.

Variations Over Time

If you want to show how a part to whole evolves over time, you can use a line chart, multiple bar charts, or stacked columns. Generally speaking, the line chart is the best solution where you can use one line for each part of the whole as illustrated below.

When there are a small number of time periods (between 2 and 4), you can use bar charts side by side as illustrated below. In this example, the chart represents the contribution of six product lines to the total revenue of a company over a period of four years. Because the first chart is ranked by percentage, you can easily identify when the shape of the different parts changes over time. You can see the contribution made by ‘Flat Screen TVs’ has increased over the last two years compared to the other product lines.

If there are only two parts in the whole, you can use a stacked column as illustrated below. Here the evolution of each part is immediately visible.

If there are more than two parts in the whole, the first and last values are easy to compare. However, it’s hard to grasp the evolution of parts that exist between the first and last parts. In the chart below the ‘neutral mentions’ are less important so it’s acceptable not to be able to compare them very easily, and only have a rough approximation of their evolution.

Comparison

If you want to compare the composition of a whole between few items, use bar charts side by side. The chart below illustrates the contribution that five product lines make to the total revenue of three sales regions. Note that the first sales region is ranked by percentage, which makes easy to compare the shape of each chart.

Stacked bars work well when you have only two parts. The chart below is used in the Cash Management app and displays the import status of bank statements for some banks expressed in percentages.

If there is no reason to display the items in a specific order, you can rank by one of the measures. The chart below contains the same information as the chart above, except now the banks have been ranked according to the successful import rate.

If there are more than two parts in the whole, the first and last values are easy to compare. However, it’s hard to grasp the evolution of parts that exist between the first and last parts.

The chart below displays the revenue contribution made by three sales regions of each for five product lines. In the context of the application, the ‘Asia’ sales region is less important so it’s acceptable not to be able to compare the values very easily, and only have a rough approximation of their evolution. The American sales region is also the most important, so it is displayed first in order to rank the product lines.

If you want to know which items have the biggest values and how many of these items contribute to the total of the values, you can use a Pareto chart which is designed to illustrate the well-known 80%/20% rule. That is, 20% of the items contribute to 80% of the total.

The chart below displays the number of defects by type of defect, and we can see that 80% of the defects come from the first four types of defect.

Resources

This article explains how to manage leading and trailing white space (blanks) when copying and pasting text into input controls (such as input fields, text areas, and so on).

Typically, white spaces are not typed manually, but rather appear as a byproduct of copying and pasting content into the input control.

White space can have negative impact to further processing. For example:

• Fields might not be found in an exact search for the visible string.
• It could lead to cluttered text alignment.
• System(s) might distinguish objects “ABC” from “˽ABC” and “ABC˽”, which are visually equal to the user.
• Fields with a fixed string length could risk losing data. For example, an input field with a maximum string length of 10 might receive “˽1234567890” via copying and pasting, but only be able to save “˽123456789” due to length limitations.

In order to avoid such issues, leading and trailing blanks can be automatically removed or trimmed.

Use field trimming if:

• The leading or trailing white space is not needed for the business process.
• The input fields have uniquely identifying business objects.
• The input fields have a fixed field length.

Do not use field trimming if:

• The use case explicitly requires leading/trailing white space. For example, for formatted text such as chats, comments, descriptions, source code, or for file names (according to the supported OS behavior).
• For text areas where users would expect leading white space as a formatting tool.

Guidelines

The system behavior for field trimming should be coherent in all editing applications of a field and in all external interfaces (for example, for importing, system integration, and so on).

This article explains how to visualize the deviation (difference or variance) between two measures, such as the difference between the product revenue streams over two years, or the difference between actual expenses and target expenses for different cost centers.

The first two sections address deviations within a non-time category. The last two sections are dedicated to time-category.

All figures that represent a deviation should include a + or – sign. They can appear in the value axis, close to the data points in the plot area, and in popovers.

Deviation Only

This section explains how to visualize the deviation (difference) between two measures, and only the deviation. The chart below shows the difference between the actual cost and budgeted cost for multiple cost centers.

Deviation in Percentage

It’s a good idea to consider whether the actual value can be given as a percentage when displaying a deviation. The chart below displays the same information as the chart above, but the deviation is expressed in percentage.

If the order is not important, you can also rank items to make the values easy to compare, as illustrated below.

Deviation and Measures

Sometimes you may want to display two measures and the variance (deviation) between them.

The best way to achieve this is by displaying two charts side-by-side: a bullet chart to display the two measures, and a bar chart to display the deviation. Placing the variance (deviation) in a separate chart makes it easy to compare the variance.

The chart below displays the variance between actual expenses and planned expenses for different cost centers and the deviation between them.

For the same reason mentioned above, you should consider displaying the deviation in percentages as illustrated below:

Time Deviation Only

This section explains how to show the deviation over time between two measures, and only the deviation. If you want to show the measures as well, please proceed to the the next section called ‘Time Deviation and Measures’.

Focus on Value

You can use a column chart when the value of the variance is more important than the trend of the variance.

Focus on Trend

Use a line chart if you want to focus on the trend of the variation, as illustrated below.

Sometimes, it’s better to see the deviation as a percentage. In these circumstances, choose one measure as the reference and express the deviation as a percentage of the reference. The chart below contains the same information as the chart above, but with the variation expressed in percentage. You can now see that the deviation in March and June were very high.

Time Deviation and Measures

If you want to display two measures and the deviation in the same visualization, you can use two charts one above the other. And, if the trend of the measures and the variation is important, or if there are many data points, you can use two line charts as illustrated below.

When the value of the variance is more important than the trend of the variance, you can use a bullet chart and a column chart side by side. The chart below displays actual and target values over time, as well as the deviation for each time period.

Resources

Ranking

Rank items from highest to lowest, or vice versa.
For example: Rank countries by market share.
Use: Bar chart or column chart

For more information, see Chart – Ranking.

Comparison

Compare values of items in a list that has no particular order.
For example: Compare revenues in a list of products, or transaction volumes in a list of banks.
Use: Bar chart, stacked bar chart, bullet chart, heatmap.

For more information, see Chart – Comparison.

Variation Over Time

Show the variation of values over time.
For example: Show the stock level over time, or expenses by month compared to budget.
Use: Line chart, column chart, stacked column chart, bullet chart.

For more information, see Chart – Variation Over Time.

Part to Whole

Display the contribution of individual values to the whole.
For example: Show the percentage of sales attributed to various regions.
Use: Pie chart, bar chart, line chart, stacked bar chart.

For more information, see Chart – Part to Whole.

Deviation

Show the deviation, difference, or gap between two sets of values.
For example: Show the deviation between actual revenue and target revenue by product.
Use: Bar chart, bullet chart, column chart, line chart.

For more information, see Chart – Deviation.

Distribution

Show the distribution within a set of values.
For example: Show how exam scores are spread or grouped around the median score.
Use: Bar chart, column chart, stacked column chart, line chart.

For more information, see Chart – Distribution.

Correlation

Show the correlation between two or three sets of values.
For example: Show how sales revenues are impacted by customer age.
Use: Scatter chart, bubble chart, bar chart.

For more information, see Chart – Correlation.

Cumulation

Show the accumulation of successive values.
For example: Show cumulation of stock day by day, or cumulation of revenues and cost for profit and loss.
Use: Waterfall chart

For more information, see Cumulation (Waterfall Chart).

Geographical Values

Use a map to show the values associated with geographical areas.
For example: Show revenues by country or region on a map.

For more information, see maps.

Recources