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 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: