This is documentation for Plesk Onyx.
Go to documentation for the latest version, Plesk Obsidian.
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: