Adding button actions

In the top of the grid, button actions can be defined. Some buttons are predefined by default, which allows for easy addition via the XML layout.

XML layout definition

Filters can be added via the XML layout argument button_actions. Each button action requires a reference to an Alpine.js method and a label.

<block>
    <argument>
        <argument name="button_actions" xsi:type="array">
            <item name="new" xsi:type="array">
                <item name="method" xsi:type="string">newAction</item>
                <item name="label" xsi:type="string">Add New Page</item>
                <item name="primary" xsi:type="boolean">true</item>
            </item>
        </argument>
    </arguments>
</block>

See the grid reference for more details.

Class-based definition

Instead of defining the button via XML layout, you can also use a PHP class for this. For this, create a new class that implements Loki\AdminComponents\Ui\ButtonInterface and pass it as follows:

<block>
    <arguments>
        <argument name="button_actions" xsi:type="array">
            <item name="custom" xsi:type="object">
                YireoTraining\Example\Grid\ButtonAction\CustomButton
            </item>
        </argument>
    </arguments>
</block>

Your custom class could extend from Loki\AdminComponents\Ui\Button but this is not required.

Creating a new item

The Alpine.js method newAction simply redirects to a new form page where the item can be created. This URL is determined by an Alpine.js property newUrl which can be set via the XML layout:

<block>
    <argument>
        <argument name="new_url" xsi:type="string">my/example/new</argument>
    </arguments>
</block>

By default, the new URL is */*/form.

Redirecting to any page

In a similar way, the Alpine.js method redirectAction redirects a custom page, which can be set through the url item of the button definition:

<block>
    <argument>
        <argument name="button_actions" xsi:type="array">
            <item name="product_overview" xsi:type="array">
                <item name="method" xsi:type="string">redirectAction</item>
                <item name="label" xsi:type="string">Product Overview</item>
                <item name="url" xsi:type="string">catalog/product/index</item>
            </item>
        </argument>
    </arguments>
</block>

Existing Alpine.js method options

Each action button refers to an Alpine.js method to be executed. The following actions are already available:

• newAction
• redirectAction

Adding a new Alpine.js method option

If you are adding a button action with a new method reference, that doesn't exist yet in the Alpine.js grid component, you will need to add it. See the documentation on LokiComponentExtender to see how to do this.

Adding subaction buttons