Workspace / Components

Email viewer

A method for previewing an email before sending it to users within an experience. 

Overview

  • Release version
    Xanadu
  • Available sinceQuebec
  • A11Y WCAG 2.1 AA
ServiceNow link
Email viewer code documentation

UIB and developer guidance

Figma link
Email viewer Figma component

Figma library with components for designing Workspace.

Anatomy

Anatomy of the email viewer component

Preview of the email in email viewer

  1. Tab: Appears to display the email viewer
  2. Heading: Email subject
  3. Sender details: Name of the user sending the email and date stamp
  4. Recipients: Users to whom the email is being sent
  5. Email message: Content of the email
  6. Container: Area for the heading, sender, date, recipients, and message
  7. Action buttons: Reply and forwarding controls

Usage

Email viewer appears in the context of a record. The agent can use a related list opened from a record to find all email messages exchanged with customers. From this list, the agent can review the details of each message before forwarding it or replying to it. In addition, the agent can preview or download any attachments in the email.

Behavior

Learn how email viewer behaves when the display changes or a user interacts with the component.

Responsive behaviors

Email viewer automatically resizes to fit the container within the tab in which it’s placed.

Interactions

Learn how email viewer responds when a user interacts with it.

Preview email

The user can open the email viewer by selecting the “Emails” tab, available by default in case records. This action displays a related list of all emails associated with the record. The user selects the subject of an email to open it.

List of emails opened from a record

List of Emails for a particular case

Respond to an email

The email details page displays message details, such as subject, sender, and the date. To reply to or forward a message, the user selects the corresponding action button in the top right corner of the viewer. They are taken to a new tab with the email composer experience open, and the message loaded.
Email viewer can only send messages to users within the same experience.

Example of email message details

Download attachments

The user can select an attached file to view it or download the file by selecting the “Download” action.

Email message with attachment and download action

Hide email details

If the user doesn’t need or want to see the CC and BCC recipients, they can select the “Hide details” button to collapse the section containing this information.

Email page with details section hidden

Truncation

If the email subject is too long for the size of the container in which the email viewer is loaded, then the email subject truncates.

Example of a truncated subject line that was too long for the container

Usability

Email viewer complies with all internationalization and accessibility requirements.

Internationalization

When this component is used in a platform configured for a right-to-left (RTL) language, the tabs, heading, and email message align on the right.

Example of email viewer aligning on the right when translated into a right-to-left language

Accessibility

Learn how to access the actionable elements of email viewer through keyboard interactions and screen readers.

Keyboard interactions

You can access the actionable elements of email viewer with these keyboard keys:

  • Tab: Moves focus to next action. If there is no available action in the email body, tabbing moves focus out of the email viewer
  • Space or Enter: Performs the selected action

This is the tab order for email viewer:

Tab order of the email viewer component

Screen readers

When you apply ARIA labels to a component, screen readers announce the controls and content of email viewer in the prescribed tab order.