Documentation
Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'
Notification
Description
- Purpose
- Notifications Slates are used by the system to publish information to the user in the form of Notification Items. The aim of the Notification Slates and the Notification Items they contain, is to make notifications visible and quickly accessible. They form a centralized channel which bundles notifications. Note that the Notification Slates and Items do not replace the short-lived message displayed on the screen without page loading (like "You have received 1 Contact Request") currently called "toasts".
- Composition
- Notifications Slates hold Notification Items, displaying information on and possible interactions with the displayed notifications. They display the Notification Items chronological order (with the latest on top). Each Notification Slate bundles Notification Items of one specific type of source (service, e.g. Mail).
- Effect
- By default Notification Slates are engaged, meaning, they display there content to the user.
- Context
- Notifications in the Meta Bar
Rivals
- Combined Slates
- Combined Slates can hold Bulky Links and other Slates, Notification Slates may only contain Notification Items. Further Combined Slates always require an icon and the contained slates are by default dis-engaged.
- Item Group
- Item Groups bundle any kind of Items, may hold actions on those Items and do not feature an disengaged State.
Rules
- Usage
- Every service that can send a notification SHOULD add an entry in the Notification Center.
- The displayed Notifications also SHOULD have a permanent place (mainly in Main Bar), somewhere where old messages shown as Notification Item can still be viewed, even if they are removed from the Notification Slate. Exceptions to this are the chat and the Background Tasks.
- Composition
- Each Notification Slate MUST bundle Notification Items of one specific type of source (service, e.g. Mail).
- Notification Slates MUST NOT be empty.
- Ordering
- Notification Items displayed inside the Notification Slate MUST be displayed in chronological order where the newest item MUST be the topmost.
Example 1: Standard
Mail
Generic
<?php declare(strict_types=1); namespace ILIAS\UI\examples\MainControls\Slate\Notification; /** * This is an example, of how the Notification Slate is generated by assigning * Notification Items to it. However, note that this task is done by the global * screen. Currently, devs. will not come in contact with the Component outside * the Global Screen. * * Note, there is an extended example featuring async calls in the Main Controls Meta Bar * Section */ function standard() { global $DIC; $f = $DIC->ui()->factory(); $renderer = $DIC->ui()->renderer(); $refinery = $DIC->refinery(); $request_wrapper = $DIC->http()->wrapper()->query(); //Creating a mail Notification Item, note that Additional Content is only to be used //if content needs to be provided, for which no UI Component yet exists. $mail_icon = $f->symbol()->icon()->standard("mail", "mail"); $mail_title = $f->link()->standard("Inbox", "link_to_inbox"); $mail_notification_item = $f->item()->notification($mail_title, $mail_icon) ->withDescription("You have 23 unread mails in your inbox") ->withProperties(["Time" => "3 days ago"]) ->withAdditionalContent($f->legacy("<b>Additional Content</b>")); //Creating a badge Notification Item with a specific close action here. $close_url = $_SERVER['REQUEST_URI'] . '&badge_closed=true'; if ($request_wrapper->has('badge_closed') && $request_wrapper->retrieve('badge_closed', $refinery->kindlyTo()->bool())) { //Whatever needs to be done, if the badge notification is closed exit; } else { $badge_icon = $f->symbol()->icon()->standard("bdga", "mail"); $badge_title = $f->link()->standard("Badges", "link_to_achievement_badges"); $badge_notification_item1 = $f->item()->notification($badge_title, $badge_icon) ->withDescription("You received 1 Badge.") ->withProperties(["Time" => "2 days ago"]) ->withCloseAction($close_url); $badge_icon = $f->symbol()->icon()->standard("bdga", "mail"); $badge_title = $f->link()->standard("Badges 2", "link_to_achievement_badges"); $close_url = $_SERVER['REQUEST_URI'] . '&badge_closed=true'; $badge_notification_item2 = $f->item()->notification($badge_title, $badge_icon) ->withDescription("You received 1 Badge.") ->withProperties(["Time" => "2 days ago"]) ->withCloseAction($close_url); } //Some generic notification Items $generic_icon1 = $f->symbol()->icon()->standard("cal", "generic"); $generic_title1 = $f->link()->standard("Generic 1", "link_to_generic_repo"); $generic_item1 = $f->item()->notification($generic_title1, $generic_icon1) ->withDescription("Some description.") ->withProperties(["Property 1" => "Content 1", "Property 2" => "Content 2"]) ->withActions( $f->dropdown()->standard([ $f->button()->shy("Possible Action of this Item", "https://www.ilias.de"), $f->button()->shy("Other Possible Action of this Item", "https://www.github.com") ]) ); $generic_item1_with_aggregates = $generic_item1->withAggregateNotifications([$mail_notification_item]); $generic_title2 = $f->link()->standard("Generic 2", "just_opens_the_list_of_aggregates"); $generic_item2 = $f->item()->notification($generic_title2, $generic_icon1) ->withDescription("Some description describing the aggregates attached.") ->withProperties(["Property 1" => "Content 1", "Property 2" => "Content 2"]) ->withAggregateNotifications([$generic_item1, $generic_item1]); //Now, one could fill the Notification Slates for those 3 Services (normally done by global screen) $mail_slate = $f->mainControls()->slate()->notification("Mail", [$mail_notification_item]); $badge_slate = $f->mainControls()->slate()->notification("Badge", [$badge_notification_item1, $badge_notification_item2]); $generic_slate = $f->mainControls()->slate()->notification("Generic", [ $generic_item1_with_aggregates, $generic_item2 ]); //Add them to the center which is added to the top bar. $notification_center = $f->mainControls()->slate()->combined( "Notification Center", $f->symbol()->icon()->standard("notification", "notification") ) ->withEngaged(true) ->withAdditionalEntry($mail_slate) ->withAdditionalEntry($badge_slate) ->withAdditionalEntry($generic_slate); return $renderer->render($notification_center); }
Relations
- Parents
- UIComponent
- Main Controls
- Slate