Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

System Info

Description

Purpose: The System Info is a section of the standard page that informs the user about the ILIAS system. This information can be of different relevance (denotation), from neutral to breaking (see rules).
Composition: A System Info is a horizontally arranged sequence of a headline, an information text and, if applicable, a Close Button. It can appear in three different colors, depending on its denotation: - neutral: indicates a System Info that has only a neutral relevance for the users, e.g. that the installation is a test installation. - important: indicates a System Info that should be seen by the users, but does not require immediate action by the user. For example "in 30 days your account will expire". - breaking: indicates a system info that should be seen by the user immediately and usually requires quick action or indicates upcoming events such as "ILIAS will not be available tomorrow due to maintenance" or "Your account expires in 3 days".
Effect: By clicking (if there is one) the Close Button, the user accepts the facts and does not wish to be informed further. The System Info containing the clicked Button should not appear anymore. If the information text is longer than the available space on the page allows, it will be hidden and a More Glyph will be displayed. Clicking the More Glyph displays the whole message, with the System Info automatically adjusting in height to match the content.

Context

The System Info is only used within the Standard Page.

Rivals

Mode Info: use System Info to output system-wide information. The Mode Info only informs about a state the user is in.

Rules

Usage

There MAY be multiple System Infos on the page.
The System Info MUST contain a headline summarizing the information.
The System Info MUST contain an information text with additional information.
The System Info MAY contain a Close Button to dismiss and accept the notification.
If there is a Close Button in a System Info, clicking the Button MUST permanently close this System Info for the user.

Interaction

An interaction with the user is not mandatory, unless the System Info provides such an interaction. In this case the user MUST be able to close the info in its context by clicking on the Close Glyph.

Accessibility

Breaking System Infos MUST have a role="alert".
Important and neutral System Infos MUST have an aria-live="polite".
The headline MUST be referenced by aria-labelledby
The information MUST be referenced by aria-describedby

Example 1: Long text

This Message has a long body Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\MainControls\SystemInfo;
 
use ILIAS\UI\Component\MainControls\ModeInfo;
 
function long_text()
{
    //
    // This example show how the UI-Elements itself looks like. For a full
    // example use the example of the UI-Component Layout\Page\Standard.
    //
 
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $long_text = $f->mainControls()->systemInfo(
        'This Message has a long body',
        <<<TEXT
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
ipsum dolor sit amet.
TEXT
    );
 
    return $renderer->render([$long_text]);
}

Example 2: Multiple

This is the first Message! content of the first message...

This is the second Message! content of the second message...

This is the third Message! content of the third message...

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\MainControls\SystemInfo;
 
use ILIAS\UI\Component\MainControls\SystemInfo;
 
function multiple()
{
    //
    // This example show how the UI-Elements itself looks like. For a full
    // example use the example of the UI-Component Layout\Page\Standard.
    //
 
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $first = $f->mainControls()
        ->systemInfo('This is the first Message!', 'content of the first message...')
        ->withDenotation(SystemInfo::DENOTATION_BREAKING);
    $second = $f->mainControls()
        ->systemInfo('This is the second Message!', 'content of the second message...')
        ->withDenotation(SystemInfo::DENOTATION_IMPORTANT);
    $third = $f->mainControls()
        ->systemInfo('This is the third Message!', 'content of the third message...');
 
    return $renderer->render([$first, $second, $third]);
}

Example 3: Simple

This is an neutral Message! read it, understand it, dismiss it...

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\MainControls\SystemInfo;
 
use ILIAS\Data\URI;
 
function simple()
{
    //
    // This example show how the UI-Elements itself looks like. For a full
    // example use the example of the UI-Component Layout\Page\Standard.
    //
 
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $dismiss_action = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : "http://localhost";
    $systemInfo = $f->mainControls()
        ->systemInfo('This is an neutral Message!', 'read it, understand it, dismiss it...')
        ->withDismissAction(new URI($dismiss_action));
 
    return $renderer->render([$systemInfo]);
}

Relations

Parents

UIComponent
Main Controls