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
		heading="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 image="../../../assets/images/avatars/woman_avatar_1.png" size="XS" slot="avatar"></ui5-avatar>
		<span slot="footnotes">Monique Legrand</span>
		<span slot="footnotes">2 Days</span>
	</ui5-li-notification>

	<ui5-li-notification
		show-close
		heading="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 image="../../../assets/images/avatars/man_avatar_1.png" size="XS" slot="avatar"></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"
		heading="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 image="../../../assets/images/avatars/woman_avatar_1.png" size="XS" slot="avatar"></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
	notification-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
			heading="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 image="./img/man_avatar_1.png" size="XS" slot="avatar"></ui5-avatar>
			<span slot="footnotes">John Doe</span>
			<span slot="footnotes">2 Days</span>

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

<script>
	shellbar.addEventListener("ui5-notifications-click", function(event) {
		notificationsPopover.openBy(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, heading, descriptive content and footnotes to fully describe a notification.
The user can:
  • display a Close button
  • can control whether the heading 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-overflow-action component

Usage

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

ES6 Module Import

import @ui5/webcomponents/dist/NotificationListItem.js";
import @ui5/webcomponents/dist/NotificationOverflowAction.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
read
boolean
false
Defines if the notification is new or has been already read.

Note: if set to false the heading has bold font, if set to true - it has a normal font.
wrap
boolean
false
Defines if the heading and description should wrap, they truncate by default.

Note: by default the heading and decription, and a ShowMore/Less button would be displayed.
busy
boolean
false
Defines if a busy indicator would be displayed over the item.
since v1.0.0-rc.8
heading
string
""
Defines the heading of the item.
priority
Priority
"None"
Defines the priority of the item.
showClose
show-close
boolean
false
Defines if the close button would be displayed.

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.
default
Node [0..n]
Defines the content of the ui5-li-notification, usually a description of the notification.

Note: –źlthough 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, dipalyed in the footer of the of the ui5-li-notification.
actions
HTMLElement
Defines the actions, displayed in the top-right area.

Note: use the ui5-notification-overflow-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.

NotificationOverflowAction

The ui5-notification-overflow-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: Available options are "Default", "Emphasized", "Positive", "Negative", and "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 buil-in icons. To find all the available icons, see the Icon Explorer.
text
string
""
Defines the text of the ui5-notification-overflow-action.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel