Updated: December 5, 2023

Attachments Form Cell

FUIAttachmentsFormCell

Intro

An attachments control allows users to upload files such as image, audio, video, and text files as well as PDF, CSV, and presentation files. Tapping on the “Add (+)” button allows users to upload files from the photo library or other supported apps.

Attachment grid on compact (left) and on regular (right)
Attachment grid on compact (left) and on regular (right)

Usage

Do
  • Place an attachments form cell at the bottom of a create modal, object page, or object detail page.
  • Use an attachments form cell as the last piece of information needed for the create screen or edit mode workflow.
Don't

Don’t use an attachments form cell for uploading profile images.

Anatomy

A. Label

Indicates at a glance the number of attachments that have been added to the attachments container.

B. “Add (+)” Button

Allows the user to add images, video, audio, and documents to the attachments container.

When the attachments form cell is active, the “Add (+)” button is visible to the user.

When the attachments form cell is in read-only mode, the “Add (+)” button is hidden.

C. Attachment Item

Provides a preview of the image, video, or document. If a preview is not available, a doctype icon with the document name should be displayed. When tapped, the item goes into a modal previewer where the user can view or delete the item. 

D. Attachment Text Content

Provides additional information about the attachment item. The first line is the mandatory attachment item name. The second and third line are optional fields and may be populated by information such as file size and date uploaded. 

Compact attachment form cell anatomy
Compact attachment form cell anatomy

 

Behavior and Interaction

There are three states for the attachments form cell.

Active State

In active state, the user can add, view, and delete attachment items. 

Adding Attachments

The “Add (+)” button is the main control that allows a user to add attachments. It remains in place as the user adds more attachments. Subsequent attachments are displayed to the right of the “Add (+)” button and, if the number of attachments exceeds its limit, the attachment container overflows to an additional row.

To add attachments, a user taps on the “Add Attachment” button (+). This initiates an action sheet that provides attachment source options for the user.

Tapping on an option in the action sheet triggers a modal view where a user can drill down into a folder to select a document.

Once the attachment is selected, the modal view moves down and the attachments form cell displays the document as an attachment item.

Adding attachments in active state
Adding attachments in active state

Viewing Attachments

Tapping on an attachment item opens the previewer, where the user can view the attachment in detail and swipe through each attachment item.

Viewing attachments in active state
Viewing attachments in active state

Deleting Attachments

In the previewer, the user may delete the attachment item by tapping on the “Delete” icon in the top right corner.

After the attachment is deleted, the changes are reflected on the attachment container and the form cell label.

Deleting attachments in active state
Deleting attachments in active state

Error Handling

If there is an error, the error message is displayed in red, with a red error icon, underneath the attachments form cell.

Attachments form cell error
Attachments form cell error

Read-Only State

In read-only state, the “Add (+)” button is hidden from the user’s view. The user is unable to add or delete attachments, but may still view the already attached items.

Viewing Attachments

The user may still tap on the attachment items to view them in the previewer.

Viewing attachments in read-only state
Viewing attachments in read-only state

Deleting Attachments

The user may not delete attachments in read-only mode. The “Delete” icon is disabled in the previewer.

Deleting attachments in read-only state
Deleting attachments in read-only state

Disabled State

In disabled state, the user can’t interact with the attachments form cell.

Attachments form cell in disabled state
Attachments form cell in disabled state

 

Adaptive Design

The attachments form cell is available in both compact and regular width. Regular width has two modal views: regular-readable view and compact view. 

Compact width on iPhone (left), compact on iPad modal (middle), regular-readable width on iPad (right)
Compact width on iPhone (left), compact on iPad modal (middle), regular-readable width on iPad (right)

Resources

Development: FUIAttachmentsFormCell

SAP Fiori for Android: Attach