UPDATE-RATE

Die Test-Installation wird aktuell zwischen 8:00 und 18:00 Uhr stündlich zur vollen Stunde aktualisiert.

Alles neu macht der Mai

ILIAS 9 ist da! Alle Infos zu den Highlights der neuen Version gibt es hier!

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
  1. 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
  1. Every service that can send a notification SHOULD add an entry in the Notification Center.
  2. 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
  1. Each Notification Slate MUST bundle Notification Items of one specific type of source (service, e.g. Mail).
  2. Notification Slates MUST NOT be empty.
Ordering
  1. 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
mail

Inbox

You have 23 unread mails in your inbox
Additional Content

Time3 days ago
Badge
mail

Badges

You received 1 Badge.

Time2 days ago
mail

Badges 2

You received 1 Badge.

Time2 days ago
Generic
generic

Generic 1

Some description.

Property 1Content 1
Property 2Content 2
mail

Inbox

You have 23 unread mails in your inbox
Additional Content

Time3 days ago
generic

Generic 2

Some description describing the aggregates attached.

Property 1Content 1
Property 2Content 2
generic

Generic 1

Some description.

Property 1Content 1
Property 2Content 2
generic

Generic 1

Some description.

Property 1Content 1
Property 2Content 2
<?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
  1. UIComponent
  2. Main Controls
  3. Slate