Adding button in Magento 2

Sorry that this is not a complete answer but more a pointing in the "right" direction.

There are a set of elements that can be called inside the Magento/Ui system. These can be found under app/code/Magento/Ui/Component/Form/Element/.

Here by default you will see:

  1. Checkbox.php
  2. Input.php
  3. Multiline.php
  4. MultiSelect.php
  5. Radio.php
  6. Range.php
  7. Select.php
  8. Textarea.php

These elements are set-up in the definition file app/code/Magento/Ui/view/base/ui_component/etc/definition.xml. For example the checkbox looks like the following:

<checkbox class="Magento\Ui\Component\Form\Element\Checkbox">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/boolean</item>
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/form/field</item>
                <item name="elementTmpl" xsi:type="string">ui/form/element/checkbox</item>
            </item>
        </item>
    </argument>
</checkbox>

From what I can see from my quick looking around it should be possible to add your own type via this sort of definition, though I am not sure about the workings. You will need to add your own element template here, the defaults can be found under app/code/Magento/Ui/view/base/web/templates/form/element/*.html

You can see that the definition.xml file is added via di as follows:

<virtualType name="uiDefinitionFileCollector" type="Magento\Framework\View\Element\UiComponent\Config\FileCollector\AggregatedFileCollector">
    <arguments>
        <argument name="searchPattern" xsi:type="string">etc/definition.xml</argument>
    </arguments>
</virtualType>

So you should be able to add your own definition.xml file to your module and it will be picked up.

Sorry this is not a complete answer but it should be a good start in the "right" direction.


I am not sure it is correct way but it worked for me

app/code/Magento/Ui/view/base/web/templates/form/components/collection.html

<li class="address-list-item" data-bind="css: { 'ui-state-active': element.active }, click: activate">
          // put your code here

but best way is not change directly here you can override this file in your custom module.

do not forget to flush cache folder as well as static content and run grunt exec:backend command after change this file.