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.

Usage

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 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. 

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.

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.

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.

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 6 attachments horizontally and 7 attachments on a consecutive row. Use full-screen attachment view on a full-screen modal 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.

Specification

The minimum spacing between the two attachment items is 5 pt. The number of attachment items changes based on the attachment collection width. 

n= number of attachment items in one collection row, n>=4, n is an integer

w = attachment collection width

n = (w+5)/87

Resources

Development: FUIAttachmentsFormCell

SAP Fiori for Android: Attach