Updated: April 26, 2023

Attachment Form Cell

FUIAttachmentsFormCell

Intro

An attachment 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 Attachment” 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 attachment control at the bottom of a create modal, object page, or object detail page.
  • Use an attachment control as the last piece of information needed for the create screen or edit mode workflow.
Don't
  • Don’t use an attachment control for uploading profile images.
  • Don’t use an attachment control on read-only pages.

Anatomy

A. Attachment Label

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

B. Add Attachment Button

Lets the user add images, video, audio, and documents to the attachment collection.

C. Attachment Item

Provides a preview of the image, video, or document. If a preview is not available, then a doctype icon with the document name should be displayed. When tapped, the item goes into modal view where the user can view an image and allows for more functionality. 

Compact attachment form cell anatomy
Compact attachment form cell anatomy

 

Behavior and Interaction

Adding Attachments

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

Action Sheet

To add attachments, a user taps on the “Add Attachment” button (+). This initiates an action sheet that gives the users two choices – Insert Photo or Video, Add Attachments and Cancel.

Modal View

Tapping on Add Attachments triggers a modal view for iCloud where a user can drill down into a folder to select a document.

Document Select

Once the attachment is selected, the modal view moves down and the create screen shows the attached document.

  

Adding attachments
Adding attachments

 

Previewing Attachments

To preview attachments, a user taps on an attachment item that navigates to a modal view with further details about the attachment.

Navigation

From the modal view, a user can swipe to navigate to the next attachment or they can tap on the “Back” button to navigate back to the “Create” screen.

Title

A user can reference which attachment they are viewing by looking at the title and subtitle in the navigation bar. The title reflects the current attachment out of the total number of attachments while the subtitle indicates the file name of the current attachment.

Previewing attachments
Previewing attachments

 

Deleting Attachments

To delete attachments, a user can tap on the attachment item, navigating to the modal view.

From the modal view, they can delete the current attachment shown on screen by tapping on the Trash icon.

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

Deleting attachments
Deleting attachments

 

Adaptive Design

The attachment control is available on both compact and regular width. Regular width has two modal views: readable regular view and compact view. Use the appropriate attachment view.

Regular Readable Attachment View

The regular readable attachment view displays up to six attachments horizontally and seven attachments on a consecutive row. Use full-screen attachment view on a full-screen modal view.

Regular readable attachment view
Regular readable attachment view

Compact Attachment View

The compact attachment view displays up to 5 attachments horizontally and 6 attachments on a consecutive row. Use the form sheet attachment view on a form sheet modal.

Compact attachment view
Compact attachment view

Resources

Development: FUIAttachmentsFormCell

SAP Fiori for Android: Attach