Add a custom button to a relation manager

Sometimes you may want to add a custom button to a relation widget to execute a custom action or extend the function of the default buttons. You can easily do this by specifying a custom key in the toolbarButtons option of your config_relation.yaml:

# ===================================
#  Relation Behavior Config
# ===================================

items:
    label: Invoice Line Item
    view:
        list: $/acme/pay/models/invoiceitem/columns.yaml
        toolbarButtons: create|delete|custom # Add this
    manage:
        form: $/acme/pay/models/invoiceitem/fields.yaml
        recordsPerPage: 10

Next, create a new file _relation_button_custom.htm (the last part corresponds to the item in your configuration file) in your controller's partial directory (e. g. /plugins/acme/controllers/invoices/) with the following contents:

<button
        class="btn btn-sm btn-secondary"
        data-request="onDoSomething"
        data-stripe-load-indicator>
    Custom
</button>

In this case, the button will just call the handler onDoSomething of your controller. But you can also go more advanced and pass the selected (checked) items or any custom variables to the controller. You can even open a custom modal and render complex controls. A lot of the markup can be reused from the existing button partials.