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.
Month: July 2024
Cloud File Browser
Components
The cloud file browser is composed of the following controls embedded in a dialog:
- A file share select field
- A file name field (export mode only)
- Breadcrumb navigation
- A New Folder button (export mode only)
- A responsive table with files and folders
- The finalizing and Cancel actions
Iconography
- Spreadsheet (Microsoft Excel, Google Sheets, CSV…)
Tooltip: Spreadsheet
sap-icon://excel-attachment - Text Document (Microsoft Word, Google Docs, RTF…)
Tooltip: Document
sap-icon://doc-attachment - Presentation (Microsoft Powerpoint, Google Slides…)
Tooltip: Presentation
sap-icon://ppt-attachment - Portable Document Format (PDF)
Tooltip: PDF
sap-icon://ppt-attachment - Plain Text
Tooltip: Text File
sap-icon://attachment-text-file - HTML File
Tooltip: HTML File
sap-icon://attachment-html - Image File, Photo
Tooltip: Image File
sap-icon://attachment-photo - Audio File
Tooltip: Audio File
sap-icon://attachment-audio - Video File
Tooltip: Video File
sap-icon://attachment-video - Archive (ZIP, RAR…)
Tooltip: Archive
sap-icon://attachment-zip-file - Unknown Format
Tooltip: File
sap-icon://document - Folder
Tooltip: Folder
sap-icon://folder-full - 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.
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.
Resources
Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.
Implementation
- Export to Spreadsheet (SAPUI5 samples)
- Export to Spreadsheet (SAPUI5 API reference)
- Cloud File Browser (or Cloud File Picker) (SAPUI5 samples)
Situation Detail View
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.
- Situation description
- Navigation bar
- Situation details
- Solution proposals
- Navigation to related business apps
- Status
- Processor
- Situation actions such as Assign to Me, Close Situation
- Dynamic page header
- Contextual information
- 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.
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:
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.
- Situation indicator
- Situation tab in navigator bar
- Situation message strip
- Situation details
- Situation proposals
- Navigation to related business apps
- Object page header
- Situation section
- 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.
Situation section in a business app
Related Links
Overview in a Situations App
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.“
Empty situation list
Situations in Aggregated Notification
Situations in an 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 Controls
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
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.
Control | Icon | Type |
sap.m.Button | sap-icon://alert | Attention |
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:
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
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:
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.