Case 1: The user tries to close a tab with unsaved changes.

Message type: Warning
Message text: Your changes will be lost when you close this tab.
Buttons: Close, Cancel

Case 2: The user tries to leave the page when one or more tabs have unsaved changes (by clicking the Back button or navigating to a different page).

Message type: Warning
Message text: If you leave this page, your changes to the following [objects] will be lost:
[Object 1]
[Object 2]
Buttons: Leave Page, Cancel 

Profit and Loss

The margin is a cumulative value equal to the sum of all revenues (positive) and all costs (negative).

Inventory over Time

The stock level is equal to the sum of all incoming stocks (positive) and outgoing stocks (negative).

Waterfall Chart Without Time Dimension

If the chart does not represent changes over time, use a horizontal waterfall chart with horizontal bars. This way, you will avoid unnecessarily truncating the category labels.

The initial and the final values are usually represented by an entire column starting from the zero axis. An intermediate total can be added.

You can also add intermediate subtotals that are the sum of previous values.

Default Colors

• Positive values use a color defined by the property: plotArea.dataPoint.color.positive.
• Negative values use a color defined by the property: plotArea.dataPoint.color.negative
• Totals use a color defined by the property: plotArea.dataPoint.color.total

• Blue (@sapUiChartPaletteSequentialHue1Light1)
• Orange (@sapUiChartPaletteSequentialHue2Light1)
• Gray (@sapUiChartPaletteSequentialNeutral)

These colors are defined by the sequential palette, but can be customized.

The control allows multi-select mode to be shown for the list items. This can be used, for example, to delete multiple objects from the view.

An app development team must decide whether to show the planning calendar with or without multi-select mode, or whether users should be able to switch between the two modes. Hiding the interval appointments of every object is optional.

The planning calendar can also be used without a row header. In this case, the row header disappears and only the appointments are visible. It can be used to show the calendar of one object. Note that the control was built mainly to compare time slots of different objects. For this reason, the time axis is shown horizontally and, depending on the interval, the appointments might shrink to smaller size. In this case, the text is cut off rather than truncated.

The control consists of different parts:

1. Header
2. Toolbar
3. View switch
4. Navigation
5. Time strip for hours/days/months
6. Row header
7. Row
8. List item
9. Interval appointment
10. Appointment

View switch

The user can change the calendar view with the select control (dropdown). For example, to get an overview of a whole year, the user selects the Months view. Which view is most useful depends on the average length of appointments and the use case.

Today

The user can trigger this action to go back to the current date/moment.

Back and forward navigation

The arrows allow the user to navigate to the next or previous interval.

Date picker

The user can open a date picker to select the start time for the visible interval. What is shown initially in the picker differs depending on the view. The current day is marked.

Snapping Header

The header area of the planning calendar can remain fixed on top of the screen (property: stickyHeader), which allows users to view calendars with a lot of rows without losing the context.

Drag and Drop

Drag and drop can be used to move appointments (to enable Drag and Drop use property: enableAppointmentDragAndDrop). Moving an appointment automatically changes its start and end times (for example, if an appointment is scheduled from 1:00-2:00 PM, the user can drag it and change the time from 2:00-3:00 PM) . When dragged, the appointment is shown as a ghost element on the mouse cursor. Drop target areas are indicated to the user with a placeholder.

In the “Hours” view, the appointments can be moved to a specific new time, with the placeholder snapping at every 30 minutes. In the “Days” view, the appointment can be moved to a different day. The placeholder indicates the target day. On drop the appointment is moved to that day but keeps its previous start and end hour. The interaction is the same for the “Months” view. The placeholder indicates the target month and, when dropped, the appointment is moved to that month. The start and end hour and start and end day remain the same.

Appointments can be moved between rows. Note that additional coding may be needed to determine whether all calendar users will be able to perform this action.

