NotificationListGroupItem

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

NotificationListGroupItem

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 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 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 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 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 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
<ui5-list id="myList" header-text="Notifications grouped">
	<ui5-li-notification-group
		show-close
		show-counter
		title-text="Orders"
		priority="High"
	>
		<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"
		>
		...
		</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"
		>
		...
		</ui5-li-notification>

		<ui5-notification-action icon="accept" text="Accept All" slot="actions"></ui5-notification-action>
		<ui5-notification-action icon="message-error" text="Reject All" slot="actions"></ui5-notification-action>
	</ui5-li-notification-group>

	...
</ui5-list>
	

NotificationListGroupItem 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. Office Notifications 3 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 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 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 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 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
<ui5-shellbar
	id="shellbar"
	primary-title="Corporate Portal"
	logo="../../../assets/images/sap-logo-svg.svg"
	show-notifications
	notifications-count="6"
>
</ui5-shellbar>

<ui5-popover
	id="notificationsPopover"
	style="max-width: 400px"
	placement-type="Bottom"
	horizontal-align="Right"
>
	<ui5-list header-text="Notifications">
		<ui5-li-notification-group
			show-close
			show-counter
			title-text="Orders"
			priority="High"
		>
			<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 slot="avatar" size="XS">
					<img src="./img/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-li-notification-group>
		...
	</ui5-list>
</ui5-popover>

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

Overview

The ui5-li-notification-group is a special type of list item, that unlike others can group items within self, usually ui5-li-notification items.
The component consists of:
  • Toggle button to expand and collapse the group
  • Priority icon to display the priority of the group
  • TitleText to entitle the group
  • Custom actions - with the use of ui5-notification-action
  • Items of the group

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-group exposes the following CSS Shadow Parts:
  • title-text - Used to style the titleText of the notification list group item

ES6 Module Import

import "@ui5/webcomponents/dist/NotificationListGroupItem.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
collapsed
boolean
false
Defines if the group is collapsed or expanded.
showCounter
show-counter
boolean
false
Defines if the items counter would be displayed.
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
default
HTMLElement [0..n]
Defines the items of the ui5-li-notification-group, usually ui5-li-notification items.
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
toggle
Fired when the ui5-li-notification-group is expanded/collapsed by user interaction.
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