Notification List Group with max number of notifications reached
Notification List Group with max number of notifications reached. The group will render the max amount of notificatons, depending on device type allowed and then show a warning messge.
Z2UI5_CL_SMPC_APP_444
Controls
sap.m
UI5 1.71
The facts
- Repository
- abap2UI5/samples-controls
- Class
Z2UI5_CL_SMPC_APP_444- Source file
z2ui5_cl_smpc_app_444.clas.abap↗- Library
- sap.m
- UI5 entity
sap.m.NotificationListGroup- Demo kit sample
sap.m.sample.MaxNumberOfNotificationsReached- SAP's own sample
- running at sdk.openui5.org ↗
- Minimum UI5
- 1.71 — the floor abap2UI5 holds its samples to
- In the playground
- runs in the browser, with no system and nothing installed
Keywords: notificationlistgroup, notification, list, group, sap.m, maxnumberofnotificationsreached, vbox, flexitemdata, button, notificationlistitem
Controls it builds
- sap.m.Button
- sap.m.FlexItemData
- sap.m.List
- sap.m.NotificationListGroup
- sap.m.NotificationListItem
- sap.m.VBox
- sap.ui.core.mvc.View
Read out of the builder chain by the abap2UI5 linter, not from the category this sample is filed under — which is what makes “which samples build one of these” a question the catalogue can answer at all.
Libraries
Run it here
The sample running, in this page — the app on its own, with no editor over it.
Switch to Playground with this code
Nothing is installed and nothing is sent anywhere: the ABAP is compiled to JavaScript in this browser and runs against abap2UI5 itself.
The ABAP
z2ui5_cl_smpc_app_444.clas.abap — 165 lines
Click a number to link to a line — shift-click for a range.
Read it on GitHub ↗
" @keywords notificationlistgroup notification list group sap.m maxnumberofnotificationsreached vbox flexitemdata button notificationlistitem
" @summary Notification List Group with max number of notifications reached. The group will render the max amount of notificatons, depending on device type allowed and then show a warning messge.
CLASS z2ui5_cl_smpc_app_444 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
TYPES: BEGIN OF ty_s_notification,
id TYPE i,
title TYPE string,
datetime TYPE string,
priority TYPE string,
unread TYPE abap_bool,
END OF ty_s_notification.
TYPES ty_t_notification TYPE STANDARD TABLE OF ty_s_notification WITH EMPTY KEY.
DATA t_notifications TYPE ty_t_notification.
DATA group_visible TYPE abap_bool VALUE abap_true.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
METHODS on_event.
METHODS notifications_load.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_444 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
me->client = client.
IF client->check_on_navigated( ).
view_display( ).
ELSEIF client->check_on_event( ).
on_event( ).
ENDIF.
ENDMETHOD.
METHOD view_display.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).
view->ele( n = `View` ns = `mvc`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns` v = `sap.m`
)->a( n = `class` v = `sapContrastPlus sapContrast`
)->ele( `VBox`
)->a( n = `class` v = `sapUiSmallMargin`
)->ele( `List`
)->ele( `layoutData`
)->tag( `FlexItemData`
)->a( n = `maxWidth` v = `600px`
)->end(
" onItemClose removes the group from the List and toasts its title -
" the group is bound visible instead, the row set stays untouched
)->ele( `NotificationListGroup`
)->a( n = `title` v = `Notification Group`
)->a( n = `showCloseButton` v = `true`
)->a( n = `collapsed` v = `false`
)->a( n = `close` v = client->_event( `GROUP_CLOSE` )
)->a( n = `showEmptyGroup` v = `true`
)->a( n = `enableCollapseButtonWhenEmpty` v = `true`
" NOT `b = <field>`: that parameter writes the LITERAL 'true' or
" 'false' into the attribute at render time (view_builder->a),
" so a field the event handler changes never reaches the
" control - none of these apps re-renders after an event
" (e2e-caught on app 505, 2026-08-22)
)->a( n = `visible` v = client->_bind( group_visible )
)->a( n = `items` v = client->_bind( t_notifications )
)->ele( `buttons`
)->tag( `Button`
)->a( n = `text` v = `Load notifications`
)->a( n = `press` v = client->_event( `LOAD_NOTIFICATIONS` )
)->end(
" the items the controller creates in _createNotification; each one
" destroys itself on close, which here deletes its row
)->tag( `NotificationListItem`
)->a( n = `title` v = `{TITLE}`
)->a( n = `showCloseButton` v = `true`
)->a( n = `datetime` v = `{DATETIME}`
)->a( n = `unread` v = `{UNREAD}`
)->a( n = `priority` v = `{PRIORITY}`
)->a( n = `close` v = client->_event( val = `ITEM_CLOSE` arg = `${ID}` ) ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
METHOD on_event.
CASE client->get_event( ).
WHEN `LOAD_NOTIFICATIONS`.
notifications_load( ).
" 400 rows is the whole point of this sample, and without this only 100
" of them render: sap.ui.model.Model's constructor sets iSizeLimit = 100
" and abap2UI5 leaves it there unless an app asks for more. The original
" never meets that limit because it does not use a model at all -
" onLoadNotificationsPress calls addItem( ) 400 times with real control
" instances, and a size limit applies to a bound aggregation, not to
" added children. Bound here, so the limit has to be raised explicitly
" (the app-252 / app-094 idiom).
client->follow_up_action( val = client->cs_event-set_size_limit
t_arg = VALUE #( ( `400` ) ( client->cs_view-main ) ) ).
WHEN `ITEM_CLOSE`.
DATA(closed_id) = CONV i( client->get_event_arg( ) ).
DELETE t_notifications WHERE id = closed_id.
WHEN `GROUP_CLOSE`.
group_visible = abap_false.
client->message_toast_display( `Item Closed: Notification Group` ).
view_display( ).
ENDCASE.
ENDMETHOD.
METHOD notifications_load.
" onLoadNotificationsPress fills the group once, with the maximum number of
" notifications the device takes (400 on desktop, 100 otherwise). The titles,
" times and priorities are picked at RANDOM there; a backend cannot repeat a
" client-side Math.random, so the port walks the same three lists in order -
" same four titles, three times and four priorities, deterministically
IF t_notifications IS NOT INITIAL.
RETURN.
ENDIF.
DATA(titles) = VALUE string_table( ( `New order request` )
( `Your vacation has been approved` )
( `New transaction in queue` )
( `An new request await your action` ) ).
DATA(times) = VALUE string_table( ( `3 days` ) ( `5 minutes` ) ( `1 hour` ) ).
DATA(priorities) = VALUE string_table( ( `None` ) ( `Low` ) ( `Medium` ) ( `High` ) ).
DO 400 TIMES.
DATA(index) = sy-index.
INSERT VALUE #( id = index
title = |{ titles[ index MOD 4 + 1 ] } { index }|
datetime = times[ index MOD 3 + 1 ]
priority = priorities[ index MOD 4 + 1 ]
unread = abap_true )
INTO TABLE t_notifications.
ENDDO.
ENDMETHOD.
ENDCLASS.
More in sap.m
- Responsive Refresh — An 'Responsive Refresh' can be achieved by the combination of a Search Field's refresh bu…
- Text - Empty Indicator — The Text control has a property allowing an empty text indicator to be displayed.
- Menu with EndContent Items — EndContent (Button and/or Icon) can be added to some of the menu items.
- Breadcrumbs sample without current page — The breadcrumb shows the position of the object page in the application hiearchy, without…
- PDF Viewer - Two PDF Documents — Two PDF viewer frames displayed side by side. The second frame has the property isTrusted…
- Text - Render Whitespace — The Text control has a property allowing browsers to render whitespace and tabs.
- Text - Hyphenation — The Text control has a property allowing hyphenation.
- Link - Subtle — Subtle links should be used to indicate less important links in tables with a large numbe…
- Message Box Details — MessageBox with the option to display detailed information.
- Semantic Page using Draft Indicator — Integration of Draft Indicator inside Semantic Page
- Tab Container - with icons and additional text — This example shows how you can add additional text and an Icon to the tabs in TabContaine…
- Custom Message Strip Design — Demonstrates MessageStrips with different colorSet and colorScheme properties.
On this page