Users can create new appointments by clicking, dragging and releasing on an empty space in the content area. The control also allows users to change the duration of an appointment by clicking and dragging one side of the appointment container. These two options are only available for desktop devices.

Combined appointments and interval appointments are not draggable.

Drag and drop is only available on supporting browsers.

Mask input extends the input control (sap.m.Input) and has all the normal properties of an input field.

The mask input control has a fixed length format to which the user’s input must conform. This can be particularly useful when the user needs to enter text or numbers with specific formatting, such as a phone number, postal code, or credit card number.

Mask input or a placeholder text are not substitutes for the input label. Using a label is mandatory. Placeholder texts in an input field are optional. Note that if there is no placeholder text, the input field will initially look empty. The mask formatting is revealed as soon as the focus is on the field.

It is possible to add additional descriptive texts to the input field (a unit of measurement, for example) by using a new association in the sap.m.InputBase control called ariaDescribedBy. The association is responsible for referencing the elements that describe the control.

• Mask string appears in the input field on focus.
• The default placeholder symbol is “_” and can be changed to something else.

Copying to a mask input field:

Users can copy both formatted and unformatted strings into a mask input field. When the texts are pasted, they take on the format defined for the mask input field.

Example: Mask input field for a number with the format:  (000) 000 000000

Copying from a mask input field:

If you copy a string from a mask input field and paste it elsewhere, the format of the mask input field is copied as well.

Deleting a character from the string leaves the input information unchanged, except for the deleted character, which is replaced by a placeholder. (The mask does not shift if a character is deleted.)

Select the entire string and delete it. The placeholders will reappear.

Another option is to define new validation rules, such as allowing lowercase characters from “a” to “e” only. This is particularly flexible because these rules are defined with regular expression syntax.

The mask comes with two predefined validation rules: one for all characters in the English alphabet, and one for the numbers from zero to ten.

Therefore, when the mask format is being defined, the alphabetic rule is represented by the letter “a”, and the numeric rule by the number “9”. For example, a numeric mask format with a length of five characters would be specified as “99999”, a mask that accepts only alphabetical characters would be specified as “aaaaa”, and a mixed mask could be “aaa99”. In the mixed mask example, the user would not be able to enter numeric characters anywhere other than in the last two positions.

When you create the MaskInput instance, you can specify the following settings:

• Mask: The format specification, such as (123) 999-999.
• PlaceholderSymbol: A single character used to represent empty positions in a mask value, such as _ _ _ _ _.
• Rules: A collection of sap.m.MaskInputRule instances.

Mask string

The mask is defined by its character type (or by its length, as applicable). You should consider the following important facts:

1. The mask characters normally correspond to an existing rule (one rule per unique character). Characters that do not are considered immutable characters. For example, the mask ‘2099’, where ‘9’ corresponds to a rule for digits, has ‘2’ and ‘0’ as immutable characters.
2. Adding a rule that corresponds to the symbol placeholder is not recommended and would lead to unpredictable behavior.

Placeholder symbol string  “_”

This defines a placeholder symbol. It is shown in a position where there has not yet been any user input.

Use the object page floorplan if:

• Users need to display, create, or edit an object.
• Users need to get an overview of an object and interact with different parts of the object.
• You need to structure your content into different sections.
• You have a page with one section and editable header content.

Dynamic Page Header (mandatory)

The dynamic page header contains key information about the object and provides the user with the necessary context. The header initially expands in display mode. It also contains global actions for the object, such as Edit or Delete.

The header consists of the following elements:

1. Breadcrumbs (optional)
2. Title (mandatory)
3. Subtitle (optional)
4. Header content (optional)
5. Object marker (optional)
6. Header toolbar with global actions (optional)
7. Visual indicator for header features (mandatory if the header can be collapsed and expanded)

Form Facet (Dataset)

You can use the form facet to display datasets.

A form facet consists of:

1. Title (optional)
2. Label-text pair (no more than 5 in a group)

