Notification Center - List Item

A notification list item represents a single notification (action item) that requires user attention.

Usage

A notification list item represents a single notification (action item) in a list of notifications that require user attention.

A notification list item has several standard data elements:

  • title
  • description
  • a timestamp representing its creation date
  • associated relevance rank.
  • an associated action which is triggered when the user taps on the item.

The notification list item is capable of displaying a maximum of two lines of text in the description field. Descriptions that exceed two lines will be truncated with a trailing ellipsis.

Developers who use notification list item should provide functionality that allows app users to delete items and mark them as read, both individually and en masse.

Items fall off the list on a schedule that is dependent on the type of notification. The logic for each type of notification is provided to the Notification Center/Notification List Item via the product implementing a data source for that type of notification.

The order of an item in the list is determined by its timestamp. In the future, ordering may take relevance rank into account.

iOS Specific Behavior

The Notification Center Badge component behaves the same on all platforms currently.

Availability

Available as part of the notificationcenter-ios module maintained by Customer Technology Front-end Platform Engineering

Technical Details

Class and Module

NotificationListItemCell — AmericanNotificationCenter

Example Code

In iOS, NotificationListItemCell is a UITableViewCell subclass.

var orderedNotifications = NotificationAggregator.sharedAggregator.orderedNotifications

public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    guard let cell = tableView.dequeueReusableCell(withIdentifier: "NotificationListItemCell", for: indexPath) as? NotificationListItemCell
        return UITableViewCell()
    }

    let notification = orderedNotifications[indexPath.row]
    cell.configureWithNotification(notification)
    return cell
}
<p>Unread State</p>
<img src="../../app-component-images/ios/notification-list-item-unread.png" alt="iOS Notification List Item in Unread State" />
<p>Read State</p>
<img src="../../app-component-images/ios/notification-list-item-read.png" alt="iOS Notification List Item in Read State" />
  • Handle: @notificationlistitem-ios
  • Preview:
  • Filesystem Path: components/app/ios/notificationcenter-ios/notificationlistitem-ios/notificationlistitem-ios.hbs