# Создание Активного списка

Plesk SDK API позволяет отображать на страницах компонент Активный список. Для этого создайте обработчик режима Активный список, который предоставляет следующие методы:

- setData() – задает данные списка.

- setLayout() – задает расположение элементов.

  - Укажите в представлении строки:

    - `pm_View_Helper_ActiveList::LAYOUT_AUTO` (по умолчанию) или `pm_View_Helper_ActiveList::LAYOUT_RESPONSIVECOLUMN`.

  - Укажите в представлении объекта:

    - `type` – тип расположения.

    - `stretched` – установить одинаковую высоту элементов списка. Доступно для `LAYOUT_RESPONSIVECOLUMN`. Необязательно, значение по умолчанию = «true».

    - `columns` – конфигурация, в которой через пробелы указано, сколько колонок содержится в списке для определенного размера окна просмотра в следующем формате (sm|md|lg|xl|xxl|xxxl)-(1-6), например: „lg-2“, „md-1 xl-2“. Доступно для `LAYOUT_RESPONSIVECOLUMN`. Необязательно, значение по умолчанию = „xl-2 xxl-3“.

- setLocale() – задает список локализованных сообщений. Доступные ключи локализации:

  - `noObject` – сообщение, показываемое, когда в списке нет данных.

## Пример: Сбор данных

`src/plib/controllers/ContainersController.php`

    <?php
    class IndexController extends pm_Controller_Action
    {
        ...
        public function listAction()
        {
            $data = [
                [
                    'id' => 'container-1',
                    'icon' =>  pm_Context::getBaseUrl() . 'images/container1.png',
                    'title' =>  pm_Locale::lmsg('service1Title'),
                    'labels' => [[
                        'value' => pm_Locale::lmsg('status1Title'),
                        'type' => 'success',
                    ]],
                    'type' => 'danger',
                    'summary' => [
                        [
                            'name' => pm_Locale::lmsg('param1Title'),
                            'value' => 'Value 1',
                        ],
                        [
                            'name' => pm_Locale::lmsg('param2Title'),
                            'value' => 'Value 2',
                        ],
                    ],
                    'toolbar' => [
                        [
                            'title' => pm_Locale::lmsg('action1Title'),
                            'iconClass' => 'icon-start',
                            'link' => pm_Context::getActionUrl('index', 'action1') . '/id/container-1',
                        ],
                    ],
                    'actions' => [
                        [
                            'title' => pm_Locale::lmsg('action2Title'),
                            'icon' => pm_Context::getBaseUrl() . 'images/action2.png',
                            'link' => pm_Context::getActionUrl('index', 'action2') . '/id/container-1',
                        ],
                        [
                            'title' => pm_Locale::lmsg('action3Title'),
                            'icon' => pm_Context::getBaseUrl() . 'images/action3.png',
                            'link' => pm_Context::getActionUrl('index', 'action3') . '/id/container-1',
                        ],
                    ],
                ],
                [
                    'id' => 'container-2',
                    'icon' =>  pm_Context::getBaseUrl() . 'images/container2.png',
                    'title' =>  pm_Locale::lmsg('service1Title'),
                    'labels' => [[
                        'value' => pm_Locale::lmsg('status2Title'),
                        'type' => 'inactive',
                    ]],
                    'summary' => '<h2>Item summary</h2><p>Custom HTML for summary element</p>',
                    'toolbar' => [
                        [
                            'title' => pm_Locale::lmsg('action4Title'),
                            'iconClass' => 'icon-start',
                            'link' => pm_Context::getActionUrl('index', 'action4') . '/id/container-2',
                        ],
                    ],
                ],
                ...
            ];

            $locale = [
                'noObjects' => pm_Locale::lmsg('noObjects'),
            ];

            $this->view->list = $this->view->activeList()
                ->setLayout(pm_View_Helper_ActiveList::LAYOUT_RESPONSIVECOLUMN)
                ->setData($data)
                ->setLocale($locale);
        }
        ...
    }

Вы можете указать цвет заголовка элемента с помощью атрибута „type“, который может принимать следующие значения:

- `danger` – красный цвет фона заголовка.

- `warning` – оранжевый цвет.

- `success` – зеленый цвет.

- `inactive` – серый цвет.

Прочие значения будут восприниматься как значение „default“ и игнорироваться.

## Пример: Отображение активного списка на странице

`src/plib/views/scripts/containers/list.phtml`

    <h3>Objects list</h3>
    <?php echo $this->list ?>

Активный список, определенный таким образом, будет выглядеть так: