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) orpm_View_Helper_ActiveList::LAYOUT_RESPONSIVECOLUMN
.
-
- Specify as an Object:
-
type
- layout type. -
stretched
- making elements in a row have equal height. Available forLAYOUT_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 forLAYOUT_RESPONSIVECOLUMN
. Optional, default = ‘xl-2 xxl-3’.
-
- Specify as a String:
-
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: