Documentation

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

Key Value

Description

Purpose: The Key Value node is an entry containing a value paired to its label, to better distinguish it from other nodes or clarify its function.
Composition: It consists of a string-label complemented by additional string as a key-value pair, and an optional Icon.

Rivals

Bylined Node: The byline of the Bylined node is non-essential, and can be dropped without affecting the users' ability to navigate the tree. In contrast, the value of Key Value nodes is used to distinguish between nodes or to illustrate a node's function where the label alone is insufficient, and thus needs to be included to ensure the tree can be used effectively.

Rules

Usage

A Key Value node SHOULD be used when additional information besides the label is needed to adequately identify a tree node and its function.

Example 1: Key value

label value
- label Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquy
label value
- label value

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Tree\Node\KeyValue;
 
function key_value()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $icon = $f->symbol()->icon()->standard("crs", 'Example');
    $long_value = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
        sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquy';
 
    $node1 = $f->tree()->node()->keyValue('label', 'value');
    $node2 = $f->tree()->node()->keyValue('label', $long_value)
                               ->withLink(new \ILIAS\Data\URI('https://docu.ilias.de'));
    $node3 = $f->tree()->node()->keyValue('label', 'value', $icon);
    $node4 = $f->tree()->node()->keyValue('label', 'value', $icon)
                               ->withLink(new \ILIAS\Data\URI('https://docu.ilias.de'));
    $data = [['node' => $node1, 'children' => [
            ['node' => $node2]]],
         ['node' => $node3, 'children' => [
             ['node' => $node4]],
         ]
    ];
 
    $recursion = new class () implements \ILIAS\UI\Component\Tree\TreeRecursion {
        public function getChildren($record, $environment = null): array
        {
            return $record['children'] ?? [];
        }
 
        public function build(
            \ILIAS\UI\Component\Tree\Node\Factory $factory,
            $record,
            $environment = null
        ): \ILIAS\UI\Component\Tree\Node\Node {
            $node = $record['node'];
            if (isset($record['children'])) {
                $node = $node->withExpanded(true);
            }
            return $node;
        }
    };
 
    $tree = $f->tree()->expandable('Label', $recursion)
                      ->withData($data);
 
    return $renderer->render($tree);
}

Relations

Parents

UIComponent
Tree
Node