Implement Active List

Plesk SDK API allows you to display Active List components on your pages. To do that, implement the ActiveList view helper featuring the following methods:

  • setData() - sets list data.
  • setLayout() - sets layout for items.
    • Specify as a String:
      • pm_View_Helper_ActiveList::LAYOUT_AUTO (by default) or pm_View_Helper_ActiveList::LAYOUT_RESPONSIVECOLUMN.
    • Specify as an Object:
      • type - layout type.
      • stretched - making elements in a row have equal height. Available for LAYOUT_RESPONSIVECOLUMN. Optional, default = "true".
      • columns - whitespace separated configuration of how many columns in a list for a specific viewport size in the following format (sm|md|lg|xl|xxl|xxxl)-(1-6), for example: 'lg-2', 'md-1 xl-2'. Available for LAYOUT_RESPONSIVECOLUMN. Optional, default = 'xl-2 xxl-3'.
  • setLocale() - sets the list of localization messages. Available localizations keys:
    • noObject - message shown when a list has no data.
Example: Collecting data

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);
    }
    ...
}

You can specify the item header's color with the 'type' attribute that allow the following values:

  • danger - red color of header background.
  • warning - orange color.
  • success - green color.
  • inactive - gray color.

Other values will be parsed as 'default' and ignored.

Example: Displaying active list on a page

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

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

The active list defined above will look as follows:

activelist-1