• The labels can be invisible, but need to have a text for accessibility purposes.
• The labels can be icons, but need to have a text for accessibility purposes.
• Each text can hold a link.

Plain Text Facet

You can use the plain text facet to display a continuous text in the header.

A plain text facet consists of:

1. Title (optional)
2. Text

You can have links inline in the continuous text. They can navigate to another page or open a quick view. The text can contain more than one link, with different actions.

The default width of the facet is 320 px. The width of the facet doesn’t adapt to its content, but when the headline is broader than the facet width, the header wraps. You can also set a specific width to make optimal use of the given space.

Image Facet

You can use the image facet to show a picture of the object or a user profile. The header can have either one image facet or no image facet. The position of the image facet is fixed to the left. The image can have a press event. The default press event enlarges the image. When the header collapses, the image facet moves to the left of the title and becomes smaller.

Key Value Facet

You can use the key value facet to highlight important data or KPIs.

A key value facet contains:

1. Title (mandatory)
2. Text or number in a larger font size

If the key value facet is used with a text, such as a status, you can also display an icon to the right of the text. This icon must only be used as a visual cue for the text it relates to, and not to add more information.

Micro Chart Facet

A micro chart facet consists of:

1. Title (mandatory)
2. Subtitle (optional)
3. Micro chart (mandatory)
4. Footer text (optional)

To display the unit used in the micro chart, use the footer.

The following micro charts can be used in the micro chart facet:

• Bullet chart
• Column chart
• Trend chart
• Comparison chart
• Delta chart
• Harvey ball chart
• Radial chart

The micro chart facet can have a click event on the chart itself. This can lead to a page with a bigger chart or open a quick view, for example.

For more information, see Micro Charts.

Progress Indicator Facet

A progress indicator facet consists of:

1. Title (mandatory)
2. Subtitle (optional)
3. Progress indicator
4. Footer text (optional)

For more information, see Progress Indicator.

Rating Indicator Facet

You can use the rating indicator facet to display a single rating value or an aggregated rating (such as an average rating for a product). The facet structure is slightly different in each case.

Single rating value:

The single rating consists of:

1. Title (mandatory)
2. Subtitle (optional): Displays supplementary texts
3. Rating indicator

Navigation Bar

You can only have several sections in the object page layout and there are two ways to structure it:

• Anchor bar navigation (default)
• Tab bar navigation

Anchor Bar Navigation

The anchor bar is the default navigation control for the object page. It consists of a series of anchor links, which are arranged horizontally at the top of the page. The anchors represent sections or subsections of the page. Clicking a link makes the screen scroll to the corresponding section of the page and the anchor bar remains visible.

Use tab bar navigation if your page covers different topics that each have complex content, such as long tables or lists.

1. Active anchor
2. Inactive anchor
3. Subsection dropdown
4. Subsection
5. Subsection dropdown indicator
6. Overflow carousel button
7. Overflow menu button
8. Overflow menu dropdown
9. Section (hover) in overflow menu
10. Section in overflow menu
11. Subsection in overflow menu

Overflow

If there are more anchors than the screen can accommodate, the remaining anchors move into an overflow menu. The overflow button on the right of the navigation bar () opens a hierarchical dropdown list of all sections and subsections. When the user scrolls down the page, the anchor links scroll horizontally to ensure that the active anchor is always visible.

You might also see a small right arrow on the anchor bar. This arrow allows you to scroll horizontally to reveal any hidden content, and only appears when you hover over the overflow menu. In the meantime, this arrow has been replaced by the overflow menu button, but is still supported technically for legacy reasons.

Responsiveness

On small screens, the anchor bar becomes a dropdown list. The text field of the dropdown list shows the section currently selected. Clicking the dropdown menu opens a hierarchical list with all the sections and subsections of the page.

Behavior and Interaction

Tab Bar Navigation

As an alternative to the anchor bar, you can also use the tab bar for navigation. The tab bar works in a similar way to the icon tab bar, but is not the same control. The tab bar navigation for the object page is a variant of the anchor bar, and is handled by the object page floorplan.

The tabs are a series of links arranged horizontally at the top of the page which link to subpages. Clicking a link displays the corresponding subpage below and the tabs remain visible.

Use tab bar navigation if your page covers different topics that each have complex content, such as long tables or lists.

1. Anchor/tab bar navigation
2. First section
3. Second section

If you set the tab bar property (useIconTabBar = “true”), the navigation bar displays tabs instead of anchors. The object page only supports text-only tabs; icon tabs and icon/text tabs are not available. The object page sections and subsections are reflected in the tab navigation: sections of the object page become the tabs, and subsections become the internal content of the tab. The tabs can have an item counter, which is displayed in parentheses next to the title of the tab.

On small screens, the tab bar uses the same horizontal carousel overflow pattern as the icon tab bar. This differs from the dropdown approach used for the anchor bar.

If the content of a section contains a control, for example a table, then we recommend to always display it, even if the control title and tab title are identical. This makes it easier for the user to orientate themselves.

Subnavigation

To make it easier to reach specific content on a long tab page, tabs can have subnavigation. Subnavigation is optional, but the default state is set to “true” and a dropdown arrow is shown next to the tab. Clicking on the dropdown arrow displays a dropdown menu with the subsection anchors for that tab. Applications can decide which tabs are enabled for anchor subnavigation by setting their property to “true”.

Tables

When a section or subsection contains one table and no other content, remove the redundant table title so the section or subsection title serves as the table title. In the subsection, also reduce the vertical space.

Grid tables in sections must have at least 4 rows, and the maximum number of rows visible will depend on the window size. To prevent any need for the user to scroll to access the horizontal scrollbar, keep the table within the screen size limitations. This may not be possible in all use cases, for example, if the table contains a large data volume, then you must use two scrollbars.

In an object page with anchor bars, use no more than 4 grid tables to prevent cognitive overload. (Consider using different sections between multiple tables to ease the burden, except for table comparison use cases.) To include more than 4 grid tables, place them in individual tabs.

To embed analytical tables or tree tables in an object page, use an object page with tabs and place each table in its own tab. If you are using a scrollable object page without tabs, use responsive or grid tables instead, and offer navigation to another page with the respective table type.

Depending on the number of table items, use one of the following loading behaviors:

If a table is expected to have more than 20 items, use one of the 3 options below for long tables.

For all three options, we recommend providing a search, and if feasible, sort and filtering for the table in the object page. Avoid grouping.

1. Lazy Loading Behavior (“More” button)

If you expect up to 100 items, use the More button of the responsive table. The initial number of items shown depends on the height of the rows. We recommend initially showing 10 items, but not more than 20. If there is more than one table in the object page, only use this option for tables with up to 50 expected items.

2. Tab Navigation

If you expect to have more than 50 to 100 items, but fewer than 200, using the object page with tab navigation instead of anchor navigation also solves the problems associated with long tables. To enable the scroll-to-load behavior, the table must be the only or last element within a tab.

3. Navigation to Another Page

For tables with more than 200 items, or when the tab approach is unsuitable, restrict the size of the table in the object page to a reasonable number of items. We recommend showing a preview of only 10 items, but not more than 20. This can be achieved using predefined filters and/or by sorting the table. If necessary, you can also set a fixed number of items (such as the top 10). To enable the user to work with the entire table, offer navigation to a separate page, such as a list report, subobject page, or dynamic page with the respective table type. To do this, place a right-aligned link below the table with the label Show All (x), where x represents the total number of items in the table.

Representation of Child Pages

In object pages with drilldown navigation, child pages are represented in two ways:

• Breadcrumbs: A breadcrumb is displayed above the object title. Limit the breadcrumb to the drilldown levels within the object page.
• Paging buttons: Up and down arrows in the layout action area allow the user to navigate between subitems without going back to the original list.

