Anatomy
Learn about the individual parts of attachments.
- Attachment card: Includes the attachment thumbnail, file name, metadata, and action menu
- Select all checkbox: Selects or deselects all attachments at once
- Attachment search: Search box to search for attachments based on file name
- Heading: Identifies the set of attachments
- Sort: Sorts the attachments alphabetically based on file name
- More Actions: Displays list of actions that can be performed on all or selected attached files
- Attachments tab: Displays in the contextual side panel noting attachments to view (full component within contextual side panel only)
- Add files button: Uses iconic button for the full size and bare button for the compact size component to add a file
- Attachment card actions: Displays list of actions that can be performed on the attached file
Usage
Use the attachments component to upload files with the browse file button. The button opens a window for the user to select a local file to add as an attachment. The attachments component supports the following attachment file types: .gif, .png, .bmp, .pdf, .ppt, .doc, .xls, and .txt. An admin can set the supported file types. When configured, users can create or delete attachments in the attachment repository.
You can place the full component in a contextual side panel on a page or as a related item, where the attachments are associated with specific records.
In this example, the attachment component is configured in the contextual side panel.
Variants
Learn about the attachments component and find out how to use it in your design.
Types
The attachments component comes in full and compact versions. The full version is often seen with a contextual side panel, while the compact version is often placed inside a card or modal.
Full version (used in contextual side panel)
In this example, the full version of the attachment component is configured in the contextual side panel.
Compact version (used inside card or modal)
In this example, the compact version of the custom attachment component is placed in a modal
Sizes
The full and compact component versions expand and contract to fit the container.
Compact spacing mode - turned off
In this example, the attachment component appears in default size
Compact spacing mode - turned on
In this example, attachment component appears in compact size and spacing
Configurations
An admin can configure the attachments presence to display or not as needed for certain users.
Presets and controllers
This component contains a preset configuration that automatically configures properties and event handlers for a component, making the component ready to work when you add it to a page. A preset is designed to suit a specific use case. However, you can override preset property values with a custom configuration if you find it necessary for your design. Preset values that you override aren’t upgraded when updates are available. If you don’t want to use the preset values provided, select the option to configure the component manually. You can apply one preset to a single instance of a component on a page. For more information, see Presets.
A preset is always associated with a controller, which acts as a data resource for the component. Controllers provide the configuration data and event bindings the component needs to function in your experience. By selecting a preset, the required controller is added to the page. By adding a controller to the page, any new applicable components will have that controller's preset. For more information about how controllers work, see Controllers. For instructions on using the data inspector to view the default presets for a component, see View properties and events in the Controller API.
File size
You can define the maximum size of a file that a user can attach to a record.
Design recommendations
Learn how to apply attachments in your design.
Put a full attachment component inside the contextual side panel
Don't put attachment full component into containers other than contextual side panel
Put a compact component into a small container like a modal or play book card, because it's designed to fit a small space for optimal usage.
Don't put a custom attachment component (compact) into a large container like contextual side panel, because valuable options like search functionality may be lost.
UI text guidelines
These are some recommendations for using text with attachments.
- Use sentence case for all titles, labels, and column headers
- Keep all text labels short and informative to increase readability and scanning
- Keep content concise and purposeful to provide value to the user
- Capitalize only the first letter and any proper nouns in a string of text
- Ensure content is contextual and specific to offer guidance and support to the user
Behavior
Learn how the attachments component behaves when the display changes or a user interacts with the component.
States
The attachments component has the following states: empty and attachment card hover.
Empty
Empty state
Attachment card hover
Attachment card hover
Responsive behaviors
Full or compact attachment cards, adjust to the container size. The cards expand with the container size until the maximum card size is reached and then they transition into a multi-column view. For example, the full component can appear within the contextual side panel. The attachment cards shift sizes within their breakpoints to conform to the size of the container.
In this example, attachment cards expand with the container size until the maximum card size is reached
In this example, the full component is in a multi-column view (2 columns)
In this example, the full component is in a multi-column view (3 columns)
Interactions
The attachments component allows users to drag and drop files for upload, download all or individually selected files, interact with the attachment actions menu, upload using a button, and search through attachments (full component only).
In this example, attachment card menu is configured with options
Drag and drop
When there is a full component present in the contextual side panel or as a related item, the user can select one or multiple attachments to drag and drop anywhere into the window for upload.
In this example, the drag and drop function is shown in progress.
Download
The user can download all available files by selecting the More Actions icon, then selecting Download all (full-size component only). The files download as a ZIP file.
The user can also choose to download only the files they select (full-size component only).
Rename
The user renames an attached file by selecting the Attachment actions icon, selecting Rename, and then editing the file name.
In this example, a rename attachment is shown in progress.
Attachment card
Includes the attachment thumbnail (or NDS default thumbnail for that file type, if a thumbnail from the attachment is not available), file name, metadata, and action menu.
Users are granted access to different edit features in the attachment actions menu. Full editing access offers rename, download, and remove actions. Restricted editing will not see these options in the attachment actions menu. If the end user doesn't have access to any of the editing features, the actions menu will not appear in the attachment card. Files appear in the order uploaded.
Search field
Lets users look for attachments by file names associated with records, playbook steps, and emails (full-size component only).
Browse button
Uses iconic button for the full size and bare button for the compact size component to bring up a system browser window that lets the user select a local file to add as an attachment.
Truncation
When text in the attachments component exceeds the width of the container or content area, the text truncates with an ellipsis, and a tooltip shows the full content on hover.
In this example, truncated text includes a tooltip display.
Usability
The attachments component complies with all internationalization and accessibility requirements.
Internationalization
When the display translates to a right-to-left (RTL) language, the component content flows from right to left, maintaining the hierarchy.
Accessibility
Learn how to access the actionable elements of attachments through keyboard interactions.
Keyboard interactions
You can access the actionable elements of the attachments component with these keyboard keys:
- Tab: Shifts focus to attachment card and attachment actions menus, starting at the top and moving down the list of cards in chronological order, based on the attachment upload. The focus will move from the attachment card and then to the attachment actions menu. Content of the attachment card does not shift when in focus (e.g., truncated text does not expand when the card is in focus).
- Shift+Tab: Moves focus in the opposite direction of the tabbing focus (e.g., focus moves from an attachment actions menu to the associated card and then to the attachment actions menu from the card above it).
- Enter/Space: Opens the attachment for the card currently in focus in a full screen preview as well as opening the attachment actions menu and executing the actions.
- Up/Down arrows: When focus is inside the attachment actions menu, the up and down arrow keys are used to move between the menu options.
Tab order
