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
		heading="Orders"
		priority="High"
	>
		<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"
		>
		...
		</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"
		>
		...
		</ui5-li-notification>

		<ui5-notification-overflow-action icon="accept" text="Accept All" slot="actions"></ui5-notification-overflow-action>
		<ui5-notification-overflow-action icon="message-error" text="Reject All" slot="actions"></ui5-notification-overflow-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
	notification-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
			heading="Orders"
			priority="High"
		>
			<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-li-notification-group>
		...
	</ui5-list>
</ui5-popover>

<script>
	shellbar.addEventListener("ui5-notifications-click", function(event) {
		notificationsPopover.openBy(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
  • Heading to entitle the group
  • Custom actions - with the use of ui5-notification-overflow-action
  • Items of the group

Usage

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

ES6 Module Import

import @ui5/webcomponents/dist/NotificationListGroupItem.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
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
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
default
HTMLElement [0..n]
Defines the items of the ui5-li-notification-group, usually ui5-li-notification items.
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
toggle
Fired when the ui5-li-notification-group is expanded/collapsed by user interaction.
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