The cloud file browser is a tool that allows users to browse through a remote repository, export data to the cloud, or import files from the cloud to an SAP application.

Components

The cloud file browser is composed of the following controls embedded in a dialog:

1. A file share select field
2. A file name field (export mode only)
3. Breadcrumb navigation
4. A New Folder button (export mode only)
5. A responsive table with files and folders
6. The finalizing and Cancel actions

Iconography

1. Spreadsheet (Microsoft Excel, Google Sheets, CSV…)
   Tooltip: Spreadsheet
   sap-icon://excel-attachment
2. Text Document (Microsoft Word, Google Docs, RTF…)
   Tooltip: Document
   sap-icon://doc-attachment
3. Presentation (Microsoft Powerpoint, Google Slides…)
   Tooltip: Presentation
   sap-icon://ppt-attachment
4. Portable Document Format (PDF)
   Tooltip: PDF
   sap-icon://ppt-attachment
5. Plain Text
   Tooltip: Text File
   sap-icon://attachment-text-file
6. HTML File
   Tooltip: HTML File
   sap-icon://attachment-html
7. Image File, Photo
   Tooltip: Image File
   sap-icon://attachment-photo
8. Audio File
   Tooltip: Audio File
   sap-icon://attachment-audio
9. Video File
   Tooltip: Video File
   sap-icon://attachment-video
10. Archive (ZIP, RAR…)
    Tooltip: Archive
    sap-icon://attachment-zip-file
11. Unknown Format
    Tooltip: File
    sap-icon://document
12. Folder
    Tooltip: Folder
    sap-icon://folder-full
13. Locked Folder
    Tooltip: Files can’t be exported to this folder.
    sap-icon://locked

Behavior and Interaction

Export

When a data file is exported to the cloud, in the Export As dialog, the Destination field is set to the value Cloud and the finalizing action Export To… opens the cloud file browser.

The spreadsheet or data file can be exported in various file types according to the client’s configuration and the remote file share type. For example, CSV, Google Sheets, or Microsoft Excel.

For more details, see: Export to Spreadsheet.

Accessibility

The initial focus is placed in the File Name field.

Users can trigger the primary action while the focus is inside other controls in the dialog by using one of the following key combinations:

• Enter
• Ctrl + Enter (Windows)
• Cmd + Enter (Mac)

Update / Overwrite a file

To update an existing file, users can select the file in the list and export the new version.

The version history stores all older versions of the file.

The user is free to change the exported file name via the File Name field. According to the file share rules, if the user enters unauthorized characters, the field changes the error state accordingly.

More details about field states.

For error prevention, the cloud file browser should display only the files of the type that has been chosen in the Export As dialog.

After the user has chosen the file format in the Export As dialog, they cannot change it via the file browser. Instead, they need to cancel the file browser and return to the settings dialog.

Depending on the file type, a Warning may inform the users that the file already exists and request user confirmation of the export.

It also informs users that older versions of the file are available in the version history.

Create a Folder

The user can create a folder with the New Folder button or the keyboard shortcut Ctrl+B.

The folder is created when the users move the focus away from the Name input field or press the Enter key.

After the folder is created, provide a message toast to confirm the creation and open the new folder automatically.

Message text: The new folder was created.

Locked Folders

Users can browse locked folders, but cannot export files to them. In such cases, the Locked icon replaces the Folder icon and the Export button remains disabled.

For more details, check Iconography.

Import

The cloud file browser allows users to import files from the cloud to an SAP instance.

The Upload button is disabled until a file is selected for import.

Accessibility

The initial focus is placed on the first selectable item in the list.

The primary action can be triggered by a keyboard shortcut. For more details, see Export:  Accessiblity.

Loading Data

Use the busy indicator to cover the table space during the initial content loading.

If there are too many items to load, a limited number of items is loaded and more items load when the scroll hits the bottom of the list. The busy indicator shows at the bottom of the list.

Empty States

Use illustrated messages when the following cases arise:

No file share found

The default file share doesn’t load or there is no available file share.

Headline: No File Share found
Description: Try reloading the file browser. If that doesn’t help, contact your administrator.
Illustration: ErrorScreen

