Components

Activity Stream

Show the list of changes made to a record (journal fields, emails, and attachments)

Overview

  • Available sinceQuebec
  • A11Y WCAG 2.1 AA
ServiceNow link
Activity Stream code documentation

UIB and developer guidance

Figma link
Activity Stream Figma component

Figma library with components for designing Workspace.

Anatomy

Learn about the individual parts of the activity stream.

Main anatomy

  1. Activity stream in side by side view: Contains activity stream compose and the activity feed
  2. Activity stream compose: Subcomponent of activity stream; enables a user to easily post journal field entries to a record
  3. Activity feed: Displays a customer's activity feed in a timeline manner and provides date range filters to filter the feed

Activity stream feed anatomy

  1. Activity stream feed header: Header containing the activity stream title, filter panel, simple sort, and action menu
  2. Title: Title of the activity stream
  3. Filter panel: Actionable icon; selecting this icon will open a panel menu with available filter categories
  4. Search bar: Actionable icon; that opens search bar to search activity stream
  5. Simple sort button: Stateful button; can sort the activity stream event posts by newest to oldest or oldest to newest
  6. Action menu: Actionable icon; contains additional actions beyond filtering and sorting
  7. Event posts: Activity from records configured to display in the activity stream feed

Post anatomy

  1. Event post header: Header that contains the event post icon and title
  2. Event post icon: Icon associated with the record; often the avatar of the user assigned to the record
  3. Event post title: Contains information from a record’s “Assigned to” field and other metadata
  4. Actionable icon: If available, initiates an action on the event post
  5. Actionable icon: If available, initiates an action on the event post
  6. Actionable icon: If available, initiates an action on the event post
  7. More actions menu: Actionable icon; contains additional actions for the event post
  8. Event post container: Container; holds the event post content below the header

Filters anatomy

  1. Filter panel: Actionable icon; selecting this icon will open a panel menu with available filter categories
  2. Filter panel pill: A filter selection displayed in a pill
  3. Post type filter: A type of filter panel pill; filters the activity feed based on the type of activity
  4. Flagged filter (hidden in image): A type of filter panel pill available only when at least one activity has been flagged; filters based on flagged activity
  5. “Select all” / “clear all buttons”: 2 separate bare buttons that enable the user to select all post types and clear all selections
  6. Field changes filter: A type of filter panel pill; filters the activity feed based on the type of field change in the record
  7. Tags filter: A type of filter panel pill available only when at least one activity has been Tagged; filters based on tagged activity
  8. Filter sets menu: Actionable icon

Subcomponents

See usage guidelines for activity stream compose

Usage

The activity stream gives users context about the record it is associated with. It shows some activity that has occurred on the record. The activity can be record field changes, journal entries, attachments, and attached knowledge articles.

Configurations

Learn how to customize activity stream by configuring the available properties.

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.

Table

Configure this property to specify the table name of the record you are displaying the activity stream for.

Sys ID

Configure this property to specify the Sys ID of the record you are using activity stream for.

Title

You can configure this property to assign a title to the activity events section.

To configure the activity stream component in UI Builder, view the activity stream UIB setup documentation.

Post button

By default, the post button is unavailable to users when the work notes field is marked as mandatory. However, you can configure this property to show the post button even when the work notes field is mandatory for users.

Design recommendations

Learn how to apply activity stream in your design. 

Do

Do place the Activity Stream in context of a record.

Don’t

Don’t place the Activity Stream outside the context of a record.

Alignment and positioning

Activity stream doesn’t have any guidance on alignment or positioning. 

UI text guidelines

  • Use sentence case for all titles, labels, and column headers
  • Keep all text labels informative and short to increase readability and scanning 
  • Keep content concise and purposeful to help a user understand options and actions
  • 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 
  • If a component performs or supports an action, label it with a verb (like “Submit”)

Behavior

The activity stream comes with filters, sorting and the ability to expand or collapse all posts.

Responsive behaviors

Activity stream automatically resizes to fit the container.

Interactions

Learn how activity stream responds when a user interacts with it. 

Filtering content

Selecting the filter icon will slide open a panel menu revealing the available filter categories. The filter icon will remain in the active state with the panel open until user selects it again, closing the panel.

The “Post types” filter allows the user to filter out any post types they do not want to see. The pill button UI element opens a multiselect popover menu and by default all available post types are selected, thereby showing a full activity stream. Turning off the checkmarks removes those posts from the stream.

Users can use the Select All/ Clear All buttons to more quickly narrow in on only the field changes they want to view. When the user closes the popover, the pill remains in the active state showing that there are filters applied.

The “Field changes” filter retains the previous releases functionality with an updated UI. All fields are defaulted to active/applied.

Unchecking an item removes that field from the activity stream feed view within the available posts. Users can use the newly added Select All/ Clear all buttons to more quickly narrow in on only the field changes they want to view.

If a user has flagged a post, they can filter the stream by those posts using this toggle. The flagged toggle is updated to reflect its active state.

The “Filter sets” menu shows the first pre-defined group of filters. It can be configured to be present or not present on the UI.

Sorting content

By default, the stream of posts appears in the order of newest to oldest. The sort toggle button is not active by default, and when toggled on, the stream of posts flips to display in the order of oldest to newest.

Expand/collapse menu

This menu toggles between Expand all posts and Collapse all posts. The activity stream defaults to collapsing the content within each event post. Clicking the Expand all button opens all the event posts in the stream.

Truncation

When text in activity stream exceeds the width of the container or content area, the text truncates with an ellipsis, and a tooltip shows the full content on hover.

When text in the activity stream event posts exceeds the default width and height of the container or content area, the text area truncates with a “Show More” button. Upon selection of the “Show More” button, the remaining content is expanded and the “Show less” button replaces the “Show More” button. 

Flagging & Tagging

Users will hover over OR using assistive technologies, will focus on the post to reveal any available Action buttons. By default, Flagging will be shown. Tagging feature can turned on and can be configured with a set of tags that will be available for tagging posts.

If the post has any other available actions such as “Reply to Email”, those will also be shown. When the user has flagged a post, the active Flag is always displayed on the Post, not just on hover state. This will also be same for the Tags.

Usability

Activity stream complies with all internationalization and accessibility requirements. 

Internationalization

When the display translates to a right-to-left (RTL) language, the ordering stays the same but the content moves from left to right.

Accessibility

Learn how to access the actionable elements activity stream through keyboard interactions.

Keyboard interactions

You can access the actionable elements of the activity stream component with these keyboard keys:

  • Tab: Moves through activity stream in the prescribed tab order
  • Shift + Tab: Moves through activity stream in reverse tab order
  • Space/Enter: Opens a menu or activates a button

When the focus is in a menu:

  • Up and down arrow keys: Moves within the menu
  • Tab: Closes the menu
Tab stops