Attach
Intro
The attach pattern is usually part of the create or editing work flow, located at the end of the form. All the attached files should be associated with a certain business object. The app team can specify which types of files are supported.
In general, users can only add/delete attachments when it is in edit mode. After the changes have been saved, it goes into view mode, and users can view the attached files, but cannot make changes to them. This prevents users from accidentally making changes to attachments. It can also be used to give role-based access, as some users may not be allowed to edit.

Adding attachments on mobile (left) and tablet (right)
Anatomy
Edit Mode
In edit mode, attach consists of an attachment header and list of attached files
Attachment Header
A. Text Label
Text label shows the name of this section. Use “Attachments” as the default label. The label can be customized based on context. For example, in the process of creating an expense report, the attachment section can be labeled as “Receipts”.
B. Counter
This shows the number of attachments
C. Add Button
Tapping the Add button triggers the workflow of adding an attachment.

Anatomy of attachment headers in edit mode
Attachment List
The attachment list shows the basic information of each attached item. Each list item consists of:
A. Thumbnail
Provides a preview image of the attached file when available; otherwise, display the icon for that file type.
B. File Name
A text string displays the file name with file type extension. If the name is longer than the allocated space, truncate it in the middle to keep the file type visible.
C. Delete Icon
Tapping the delete icon deletes the item directly.

Anatomy of attachment lists in edit mode
View Mode
In view mode, attachments can be displayed in list view or grid view.
Attachment Header
The attachment header in view mode has the same structure as in edit mode, except replacing the Add button with view switcher icons.
A. Text Label
Text label shows the name of this section. Use “Attachments” as the default label. The label can be customized based on context. For example, in the process of creating an expense report, the attachment section can be labeled as “Receipts”.
B. Counter
This shows the number of attachments
C. View Switcher Icon
This icon allows users to switch between the two type of views. Use the grid view icon when attachments are displayed in list view. Use the list view icon when attachments are displayed in grid view.

Anatomy of attachment headers in view mode
List View
In list view, each attached file is displayed as an object cell with:
A. Thumbnail
Provides a preview image of the attached file when available; otherwise, display the icon for that file type.
B. File Name
A text string displays file name with file type extension. If the name is longer than the allocated space, truncate it in the middle to keep the file type visible.

Anatomy of attachment lists in view mode
Grid View
In grid view, each attached file is displayed as an image cell:
A. Container
The container defines the size and boundary of each cell. When preview image is available, fill the container with the image. Otherwise, display the icon of that file type.
B. Text Protection
Text protection is a scrim on top of the background image to enhance the legibility of text.
C. File Name
File name helps users identify the file. For items with preview image, reserve one line to display file name since the image is more helpful in this view. For items without preview image, allow two lines of text to display file.

Anatomy of attachments in grid view
Behavior and Interaction
To add an attachment, tap on Add button.
On mobile, this will trigger a bottom sheet, listing out all the possible ways to add a file supported by this app.

Opening a bottom sheet on mobile
On tablet, a menu is used instead of bottom sheet.

Opening a menu on tablet
Users select from the menu based on the location or type of file they want to add. The file selection process is powered by Android system’s default features. From here, users would be led to other apps like camera app if they select “Take photo”. The details of this process might differ based on device brand and system version, so just follow the system’s built-in behavior.
After users confirm their selection, they will be led back to the page where the add action was triggered. The newly added item is shown at the bottom of the list, and the number of attachments is updated.
Each cell has two touch targets: the delete button, and outside the delete button. Users can directly delete one item by tapping the delete button. Users can view the file by tapping outside the delete button. The preview of the file is not handled inside the Fiori app. It is handled by the Android system. Apps support this file type would be launched to view the file.

Delete attachment from the list
When users have finished adding files and save the changes, the attachment section or the whole page would switch to view mode. In general, there’s a Save button for all objects in the edit/create work flow. In cases where the object is editable by default and changes are auto-saved, attachment component stays in editing mode all the time.

Left: edit mode, right: view mode
Based on the floorplan used in the app, the attachment list expands full-width within the content area.
Attachments are displayed in list view by default, users can use the grid view icon to switch to grid view. In certain contexts, the majority of attached files have preview images (such as “attached photos”), so consider making grid view the default view. No matter what the default view or what view user is currently looking at, it becomes a list in edit mode.

Left: list view, right: grid view
Specifications
Attachment Header
Attachment header is based on the header.
Mobile

Mobile attachment header in edit mode

Mobile attachment header in view mode

Mobile attachment header in edit mode specifications

Mobile attachment header in view mode specifications
Tablet

Tablet attachment header in edit mode

Tablet attachment header in edit mode specifications

Tablet attachment header in view mode

Tablet attachment header in view mode specifications
Bottom Sheet (Mobile)
Please refer to bottom sheet.
Dropdown Menu (Tablet)
Please refer to menu.
Attachment List
Each attachment follows the object cell spec. The width is responsive to screen size. Typically, it follows the keylines of the device.
Mobile

Mobile attachment list in edit mode

Mobile attachment list in view mode

Mobile attachment list in edit mode specifications

Mobile attachment list in view mode specifications
Tablet

Tablet attachment list in edit mode

Tablet attachment list in edit mode specifications

Tablet attachment list in view mode

Tablet attachment list in view mode specifications
Attachments in Grid View
The grid size is calculated based on the content area width, padding, and number of columns. Each cell is a square shape with 4dp corner radius.
Although the container size is flexible, the height of text protection is always 32dp for one line and 48dp for two lines. The file type icon size is also fixed at 40*40dp, always centered in the area above text protection.
On mobile, the content area follows the 16dp device margin. The padding between each column and row is 16dp, and cell size range is 112dp to half of screen width in portrait (at least fit 2 cells in one row). Padding between the header and first row is 12dp.

Mobile attachments grid view

Mobile attachments grid view specifications
On tablet, the content area width depends on page layout. Follow the 24dp keyline if the content is full-screen width or inside a dialog. The padding between each column and row is 16dp, and minimum cell size size is 128dp*128dp. Padding between the header and first row is 12dp.

Tablet attachments grid view