Disable New Folder and primary actions.
Provide a Reload button that attempts to reconnect to the file share.

Folder fails to load

Headline: Unable to load the folder
Description: Try reloading the file browser. If that doesn’t help, contact your administrator.

Disable New Folder and primary actions.

Empty folder

Headline: There are no files yet
Description: When there are, you’ll see them here.
Illustration: SearchFolder

The user doesn’t have permission to access the file share

Headline: Permission Denied
Description: You cannot access this file share. To get access, contact your administrator.

Disable New Folder and primary actions.

Last Selected Location

When leaving the cloud file browser, the last selected folder and file share are remembered so the user can access it directly when coming back to the cloud file browser.

If the last selected file share is unavailable, an illustrated message shows in the cloud file browser (more details in Empty States).

If that last selected folder is inaccessible, the user is taken to the default location without warning.

Column sorting

The sorted column and the sort order is remembered when the user leaves the cloud file browser.

Responsiveness

The cloud file browser embedded components (responsive table, toolbar, form) respond to the browser size according to their individual specifications.

Resources

The situation details view displays the situation with contextual information from the time the situation was created, so that users understand the circumstances that triggered the situation.

The situation details view contains the following sections:

• Situation description
• Contextual information/Situation details
• Actions to solve the situation, if applicable

There are two versions of the situation detail view:

• Situation page: The situation page is part of the My Situations – Extended app and available with the extended framework for Situation Handling.
• Situation section in a business app: The situation details are embedded in the object page in a business app and available with the standard framework for Situation Handling.

Situation Page

The situation page displays the situation with contextual information from the time the situation was created so users understand the circumstances that triggered the situation.

The situation page is based on an object page layout and contains the following sections:

• Header: The header is based on a default layout and contains the summary of the situation and standard actions.
• Contextual information/Situation details: This section contains custom information.
• Actions: This section contains solution proposals and navigation to related business apps, depending on the configuration.

1. Situation description
2. Navigation bar
3. Situation details
4. Solution proposals
5. Navigation to related business apps
6. Status

7. Processor
8. Situation actions such as Assign to Me, Close Situation
9. Dynamic page header
10. Contextual information
11. Actions

Behavior and Interaction

When the situation page is opened, the initial focus is on the first section.

Components

Header

The header of the situation page contains the following components:

• Situation description
• Status: The status of the situation which is either open or in progress
• Processor: The name of the person assigned to the situation if the status is in progress
• Actions: Close Situation and Assign to Me

Behavior and Interaction

The Close Situation action opens the Situation Close dialog where users can close a situation manually.

With the Assign to Me action, users can assign the situation to themselves.

The status changes to In Progress and the user’s name is shown as the processor.

The name of the button changes to Unassign.

Selecting Unassign resets the situation to the status “open” and removes the processor label and name. The button name changes back to Assign to Me.

Situation Details

Situation details help users make educated decisions when solving situations. It is entirely based on the custom layout. Depending on the configuration, it contains contextual information from the affected business object and data from the object that triggered the situation.

Actions

The situation page can contain the action types described below:

• Solution Proposals
• Navigation to Related Apps

Both are configured in the Situation Type.

Solution Proposals

Solution proposals are quick actions that resolve a situation and remove it so the situation is no longer displayed.

Interaction and Behavior

The tab Solution Proposal/Common Action is only visible if an action that closes a situation is configured.

Selecting a simple solution proposal opens a confirmation message.

Confirming the proposal, for instance, Cancel Order, closes the situation and takes the users back to the list view where a success message toast is shown.

The corresponding list item is removed and the number of situations in the list is reduced by one.

For a complex solution proposal, users can also use a value help dialog for selecting the appropriate parameters before confirming the proposal.

Navigation to Related Apps

These actions navigate to the business apps that support users in solving a situation.

Behavior and Interaction

The tab Related Apps is only displayed if an action that navigates to a business app is configured.

Selecting a related app navigates to the corresponding business app or to a specific object page, depending on the configuration. The status of the situation remains unchanged.

Situation Section in a Business App

The situation section displays the situation with contextual information from when the situation was created, so that users understand the circumstances that triggered the situation. The situation section is displayed as the first section in the object page of a business app and contains the following subsections:

• Situation: the tab contains the situation message strip.
• Related information (optional): the tab contains contextual information that supports users in solving a situation, and a quick action that closes a situation.

Additionally, the title of the object page header is followed by an interactive situation indicator.

1. Situation indicator
2. Situation tab in navigator bar
3. Situation message strip
4. Situation details
5. Situation proposals

6. Navigation to related business apps
7. Object page header
8. Situation section
9. Standard object page sections

Behavior and Interaction

When the object page of a business app is opened, it shows the interactive situation indicator. in the header.

When the users select the indicator, the situation preview opens.

Choosing Show Details unhides the situation section. If users navigate from a situation preview outside the object page, for example, from the My Situations app, or from a notification, the situation section is displayed and the focus is on it.

Related Links

The Situations app displays all situations in a user’s area of responsibility.

There are two versions of the app:

• My Situations – Extended comes with the extended framework for Situation Handling and is the reference app for UX design.
• My Situations comes with the standard framework for Situation Handling and is a simplified version that contains only a work list.

Situations Tile

The situations tile on SAP Fiori launchpad features the number of situations.

The tile includes the following components:

• App title
• Situation indicator
• Number of situations

Control

The control is based on a standard SAP Fiori launchpad tile.

Interaction and Behavior

Selecting the tile opens the Situations app.

List View of Situations App

When users open the Situations app, they can see all the situations in their area of responsibility.

The list view is based on a flexible column layout and contains the following components:

• Scenario pane (6)
  • Search field (1) for situation scenarios
  • Navigation pane that lets you select all situation scenarios (2) or a specific situation scenario (3)
• Situation pane (7)
  • Smart filter bar (4) with a Search field for situation instances
  • List view of the situations (5), including their statuses and contextual information

Interaction and Behavior

The layout differs depending on the scenario selected in the navigation pane:

• When the user opens the app, all situation scenarios are selected and all situations in their area of responsibility are displayed. The smart filter bar contains standard filters.
• When the user selects a specific scenario, the layout changes and only situations related to this scenario are displayed. Additionally, the smart filter bar and the contextual information change, depending on the configuration.

All custom layouts for the My Situations – Extended app are configured in the Manage Situation Scenarios app.

No Situation Exists

If there are no situations in the user’s  area of responsibility, the generic view is displayed with zero situations and the generic information, “You don’t have any situations that match your search criteria.“

Situations in Aggregated Notification

When users navigate from an aggregated notification that refers to multiple situations, they go to a dedicated page that lists these situations.

The title of the page is Open Situations in Notification. The list view is the same as the scenario-specific view. It filters for the situations mentioned in the notification. The page does not contain search and filter options.

Interaction and Behavior

Users can open this page only if they click an aggregated notification. The list view is a subset of all situations referring to a scenario, filtered by the items that are mentioned in the notification. The list view supports the same interaction as the scenario-specific list view, but without search or filter options.

The header also contains breadcrumb navigation to the generic list view of the My Situations – Extended app or the scenario-specific view relating to the situations in the list.

Scenario Pane

The scenario pane consists of a search field and a navigation pane.

Search

The search field applies to the scenarios in the navigation pane. Users can search for scenarios by entering text in the search field.

Navigation Pane

The navigation pane displays all the situation scenarios for which situations exist. It shows the scenario name and the number of situations that relate to the scenario.

Interaction and Behavior

Selecting a scenario in the navigation pane displays only the situations in the list pane that relate to the scenario.

If the last situation related to a scenario is closed, the scenario disappears from the navigation pane. If no situation exists, the navigation pane is empty.

Situation Pane

The situation pane consists of a smart filter bar and a list view that shows the situations.

Smart Filter Bar

When users open the app, the smart filter bar contains a search field and standard filters:

• Status: The status of a situation is either open or in progress.

• Created At: With a Dynamic Date Range dialogue, users select a specific date or period

• Scenario: With the dropdown, users select one or more scenarios

The filter bar also contains the standard actions Go and Adapt Filters.

Interaction and Behavior

When you select a specific scenario, the content of the smart filter bar changes. The filter bar shows the search field, a standard filter Status, and custom filters that are defined in the Manage Situation Scenarios app.

List View

The list view consists of the list header and list items.

Header

The list view header has the default title Situations followed by the number of situations in parentheses. In addition to the standard actions Refresh, Group, and Settings the action Close Situation is shown.

Line Items

The line items in the list view have multiple columns:

• Situation description: summary of the situation
• Status: situation status
• Processor: name of the processor if the situation status is in progress
• Scenario: name of the scenario to which the situation belongs
• Key Information: a dynamic column with custom data providing contextual information that is configured in the Manage Situation Scenarios
• Forward navigation: opens the situation detail view

Interaction and Behavior

When the Situations app is opened, the initial focus is on the first line item in both the navigation pane and in the list view.

When the user selects a specific scenario in the navigation pane, the Key Information column is replaced with custom columns.

Selecting a situation item takes the user to the situation detail view.

• The My Situations – Extended app opens the situation page
• The My Situations app opens an object page with a situation section in the corresponding business app.

Related Links

Situation Handling comes with multiple controls for the UX pattern of progressive disclosure that improves usability by delivering users information and capabilities gradually: Initially, users see the minimal display for a situation. They can seek additional levels of detail about it, according to their needs and goals.

The controls are displayed in multiple places in the SAP Fiori UI.

They are:

• Situation indicator (XS)
• Situation description (S)
• Situation preview (M)
• Situation detail view (L)

Additionally, a standard dialog for closing a situation manually is part of various situation components.

Situation Indicator (XS)

The situation indicator illustrates that a business object is affected by a situation. It is the smallest control for flagging an issue.

Two types of situation indicator exist:

• Situation indicator
• Interactive situation indicator

Situation Indicator

The situation indicator consists of an icon that represents a business situation.

Control

A situation corresponds to a warning so the general warning icon is used.

Usage

The situation indicator is displayed in front of a situation title in controls such as the situation description, the situation preview, or the situation page.

Interactive Situation Indicator

The interactive situation indicator is shown with the affected business object and acts as a button that allows users to see additional details, according to the principle of progressive disclosure.

Control

A situation icon indicates a single situation.

A situation icon is followed by a number indicates multiple situations.

Usage

Use the interactive indicator to mark a business object that is affected by a situation. It is displayed after the object name. You use it for list items and object page headers in business app. You can also use it as standalone icon in a list column so users can to filter for items affected by a situation.

Interaction and Behavior

The behavior of the interactive situation indicator differs depending on if there is one or more situations.

Single Situation

When users hover over an interactive situation indicator, a tooltip displays the generic text: There is one situation for this item.

When they select an indicator, a popover displays a situation preview.

It contains the situation description and the Show Details button that takes users to the situation detail view.

Multiple Situations

When users hover over an interactive situation indicator for multiple situations, a tooltip displays a generic text that includes the number of situations for the object, for example: There are 3 situations for this item.

When users select an interactive situation indicator, a popover is displayed with the situation switch.

They can select a situation from the list to open a situation preview that provides further details about the situation.

The Show Details button takes them to the situation detail view.

Situation Description (S)

The situation description is a summary of the exceptional circumstance and its date of occurrence. It includes the following elements:

• Situation indicator
• Situation title
• Situation text, a brief description of the situation
• Occurrence of the situation as relative date

It is displayed in various controls:

• Situation notification
• Situation card
• Situation list item
• Situation message strip

It is also shown on the situation page header.

Situation Notification

You use notifications to alert users about urgent and important situations on SAP Fiori launchpad.

Control

For layout details see: Notifications.

Usage

The notification is triggered automatically if it was configured in the Situation Type.

Interaction and Behavior

When users select a notification, they go to to the situation detail view.

If multiple situations are aggregated in one notification, it takes users to a filtered list of situations in the business app or to the aggregated notification view in the  My Situations – Extended app, depending on the configuration.

Situation Card

The situation card is shown in the To-Dos section of My Home on SAP S/4HANA Cloud Fiori launchpad.

Usage

The latest situations in a user’s area of responsibility are displayed in the To-Dos section. The number of cards is automatically adapted to the screen width according to the responsive design. The number of cards displayed depends on the screen width,

Interaction and Behavior

Users select a card to go to the situation detail view.

Control

For layout details, see Cards.

Situation List Item

The situation list item displays the situation description as a list item.

Control

For detailed layout see: Standard List Item.

Usage

The situation list item is displayed in the list view of the Situations app.

Interaction and behavior

Users select a situation list item to go to the situation detail view.

Situation Message Strip

The situation message strip is shown on an object page of a business app and is available only for the standard framework for Situation Handling. In addition to the other situation description controls, it can contain the following components:

• Link More Information (optional)
• Action Close Situation
• Situation Switch (dynamic)

Control

The control is based on the message strip.

Usage

The message strip is part of the situation section that dynamically appears as the first section on the object page in a business app. The situation section also contains contextual information and optional actions to resolve the situation.

Interaction and Behavior

The link More Information takes you to helpful information on, for example, a web page or a process handbook, which can be configured in the Situation Type.

The Close Situation action opens the close situation dialog.

The switch in the situation message strip appears dynamically as a transparent button if the business object is affected by more than one situation.

Situation Switch

If a business object is affected by more than one situation, the situation switch lets users choose one.

There are two kinds of situation switches:

• Switch for interactive situation indicator
• Switch for situation message strip

Switch for Interactive Situation Indicator

The switch for the interactive situation indicator contains the following components:

• Situation indicator
• Situation title
• Occurrence of situation as a relative date

Control

The control is based on the list Item.

Usage

The situation switch is displayed when the users select an interactive situation indicator for multiple situations. The popover contains a list of situations.

Interaction and Behavior

The situation switch contains a list of situations.

Users select a situation from the situation switch to open a situation preview that provides further details about the situation.

Hierarchical Situation Switch

The standard framework for Situation Handling also supports the hierarchical situation switch. This switch both displays the situations for the affected object and indicates when objects below it in the hierarchy are also affected by a situation, for example, on an item or schedule level.

Switch for Situation Message Strip

The switch for the situation message strip is available only for the standard framework for Situation Handling. It contains the following components:

• Situation indicator
• Situation title

Control

The control is based on the list Item.

Usage

The situation switch is a popover that’s displayed when users select the arrow on the transparent button after the situation title in the situation message strip. contains the situation switch. The popover contains the situation switch

Interaction and Behavior

The situation switch contains a list of situations.

The selection of a situation from the situation switch changes both the data in the message strip and the contextual information in the situation section of the business app’s object page.

Situation Preview (M)

The situation preview provides information about the situation and an action. It contains the following components:

• Situation indicator
• Situation title
• Occurrence of situation
• Situation text
• Show Details button

Control

The control is based on the popover.

Usage

Users open the situation preview by selecting an interactive situation indicator or an item belonging to the situation switch.

Interaction and Behavior

When users choose the Show Details button they go to the situation detail view.

Situation Detail View (X)

The situation detail view contains all the information users need to solve a situation.

• Situation description
• Contextual information
• Actions to solve a situation, if applicable

There are two versions of the situation detail view:

• Situation page. The situation page is part of the My Situations – Extended app and available with the extended framework for Situation Handling.
• Object page in business app. The situation details are embedded in the object page in a business app and available with the standard framework for Situation Handling.

Close Situation Dialog

Users can close a situation manually with the Close Situation dialog.

Control

This control is based on a dialog of type Message and state Information.

Usage

Users can always close a situation manually. For example, in cases where the solution proposals offer no available quick actions or users want to overrule the system behavior because they resolved the situation through activities outside the system such as negotiating a new contract when the current one is about to expire. Sometimes, the situation may also be outdated or invalid. Users can provide the corresponding reason:

• Resolved – the situation is solved.
• Obsolete – the situation is outdated.
• Invalid – the situation is a false alarm.

Interaction and Behavior

The close situation dialog opens when you select the Close Situation button. The button is available in various components, for example:

• List view in the Situations app
• Situation page
• Situation message strip

After the users select the feedback and confirm, the situation is closed. A success message toast is displayed.

Depending on where the user has closed the situation, the display changes as follows:

• List view: The selected situation list items are removed, and the number of situations is reduced accordingly.
• Situation page: The page closes and users go back to the list of situations. The corresponding list item is removed, and the number of situations reduced by one.
• Situation message strip: The situation section closes and users go to the object page. In case of multiple situations, the next situation is displayed.

After closing a situation, all the indicators in apps are removed.

Related Links

A form is used to present data to the user and to allow users to enter data in a structured way.

The form acts as a container for other components (such as labels, input fields, checkboxes, and sliders), which are structured in a specific layout.

When to Use

Use the form:

• When you require data input from the user to collect information (for example, in a survey or application form).
• When the user can edit or enhance data that is already available.

Don’t use the form:

• For presenting and editing a set of repeating data. Use a table instead.

Top Tips

• Order the form logically from a user’s perspective. For example, ask for a user’s name before asking them for their address.
• Group related information by using form and group titles.
• Try to arrange form groups (especially in size L and XL) in a way that the form:
  • Is easy to read and understand.
  • Does not contain too much white space (split groups if necessary).
• If an input element is in an error or warning state, provide a meaningful message for the user.
• If you display the unit of measurement after the input field, make sure that it’s properly visualized and doesn’t wrap to the next row.
• When the form is in edit view, right-align amounts to avoid gaps between the amount and the unit of measurement.
• When a form is in display view, left-align amounts to avoid large gaps between the labels and values.
• If the expected input isn’t obvious from the label alone, provide a brief placeholder (word or phrase) as a hint to help the user with data entry.

Anatomy

Structure

A form is structured into form containers. Each form container consists of form elements.

1. Container: The form is the top-level container component. It controls the content layout and the responsiveness.
2. Group: The form group enables grouping of the form content.
3. Form item: A pair of label and form field.

Form Components

A simple form consists of a header area and a content area with pairs of label and form field.

1. Header area: The header area is on top and displays a header text.
2. Label: The label of a single form item. It serves as the name of the input field.
3. Value: In display mode, the value is read only. In edit mode, a value can be added or edited.

Variants

Form Variants

Form with Custom Header

You can use a custom form header (for example, with additional buttons).

Freestyle Form

The freestyle form gives you full control of the form and its elements.

Layout Variants

Single Form on a Page

A single form can contain one or more groups.

Multiple Forms on a Page

You can also use multiple forms on one page. Separate forms are more distinct visually than groups within a form.

Label-Value Alignment

You can align labels vertically or horizontally.

Vertical alignment: The vertically-aligned form best supports the reading flow and avoids unnecessary eye movements.

Horizontal alignment: If there is enough space, the label can be right-aligned next to the value.

Form Group Span

Form groups can be distributed into one or more columns.

Example:
Group More Information spans two columns.

Form Item Span

A form item can span several columns.

Example:
Form item “Full Name” spans in two columns.

Features

Label for Required Fields

The label of a required field is marked with an asterisk (*).

The asterisk is visible in edit view only.

Empty State Indicator

If a form field doesn’t have a value, an empty state indicator is shown by default in read-only mode.

The indicator helps the user to better scan the form and perceive the field label and empty content as one unit.

If a field is empty in the edit view, there is no empty state indicator. The field is either empty or displays a placeholder text, if defined.

Behavior and Interaction

The visual appearance of the form depends on the component state of the form fields. As a result, three form views are possible: display, edit, and edit with read-only fields.

Display View

The data is presented as label-value field pairs, without editable fields.

Edit View

The data is presented as label-input fields pairs, so users can enter or edit data.

Edit View with Read-Only Fields

Some fields are editable and some are not (shown in read-only state).

Responsive Behavior

Breakpoints

The form component reacts and changes its layout on predefined breakpoints. Depending on its size, the form content gets divided into one or more columns.

Example

S1 M2 L3 XL6: 1 column for S, 2 columns for M, 3 columns for L, and 6 columns for XL.

Group Spreading

If a form contains more than one group, the group with the most items wraps with priority by default. In the XL example below, the Contact and Address groups each span two columns.

Wrapping

To avoid text truncation, all values and labels within a form wrap by default.

By default, form titles wrap up to 3 rows and then truncate.

Alignment

If there isn’t enough space to show a horizontally-aligned form, the display switches to vertical alignment.

Form Label Span

The width ratio of the label and form field can be defined by a breakpoint.

Related Links