NotificationListItem

v1.0.0-rc.8
@ui5/webcomponents-fiori
<ui5-li-notification>

NotificationListItem

And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc. Monique Legrand 2 Days And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc. Alain Chevalier 2 Days And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc. John Doe 2 Days
<ui5-list header-text="Notifications">
	<ui5-li-notification
		show-close
		title-text="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
		priority="High"
	>
		And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
		<ui5-avatar size="XS" slot="avatar">
			<img src="../../../assets/images/avatars/woman_avatar_1.png" />
		</ui5-avatar>
		<span slot="footnotes">Monique Legrand</span>
		<span slot="footnotes">2 Days</span>
	</ui5-li-notification>

	<ui5-li-notification
		show-close
		title-text="New order (#2526) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
		priority="High"
	>
		And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
		<ui5-avatar size="XS" slot="avatar">
			<img src="../../../assets/images/avatars/man_avatar_1.png" />
		</ui5-avatar>
		<span slot="footnotes">Alain Chevalier</span>
		<span slot="footnotes">2 Days</span>
	</ui5-li-notification>
	...
</ui5-list>

<script>
	myList.addEventListener("item-close", e => {
		e.detail.item.hidden = true;
	});
</script>
	

NotificationListItem - Custom Actions

And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc. Monique Legrand 2 Days And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc. Alain Chevalier 2 Days And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc. John Doe 2 Days
<ui5-list header-text="Notifications">
	<ui5-li-notification
		show-close
		priority="Low"
		title-text="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
	>
		And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
		<ui5-avatar size="XS" slot="avatar">
			<img src="../../../assets/images/avatars/woman_avatar_1.png" />
		</ui5-avatar>
		<span slot="footnotes">Monique Legrand</span>
		<span slot="footnotes">2 Days</span>
	</ui5-li-notification>

	...
</ui5-list>
	

NotificationListItem In ShellBar

And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc. John Doe 2 Days And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc. Office Notifications 3 Days Short description Patricia Clarck 3 Days
. With a very long description - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
John SMith 3 Days
<ui5-shellbar
	id="shellbar"
	primary-title="Corporate Portal"
	logo="../../../assets/images/sap-logo-svg.svg"
	show-notifications
	notifications-count="4"
>
</ui5-shellbar>

<ui5-popover
	id="notificationsPopover"
	style="max-width: 400px"
	placement-type="Bottom"
	horizontal-align="Right"
>
	<ui5-list header-text="Notifications">
		<ui5-li-notification
			show-close
			title-text="New order (#2525) With a very long title - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc."
		>
			And with a very long description and long labels of the action buttons - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent feugiat, turpis vel scelerisque pharetra, tellus odio vehicula dolor, nec elementum lectus turpis at nunc.
			<ui5-avatar size="XS" slot="avatar">
				<img src="../../../assets/images/avatars/man_avatar_1.png" />
			</ui5-avatar>
			<span slot="footnotes">John Doe</span>
			<span slot="footnotes">2 Days</span>

			<ui5-notification-action id="acceptBtnInPopover" icon="accept" text="Accept" slot="actions"></ui5-notification-action>
			<ui5-notification-action id="rejectBtnInPopover" icon="message-error" text="Reject" slot="actions"></ui5-notification-action>
		</ui5-li-notification>
		...
	</ui5-list>
</ui5-popover>

<script>
	shellbar.addEventListener("notifications-click", function(event) {
		notificationsPopover.showAt(event.detail.targetRef);
	});
</script>
	
	

Overview

The ui5-li-notification is a type of list item, meant to display notifications.
The component has a rich set of various properties that allows the user to set avatar, titleText, descriptive content and footnotes to fully describe a notification.
The user can:
  • display a Close button
  • can control whether the titleText and description should wrap or truncate and display a ShowMore button to switch between less and more information
  • add custom actions by using the ui5-notification-action component

Usage

The component can be used in a standard ui5-list.

CSS Shadow Parts

CSS Shadow Parts allow developers to style elements inside the Shadow DOM.
The ui5-li-notification exposes the following CSS Shadow Parts:
  • title-text - Used to style the titleText of the notification list item

ES6 Module Import

import "@ui5/webcomponents/dist/NotificationListItem.js";
import "@ui5/webcomponents/dist/NotificationAction.js"; (optional)

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
wrappingType
wrapping-type
WrappingType
"None"
Defines if the titleText and description should wrap, they truncate by default.

Note: by default the titleText and decription, and a ShowMore/Less button would be displayed.
since v1.0.0-rc.15
busy
boolean
false
Defines if a busy indicator would be displayed over the item.
since v1.0.0-rc.8
busyDelay
busy-delay
Integer
1000
Defines the delay in milliseconds, after which the busy indicator will show up for this component.
priority
Priority
"None"
Defines the priority of the item. Available options are:
  • None
  • Low
  • Medium
  • High
read
boolean
false
Defines if the notification is new or has been already read.

Note: if set to false the titleText has bold font, if set to true - it has a normal font.
showClose
show-close
boolean
false
Defines if the close button would be displayed.
titleText
title-text
string
""
Defines the titleText of the item.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
avatar
HTMLElement
Defines the avatar, displayed in the ui5-li-notification.

Note: Consider using the ui5-avatar to display icons, initials or images.
Note:In order to be complaint with the UX guidlines and for best experience, we recommend using avatars with 2rem X 2rem in size (32px X 32px). In case you are using the ui5-avatar you can set its size property to XS to get the required size - <ui5-avatar size="XS"></ui5-avatar>.
default
Node [0..n]
Defines the content of the ui5-li-notification, usually a description of the notification.

Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
footnotes
HTMLElement [0..n]
Defines the elements, displayed in the footer of the of the component.
actions
HTMLElement [0..n]
Defines the actions, displayed in the top-right area.

Note: use the ui5-notification-action component.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
close
Fired when the Close button is pressed.

NotificationAction

The ui5-notification-action represents an abstract action, used in the ui5-li-notification and the ui5-li-notification-group items.

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
design
ButtonDesign
"Transparent"
Defines the action design.

Note:
  • Default
  • Emphasized
  • Positive
  • Negative
  • Transparent
disabled
boolean
false
Defines if the action is disabled.

Note: a disabled action can't be pressed or focused, and it is not in the tab chain.
icon
string
""
Defines the icon source URI.

Note: SAP-icons font provides numerous built-in icons. To find all the available icons, see the Icon Explorer.
text
string
""
Defines the text of the ui5-notification-action.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel