add dropdown menu in a plugin

Question

I developed a plugin that displays several records from DB for the user. It is working fine, but now I'm trying to implement check-boxes and Actions menu like Joomla 4 has on the Users-Manage screen. I used very naive approach: populated the same html for the dropdown menu, but it did not work (i.e. mouse click does not open the menu). I guess it is because header on my plugin page does not have:

    <script src="/media/system/js/joomla-toolbar-button.min.js?6eb267679d65e41cc9fc4de7a56cf06e3b966e5b" type="module"></script>

Could you show example or recommend how to implement the button with dropdown menu in custom plugin in Joomla 4.4.5?

Edit: here is code that renders checkboxes and the Actions button:

<?php
\defined('_JEXEC') or die;

use Joomla\CMS\Factory;

    print "<form action=\"/my-account/my-orders\" method=\"post\" name=\"adminForm\" id=\"adminForm\">\n";
    print "<div class=\"page-header\"><h2 itemprop=\"name\">Orders History</h2></div>\n";

    print "<br><div class=\"btn-toolbar d-flex\" role=\"toolbar\" id=\"toolbar\">\n";
    print "&nbsp;&nbsp;&nbsp;&nbsp;<input class=\"button-status-group btn btn-action dropdown-toggle\" type=\"submit\" value=\"Actions\" />\n";
    print "</div><br>\n";

    print "<input type=\"hidden\" name=\"task\" value=\"\" />\n";
    print "<input type=\"hidden\" name=\"boxchecked\" value=\"0\">\n";
    print "<table class=\"filecabinet table-sortable\" id=\"licstbl\" border=\"0\" width =\"100%\" bordercolor=\"#000000\">\n";
    print "  <thead>\n";
    print "    <tr>\n";
    print "      <th>&nbsp;<input class=\"form-check-input\" autocomplete=\"off\" type=\"checkbox\" name=\"checkall-toggle\" value=\"\" title=\"\" onclick=\"Joomla.checkAll(this)\" /></th>\n";
    print "      <th>Date</th>\n";
    print "    </tr>\n";
    print "  </thead><tbody>\n";

    $data = $this->rows;
    for ($i=0, $n=(empty($data) ? 0 : count($data)); $i < $n; $i++)
    { 
        $row = &$data[$i]; 

        print "    <tr class=\"row" . $i . "\">\n";
        print "      <td>&nbsp;<input class=\"form-check-input\" autocomplete=\"off\" type=\"checkbox\" id=\"cb0\" name=\"cid[]\" value=" . GetDisplaySpecial($row->license) . " onclick=\"Joomla.isChecked(this.checked);\" />&nbsp;</td>\n";
        print "      <td>" . $row->date . "</td>\n";
        print "    </tr>\n";
    }

    print "  </tbody>\n</table>\n";

    print "</form>\n";
    print "<div class=\"statusPanel\" />\n";
?>

The code above has 2 issues:

when all checkboxes are unselected the Actions button is not disabled;
Actions button does not render the dropdown menu.

Can you please provide an example of the code you have used in your plugin to to display the records from DB and the code around the dropdown menu where it is not working to help anybody hoping to assist you with your issue. It is best if you edit your original question and add the code and any further remarks that can help people understand what you have done. — Irata
– Irata ♦, Commented Jun 16, 2024 at 8:05

Sharky · Accepted Answer · 2024-06-20 07:58:10Z

1

You're looking to use the Toolbar API:

// Get a custom toolbar instance
$toolbar = Factory::getApplication()->getDocument()->getToolbar('plg_your_plugin');

// Add dropdown button
$dropdown = $toolbar->dropdownButton('status-group')
    ->text('JTOOLBAR_CHANGE_STATUS')
    ->toggleSplit(false)
    ->listCheck(true)
    // Set the form ID to look for, #style-form on plugin config page, defaults to #adminForm
    ->form('style-form');

// Add buttons inside dropdown
$dropdownToolbar = $dropdown->getChildToolbar();
$dropdownToolbar->standardButton('some.action')->text('foo')->form('style-form');
$dropdownToolbar->standardButton('some.otheraction')->text('bar')->form('style-form');

// Render the toolbar
echo $toolbar->render();

https://api.joomla.org/cms-5/namespaces/joomla-cms-toolbar.html

If you're rendering this in plugin config form (i.e. if code is in a custom field class), you want to remove the <form> element from your markup since it's already rendered inside a form. Nested <form> elements is invalid HTML.

answered Jun 20, 2024 at 7:58

Sharky

12.8k9 silver badges24 bronze badges

Sharky, thank you for the code example! Once I added this line: <code> $toolbar = Factory::getApplication()->getDocument()->getToolbar('com_myorders'); </code> i started getting error "Call to undefined method Joomla\CMS\Document\HtmlDocument::getToolbar()". I guess it is because not an Admin page (toolbar does not exist), but is a regular component page that the website user can see when logged in. Is there a way to create Toolbar on the custom page?

Terry
– Terry

2024-06-24 13:07:28 +00:00
Commented Jun 24, 2024 at 13:07
1

My bad, this code is only available on J5. On J4 use $toolbar = \Joomla\CMS\Toolbar\Toolbar::getInstance('plg_your_plugin');.

Sharky
– Sharky

2024-06-24 20:14:07 +00:00
Commented Jun 24, 2024 at 20:14
Everything is working perfectly now! Sharky, thanks a lot!

Terry
– Terry

2024-06-25 03:28:29 +00:00
Commented Jun 25, 2024 at 3:28

Add a comment |

Stack Exchange Network

add dropdown menu in a plugin

1 Answer 1

Your Answer

Hot Network Questions

add dropdown menu in a plugin

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions