The multi-instance handling floorplan allows users to open multiple documents in a tabbed view. After selecting items from a list, the user opens them in a tab container.

Usage

Use multi-instance handling if you want to let users open and edit multiple items simultaneously (such as object pages or documents). Multi-instance handling also allows users to switch between items without having to move between multiple browser tabs.

Responsiveness

Structure

Multi-instance handling is a full screen floorplan.

Behavior and Interaction

Tab Container

The tab container is the backbone of the multi instance handling floorplan. Users can use the tabs to navigate between the opened items. The tab container contains the opened tabs, the overflow mechanism, and the plus (  ) button for adding new items.

Tabs

The tabs represent the opened items. One tab is always active, while the others are inactive. The user can switch between tabs by clicking or tapping them in the tab container.

Each tab contains:

• A title
  The title is the same as the title of the opened item. If the title is longer than 25 characters, the text is truncated.
• A Close Tab button
  The Close Tab button closes the tab. In size L, the button is shown only on the active tab. The Close Tab buttons on inactive tabs are shown only when the user hovers over them. In size M, the buttons are always visible. In size S, the buttons are also always visible in the overflow overview.

Unsaved Changes in Tabs

If one or more opened items in the tab container have unsaved changes, the corresponding tabs show visual notifications. An asterisk (*) after the title of the relevant tab indicates that the item has unsaved changes.

If the user clicks or taps the Close Tab button for a tab that has unsaved changes, a warning message appears.

If the user tries to exit multi-instance handling (by using the Back button or by navigating to a different floorplan) and there are tabs with unsaved changes, a warning message appears.

Closing the Last Tab

When the last remaining tab is closed, the user should be directed back to the original list where the item selection started.

Overflow

The tab container has an overflow mechanism in case there are too many tabs for them all to be displayed on the screen.

If tabs are hidden in the overflow, the user can click or tap the overflow button (left or right) to scroll the tabs horizontally and show the hidden tabs.

An overview overflow button provides a list of all the opened tabs in a hierarchical dropdown menu, including those that are hidden in the overflow.

Close Tab buttons are also shown in the overflow overview dropdown list. In size L, the Close Tab buttons are shown only when the user hovers over them. In sizes M and S, the Close Tab buttons are always visible.

Button for Adding New Items

The tab container can have a button for adding new items, which appears as a plus ( ) icon and is located on the far right of the tab container. When the user clicks or taps this button, a new empty item is created and a new tab is opened.

Only use the plus button if the application allows users to create new items or objects, such as a new sales order.

Do not use the plus button to create tabs without content.

Content Area

Since multi-instance handling shows instances of objects, use the the following floorplans in the content area:

• Object page floorplan
• Create page floorplan

Resources