Documentation

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

Section

Description

Purpose: Section View Controls enable the switching between different sections of some data. Examples are subsequent days/weeks/months in a calendar or entries in a blog.
Composition: Section View Controls are composed of three Buttons. The Button on the left caries a Back Glyph, the Button in the middle is either a Default- or Split Button labeling the data displayed below and the Button on the right carries a next Glyph.
Effect: Clicking on the Buttons left or right changes the selection of the displayed data by a fixed interval. Clicking the Button in the middle opens the sections hinted by the label of the button (e.g. "Today").

Example 1: Base

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\ViewControl\Section;
 
function base()
{
    //Loading factories
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $refinery = $DIC->refinery();
    $request_wrapper = $DIC->http()->wrapper()->query();
 
    //Some Target magic to get a behaviour closer to some real use case
    $target = $DIC->http()->request()->getRequestTarget();
    $param = "Section";
    $active = 0;
    if ($request_wrapper->has($param) && $request_wrapper->retrieve($param, $refinery->kindlyTo()->int())) {
        $active = $request_wrapper->retrieve($param, $refinery->kindlyTo()->int());
    }
 
    //Here the real magic to draw the controls
    $back = $f->button()->standard("Back", "$target&$param=" . ($active - 1));
    $next = $f->button()->standard("Next" . " " . ($active - 1), "$target&$param=" . ($active + 1));
    $middle = $f->button()->standard("Go to Engaged Section (Current Section: $active)", "$target&$param=0");
    //Note that the if the middle button needs to be engaged by the surrounding component, as so, if need to be drawn
    //as engaged. This can e.g. be the case for rendering a button labeled "Today" or similar.
    if ($active == 0) {
        $middle = $middle->withLabel("Engaged Section")->withEngagedState(true);
    }
    $view_control_section = $f->viewControl()->section($back, $middle, $next);
    $html = $renderer->render($view_control_section);
    return $html;
}

Relations

Parents

UIComponent
View Control