Attachment

The Attachment pattern describes how attachments can be associated to an object or record and how the attachment can be displayed or viewed. The attachment pattern will demonstrate three activities:

• Add Attachments: This describes how an attachment and a record are associated.
• List Attachments: This describes how attachments can be organized before they are viewed.
• View Attachments: This describes how attachments are displayed and viewed.

Appearance

Appearance characteristics for this component.

Add Attachment

• Create New Object: This will typically involve taking a picture with the camera or recording via the microphone, and then storing the file in the application directly.
• Add from Local Storage: Most commonly this would be pulling up the phone's photo repository from within the app and choosing a photo to attach to a record.
• Add from Cloud Storage: Adding a file from a cloud storage application like Oracle Storage or Oracle Docs, accessed from within the record application.
• Add from Other Application: Certain applications can be accessed if, for example, allowed by the record application.

List Attachment

Displaying attachments may be done in many different methods. Here are a few common methods:

• Document Icon or Thumbnail: Useful to indicate that a file is attached to a record. The icon represents the attachment type or file type and may describe some of the file's properties. With thumbnails, a small version of the document's content or image is shown in the icon.
• List View: Attachments are presented as list items in a simple list view.
• Grid View: Attachments are displayed in simple grid, similar to how they are displayed in iOS Photos.

Considerations for how to organize attachments includes:

• Bubbles: Use count bubble to indicate the number of attachments associated with a record.
• Properties: Display attributes of an attached file, such as  Name, File Size, File Type, Number of Pages, and Date.
• Sharing: As file sharing applications have become more popular, access to them via a pop up might be helpful to share an attachment. (See Share)

View Attachment

Viewers are fairly simple and consist of a few common elements.

• Header: The name of the attachment is centered in the header.
• Close Button: A command button in the header usually  labeled "Done", which closes the attachment.
• Share Icon: An icon used to share or open the attached document with another application.
• Navigation: Presentation of some form of navigation between pages of the attachment (such as a slider or navigation buttons).

Behavior

Common behaviors for this component.

Add Attachment

Adding: The user creates the attachment or selects it from a repository, housed either within the app, in local storage like the Camera Roll, from cloud storage like Oracle Storage, or from an outside application that is recognized by the application where the attachment will reside.

• Local Storage: The user accesses a local storage repository like the Camera Roll to select a photo or video.
• Cloud Storage: The user accesses a cloud storage repository like Oracle Storage or Dropbox, and can select from the files housed there.
• Associate: The application opens the camera or sound recording functionality of the phone to allow creating an attachment and associating it to the application. This typically leaves a photo in the Camera Roll, but it doesn't have to.

List Attachment

• Selection: All attachment icons or labels should be tappable and should open the attachment in a viewer.

View Attachment

• Opening: Tapping an attachment icon, list item, or other designated object can open the attachment in a viewer.
• Closing: Tapping the "Close" button will close the attachment being viewed.
• Sharing: Tapping a "Share" button or icon will display a popup with share options or list other applications that can be used to view the attachment.
• Change Page: Swiping in an attachment page can turn the page being viewed in the document.
• Pagination: A slider may be used to move between pages; tapping and dragging the slider will change the page of the attachment that is in view.
• External Applications: If there are other options for opening attachments, teams can provide users with a list of external applications they could use.

Usage

Usage guidelines for this component.

Add Attachment

• Provide users with the ability to easily create new objects.
• Support opening attachments from other common applications.
• Show file sizes for attachments if you have a size limit on what needs to be attached.
• Make sure it is easy to discover how to attach an object. iOS's native mail client requires a press and hold, and then a swipe to see the option to attach a picture or video, which most users are unlikely to discover on their own.

List Attachment

• Show attributes, such as file size, date updated, and author, in addition to the name of the prospective file attachment to help the user know which attachment to select.

View Attachment

• Keep the design of the document viewer simple, and focus on displaying the document.

Related

• Used On: Phone, Tablet
• Also Called: Files
• Related Components: Image, List View
• Related Patterns: Create Object, Manage Object, Remote Content
• Resources: None