Footer Toolbar

The footer toolbar is used for closing and finalizing actions in:

• Edit and create mode, for example, Save, Post, Accept, Reject, and Activate
• Display mode, for example, Approve, Accept, and Reject 

Editing header content in Global Edit mode

Because the header snaps on scroll, there are no editable forms in the header itself, so if you’re dealing with editable header content, a temporary “Header” section is generated above all the other sections of the page where the header content can be edited. The same principle applies if your object page only has one section and there is editable content in the header, except a temporary navigation bar should be generated as well. Any changes made to the header are not reflected until the user saves them.

When there is editable content in the header, the title bar information and all editable fields from the header container move from the header to the temporary “Header” section and non-editable content displays as read-only. You can leave out header content that doesn’t make sense in edit mode (for example, aggregated values that are calculated from several sources, KPIs, or micro charts). If only a few fields in the header are editable, and they match an existing section, they are moved to that section. In this case, no editable header section appears. The header container in edit mode can also contain independent facets that are not included in the header content in display mode which provide information to assist editing.

Please note, the temporary “Header” section for editing header content doesn’t come out of the box for freestyle applications – it needs to be implemented manually, so it’s sometimes better to avoid having editable header content and move it into object page sections instead.

Editing header content in Partial Edit mode

The user can edit the header content separately by pressing the Edit Header button.

If there are only a few elements to edit, the partial edit triggers a dialog.

If there are too many elements to fit in a dialog, the partial edit triggers a subpage. The subpage contains all editable information from the header. However, it differs from the “Header” section in global edit mode in that it has no action buttons in the toolbar, no navigation, and no breadcrumbs.

Create and Edit Subobjects

The following options are available for creating or editing subobjects:

• Navigation to a subobject page
• Inline create or inline edit in a table
• Dialog containing the fields of the object

To enable users to create subobjects inline, offer an Add or Create button on the table toolbar. Clicking the button creates a row at the top of the table. Pressing Ctrl+Enter has the same effect.

If the subobject has less than 8 fields, use a dialog or the inline create/edit option (no separate page for the subobject). Exceptions can apply if additional content for the subobject is available but not part of the edit process, or if other apps need to offer deep links to the subobject page.

Edit Actions in Display Mode (freestyle apps only)

The standard flow is to switch to edit mode for edit and delete actions. However, in some cases, it can be helpful to offer certain edit actions in display mode as well.

You can offer edit actions in display mode if:

• Switching to edit mode would inconvenience the user. This is especially true if the change is small and quick, and switching to edit mode would take longer than making the change.
• The change does not impact a critical flow or result in technical inconsistencies.

Examples: Adding a comment, uploading a file

Do not offer edit actions in display mode if:

• The change has a critical impact on business data/follow-on processes.
• The change requires a finalizing action.

Example: Deleting a sales order item would affect the entire sales order and dependent data.

When offering delete actions in display mode, always show a delete confirmation dialog. For more information, see:

• Delete Objects – Object Page
• Delete Objects – Top Tips

Unsaved Changes

If draft handling has been implemented, documents are automatically saved as draft versions in the background. An editing icon to the right of the object title indicates that a draft version exists. In other words, either the current user or another user has made changes, but not yet actively saved the document (“unsaved changes”). Do not show the editing icon for unsaved changes if draft handling is not supported.

Selecting the editing icon invokes a popover with more information about the unsaved changes. This normally states:

• Who made the changes
• When the last changes were made

The popover closes when the user clicks outside the popover or clicks the  (Close) icon.

The default layout for size L (desktop) contains three columns. If you want to display two content elements that require an equal amount of space, you can also use an optional two-column layout (for example, two tables next to each other). Do not use the two-column layout with forms.

The layout for size M (tablet) contains two columns.

The layout for size S (smartphone) contains one column.