Dokumentation

Purpose

The sortation view control enables users to change the order in which some data is presented. This control applies to all sorts of _structured_ data, like tables and lists.

Composition

Sortation uses a Dropdown to display a collection of shy-buttons.

Effect

A click on an option will change the ordering of the associated data-list by calling a page with a parameter according to the selected option or triggering a signal. The label displayed in the dropdown will be set to the selected sorting.

Usage

1. A Sortation MUST NOT be used standalone.
2. Sortations MUST BE visually close to the list or table their operation will have effect upon.
3. There SHOULD NOT be more than one Sortation per view.

Accessibility

1. Sortation MUST be operable via keyboard only.

• Best
• Most Recent
• Oldest

---

-sortation_std_label-

• Best
• Most Recent
• Oldest

---

show Modal on select

• Best
• Most Recent
• Oldest

×

Mountains

Image source: https://stocksnap.io, Creative Commons CC0 license

 
function base()
{
    //Loading factories
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $options = array(
        'internal_rating' => 'Best',
        'date_desc' => 'Most Recent',
        'date_asc' => 'Oldest',
    );
 
    $s = $f->viewControl()->sortation($options)
        ->withTargetURL($DIC->http()->request()->getRequestTarget(), 'sortation');
 
    $s2 = $s->withLabel($DIC->language()->txt('sortation_std_label'));
 
 
    $image = $f->image()->responsive("src/UI/examples/Image/mountains.jpg", "Image source: https://stocksnap.io, Creative Commons CC0 license");
    $page = $f->modal()->lightboxImagePage($image, 'Mountains');
    $modal = $f->modal()->lightbox($page);
 
    $s3 = $s->withResetSignals()
        ->withLabel('show Modal on select')
        ->withOnSort($modal->getShowSignal());
 
 
    return implode('<hr>', array(
        $renderer->render($s),
        $renderer->render($s2),
        $renderer->render([$s3, $modal]),
    ));
}
 

Parents

1. UIComponent
2. View Control