Skip to content
  • Solutions
    By Role
    • For Developers
    • For Content Managers
    • For Agencies
    • For IT Admins
    • For Web Hosters
    • For Developers
    • For Content Managers
    • For Agencies
    • For IT Admins
    • For Web Hosters
    By Infrastructure
    • Overview
    • AWS
    • Microsoft Azure
    • Alibaba Cloud
    • Google Cloud Platform
    • Vultr
    • Overview
    • AWS
    • Microsoft Azure
    • Alibaba Cloud
    • Google Cloud Platform
    • Vultr
    • Digital Ocean
    • Linode
    • Upcloud
    • Oracle
    • OVH
    • Digital Ocean
    • Linode
    • Upcloud
    • Oracle
    • OVH
  • Product
    • Plesk Features
    • Plesk Editions
    • What’s new
    • Pricing
    • Roadmap
    • Lifecycle Policy
    • Extensions Catalogue
  • Pricing
  • Extensions
    Featured Extensions
    • SocialBee
    • WP Toolkit
    • Sitejet Builder for Plesk
    • SEO Toolkit
    • Joomla! Toolkit
    • Premium Email
    • Email Security
    • SocialBee
    • WP Toolkit
    • Sitejet Builder for Plesk
    • SEO Toolkit
    • Joomla! Toolkit
    • Premium Email
    • Email Security
    Bundles and packs:
    • Business and Collaboration Edition
    • WP pack
    • Hosting pack
    • Power pack
    • Language pack
    • Business and Collaboration Edition
    • WP pack
    • Hosting pack
    • Power pack
    • Language pack

    See all Extensions

  • For Partners
    • Plesk Contributor Program
    • Plesk Partner Program
    • Affiliate program
    • Plesk University
  • Help Center
    • Documentation
    • Professional Services
    • Support
    • Contact Us
    • Wiki
    • Forum
  • Plesk 360 login
  • Free Trial
  • Pricing
  • Solutions
    • By Role
      • For Developers
      • For Content Managers
      • For Agencies
      • For IT Admins
      • For Web Hosters
    • By Infrastructure
      • Overview
      • Plesk on Amazon Web Services (AWS & Lightsail)
      • Microsoft Azure
      • Alibaba Cloud
      • Google Cloud Platform
      • Vultr
      • DigitalOcean
      • Linode
      • UpCloud
      • Oracle
      • OVH
  • Products
  • Pricing
  • Extensions
    • Featured Extensions
      • SocialBee
      • WP Toolkit
      • Sitejet Builder for Plesk
      • SEO Toolkit
      • Joomla! Toolkit
      • Premium Email
      • Email Security
    • Bundles and packs:
      • Business and Collaboration Edition
      • WP pack
      • Hosting pack
      • Power pack
      • Language pack
      • See all Extensions
  • For Partners
    • Plesk Contributor Program
    • Plesk Partner Program
    • Affiliate Program
    • Plesk University
  • Help Center
    • Documentation
    • Professional Services
    • Support
    • Contact Us
    • Wiki
    • Forum
  • Plesk 360 login
  • Free Trial
  • Pricing
  • Solutions
    • By Role
      • For Developers
      • For Content Managers
      • For Agencies
      • For IT Admins
      • For Web Hosters
    • By Infrastructure
      • Overview
      • Plesk on Amazon Web Services (AWS & Lightsail)
      • Microsoft Azure
      • Alibaba Cloud
      • Google Cloud Platform
      • Vultr
      • DigitalOcean
      • Linode
      • UpCloud
      • Oracle
      • OVH
  • Products
  • Pricing
  • Extensions
    • Featured Extensions
      • SocialBee
      • WP Toolkit
      • Sitejet Builder for Plesk
      • SEO Toolkit
      • Joomla! Toolkit
      • Premium Email
      • Email Security
    • Bundles and packs:
      • Business and Collaboration Edition
      • WP pack
      • Hosting pack
      • Power pack
      • Language pack
      • See all Extensions
  • For Partners
    • Plesk Contributor Program
    • Plesk Partner Program
    • Affiliate Program
    • Plesk University
  • Help Center
    • Documentation
    • Professional Services
    • Support
    • Contact Us
    • Wiki
    • Forum
  • Plesk 360 login
  • Free Trial
Plesk 360 login
Free Trial

Knowledge Base

Implement Active List

 
create new pageextensions guideimplement uiplesk features available for extensionshtml

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:

image 79430

Tweet
Share
Share
Email
0 Shares
Read the full article
Related Posts
Knowledge Base

Implement Localized Message

Read More »

Implement URL

Read More »

Implement Form

Read More »

Implement List

Read More »

Hosting Wiki

  • PhpMyAdmin
  • phpPgAdmin
  • PHP
  • HTML
  • Plesk
X-twitter Linkedin Youtube Reddit Github
  • Product
  • Login
  • Pricing
  • Editions
  • For Partners
  • Partner Program
  • Contributor Program
  • Affiliate Program
  • Plesk University
  • Company
  • Blog
  • Careers
  • Events
  • About Plesk
  • Our Brand
  • Resources
  • User and Admin guides
  • Help Center
  • Migrate to Plesk
  • Contact Us
  • Hosting Wiki
  • Forum
  • Legal
  • Legal
  • Privacy Policy
  • Imprint

© 2025 WebPros International GmbH

Part of the WebPros®  Family