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'

Field

Description

Purpose
Inputs fields are different from other UI components. They bundle two things: First, they are used for displaying, as similar to other components. Second, they are used to define the server side processing of data that is received from the client. Thus, an input field defines which visual input elements a user will see, which constraints are put on the data entered in these fields and which data developers on the server side retrieve from these inputs. Fields need to be enclosed by a container which defines the means of submitting the data collected by the fields and the way those inputs are arranged to be displayed for some client.
Composition
Fields are either individuals or groups of inputs. Both, individual fields and groups, share the same basic input interface. Input-Fields may have a label and byline.

Rules

Composition
  1. A byline (explanatory text) MAY be added to input fields.
Wording
  1. If a label is set, it MUST be composed of one single term or a very short phrase. The identifier is an eye catcher for users skimming over a potentially large set of fields.
  2. If a label is set, it MUST avoid lingo. Intelligibility by occasional users is prioritized over technical accuracy. The accurate technical expression is to be mentioned in the byline.
  3. If a label is set, it MUST make a positive statement. If the purpose of the setting is inherently negative, use Verbs as “Limit..”, “Lock..”.
  4. If bylines are provided they MUST be informative, not merely repeating the identifier’s or input element’s content. If no informative description can be devised, no description is needed.
  5. A byline MUST clearly state what effect the fields produces and explain, why this might be important and what it can be used for.
  6. Bulk bylines underneath a stack of option explaining all of the options in one paragraph MUST NOT be used. Use individual bylines instead.
  7. A byline SHOULD NOT address the user directly. Addressing users directly is reserved for cases of high risk of severe mis-configuration.
  8. A byline MUST be grammatically complete sentence with a period (.) at the end.
  9. Bylines SHOULD be short with no more than 25 words.
  10. Bylines SHOULD NOT use any formatting in descriptions (bold, italic or similar).
  11. If bylines refer to other tabs or options or tables by name, that reference should be made in quotation marks: ‘Info’-tab, button ‘Show Test Results’, ‘Table of Detailed Test Results’. Use proper quotation marks, not apostrophes. Use single quotation marks for english language and double quotation marks for german language.
  12. By-lines MUST NOT feature parentheses since they greatly diminish readability.
  13. By-lines SHOULD NOT start with terms such as: If this option is set … If this setting is active … Choose this setting if … This setting … Rather state what happens directly: Participants get / make / can … Point in time after which…. ILIAS will monitor… Sub-items xy are automatically whatever ... Xy will be displayed at place.
Style
  1. Disabled input elements MUST be indicated by setting the “disabled” attribute.
  2. If focused, the input elements MUST change their input-border-color to the input-focus-border-color.
Accessibility
  1. All fields visible in a view MUST be accessible by keyboard by using the ‘Tab’-Key.
  2. If the Field is carrying the focus (e.g. by tabbing) and is visible it MUST always be visibly marked (e.g. by some sort of highlighting).

Example 1: With dedicated name and path

Street and No.
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field;
 
/**
 * Example showing Inputs with dedicated names that are contained within a named group.
 * The name of the group is added to the 'path' and included in the name of the sub-inputs.
 */
function with_dedicated_name_and_path()
{
    global $DIC;
    $ui = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $street = $ui->input()->field()
        ->text("Street", "Street and No.")
        ->withDedicatedName('street');
 
    $city = $ui->input()->field()
       ->text("City")
       ->withDedicatedName('city');
 
    // This creates inputs named 'address/street' and 'address/city'
    $address = $ui->input()->field()
         ->group([$street, $city], "Address")
         ->withDedicatedName('address');
 
    $form = $ui->input()->container()->form()->standard("", [$address]);
    return $renderer->render($form);
}
 

Example 2: With dedicated name

A username
A secret password
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field;
 
/**
 * Example showing an Input with an optional dedicated name which is used as NAME attribute on the rendered input.
 * This option is available for all Input/Fields. Inputs without a dedicated name will get an auto-generated name.
 * Please see the interface of withDedicatedName() for further details on naming.
 */
function with_dedicated_name()
{
    global $DIC;
    $ui = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $text_input = $ui->input()->field()
        ->text("Username", "A username")
        ->withDedicatedName('username');
 
    // Inputs with and without dedicated names can be mixed
    $password_input = $ui->input()->field()
         ->password("Password", "A secret password");
 
    $duration_input = $ui->input()->field()
         ->duration("Valid from/to")
         ->withDedicatedName('valid');
 
    $form = $ui->input()->container()->form()->standard("", [$text_input, $password_input, $duration_input]);
    return $renderer->render($form);
}
 

Example 3: With required custom constraint

No result yet.

* Required
Needs to start with an H
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field;
 
/**
 * Example showing the use of the withRequired() method
 * with a custom constraint that replaces the default requirement constraint.
 * A custom constraint SHOULD be explained in the byline of the input.
 */
function with_required_custom_constraint()
{
    //Step 0: Declare dependencies
    global $DIC;
    $ui = $DIC->ui()->factory();
    $refinery = $DIC->refinery();
    $renderer = $DIC->ui()->renderer();
    $request = $DIC->http()->request();
 
    // Step 1: define the text field, make it a required field
    // and add a custom constraint
    $text_input = $ui->input()->field()->text("Enter a name", "Needs to start with an H");
    $custom_constraint = $refinery->custom()->constraint(function ($value) {
        return (substr($value, 0, 1) === 'H') ? true : false;
    }, "Name does not start with an H");
    $text_input = $text_input->withRequired(true, $custom_constraint);
 
    //Step 2: define form and form actions
    $form = $ui->input()->container()->form()->standard('#', [ $text_input]);
 
    //Step 3: implement some form data processing.
    if ($request->getMethod() == "POST") {
        $form = $form->withRequest($request);
        $result = $form->getData();
    } else {
        $result = "No result yet.";
    }
 
    //Step 4: Render the checkbox with the enclosing form.
    return
        "<pre>" . print_r($result, true) . "</pre><br/>" .
        $renderer->render($form);
}
 

Example 4: With required

No result yet.

* Required
And make it a good one!
<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Input\Field;
 
/**
 * Example showing the use of the withRequired() method
 */
function with_required()
{
    //Step 0: Declare dependencies
    global $DIC;
    $ui = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $request = $DIC->http()->request();
 
    // Step 1: define the text field and make it a required field,
    // i.e. checking for its default requirement constraint
    // (for text fields: value must have a minimum length of 1)
    $text_input = $ui->input()->field()->text("Enter a name", "And make it a good one!");
    $text_input = $text_input->withRequired(true);
 
    //Step 2: define form and form actions
    $form = $ui->input()->container()->form()->standard('#', [ $text_input]);
 
    //Step 3: implement some form data processing.
    if ($request->getMethod() == "POST") {
        $form = $form->withRequest($request);
        $result = $form->getData();
    } else {
        $result = "No result yet.";
    }
 
    //Step 4: Render the checkbox with the enclosing form.
    return
        "<pre>" . print_r($result, true) . "</pre><br/>" .
        $renderer->render($form);
}
 

Relations

Parents
  1. UIComponent
  2. Input
Descendants
  • Text
  • Numeric
  • Group
  • Optional Group
  • Switchable Group
  • Section
  • Checkbox
  • Tag
  • Password
  • Select
  • Textarea
  • Radio
  • Multi Select
  • Date Time
  • Duration
  • File
  • Url
  • Link
  • Hidden
  • Color Picker
  • Markdown