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

<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

<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.

Fired when the Close button is pressed.

item

type: HTMLElement
description: the closed item.

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

sap.ui.webc.main.types.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.

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

click

Fired, when the action is pressed.

targetRef

type: HTMLElement
description: DOM ref of the clicked element

Theme:

Morning Horizon (Light)

Evening Horizon (Dark)

Horizon High Contrast Black

Horizon High Contrast White

Quartz Light

Quartz Dark

Quartz High Contrast Black

Quartz High Contrast White

Content Density:

Cozy

Compact

Text Direction:

LTR

RTL

Apply

Cancel