Add Custom html Content with Dynamic Rows in Magento 2

Today, we will learn how to add new fields or custom html content with dynamic rows.

When we add dynamic rows in ui component form by default, Magento provides certain actions like delete to delete the added row.

To know more on dynamic rows component within Magento 2 you can follow the mentioned link

Here I will show how we can add a new action like “View” or a custom button within dynamic rows. To create a form using ui component you can follow this link

Below is the code of how to add dynamic rows in ui component form. Add the following code in your custom form.

<dynamicRows name="dynamic_rows">
        <settings>
            <addButtonLabel translate="true">Add Rows</addButtonLabel>
            <additionalClasses>
                <class name="admin__field-wide">true</class>
            </additionalClasses>
            <componentType>dynamicRows</componentType>
        </settings>
        <container name="record" component="Magento_Ui/js/dynamic-rows/record">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="isTemplate" xsi:type="boolean">true</item>
                    <item name="is_collection" xsi:type="boolean">true</item>
                    <item name="componentType" xsi:type="string">container</item>
                </item>
            </argument>
            <field name="my_field_1" formElement="input">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="fit" xsi:type="boolean">false</item>
                    </item>
                </argument>
                <settings>
                    <validation>
                        <rule name="required-entry" xsi:type="boolean">true</rule>
                        <rule name="validate-no-html-tags" xsi:type="boolean">true</rule>
                    </validation>
                    <dataType>text</dataType>
                    <label>Field 1</label>
                </settings>
            </field>
            <field name="my_field_2" formElement="input">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="fit" xsi:type="boolean">false</item>
                    </item>
                </argument>
                <settings>
                     <validation>
                        <rule name="validate-no-html-tags" xsi:type="boolean">true</rule>
                    </validation>
                    <dataType>text</dataType>
                    <label>My Field 2</label>
                </settings>
            </field>
                <actionDelete template="Magento_Backend/dynamic-rows/cells/action-delete">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="fit" xsi:type="boolean">false</item>
                        </item>
                    </argument>
                    <settings>
                        <additionalClasses>
                            <class name="some-class">true</class>
                        </additionalClasses>
                        <dataType>text</dataType>
                        <label>Actions</label>
                        <componentType>actionDelete</componentType>
                    </settings>
                </actionDelete>
              
        </container>
    </dynamicRows>

The dynamic row section will appear like this.

Now let us add an action button just before the delete action button, we can do this by simply adding below code in our ui component form.

You need to add this code right after <field> tag gets closed. Add the block path that you want to get initialised in this section and create a phtml file to render the output .

<htmlContent name="select_button">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="component" xsi:type="string">Magento_Ui/js/form/components/html</item>
                            <item name="additionalClasses" xsi:type="string">wk-view-variant</item>
                        </item>
                    </argument>
                    <block name="html_content_block" class="Webkul\Test\Block\Adminhtml\CustomButton\Edit\Form\ViewCustom">
                        <arguments>
                            <argument name="template" xsi:type="string">Webkul_Test::test.phtml</argument>
                        </arguments>
                    </block>
            </htmlContent>

Now create a block file within directory path Webkul\Test\Block\Adminhtml\CustomButton\Edit\Form as ViewCustom.php

<?php
/**
 * Webkul Software
 *
 * @category Webkul
 * @package Webkul_Test
 * @author Webkul
 * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
 * @license https://store.webkul.com/license.html
 */
namespace Webkul\Test\Block\Adminhtml\CustomButton\Edit\Form;

class ViewCustom extends \Magento\Backend\Block\Template
{
   
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\View\Model\PageLayout\Config\BuilderInterface $pageLayoutBuilder,
        \Magento\Framework\ObjectManagerInterface $objectManager,
        \Magento\Cms\Api\PageRepositoryInterface $pageRepositoryInterface,
        \Magento\Framework\Api\SearchCriteriaBuilder $searchCriteriaBuilder,
        array $data = []
    ) {
        $this->_objectManager = $objectManager;
        $this->formKey = $context->getFormKey();
        $this->pageRepositoryInterface = $pageRepositoryInterface;
        $this->searchCriteriaBuilder = $searchCriteriaBuilder;
        parent::__construct($context, $data);
    }
}

Next we need to create a phtml file where we will add our custom button like this.

<?php
/**
 * Webkul Software.
 *
 * @category  Webkul
 * @package   Webkul_Test
 * @author    Webkul
 * @copyright Copyright (c) Webkul Software Private Limited (https://webkul.com)
 * @license   https://store.webkul.com/license.html
 */
?>
<button><?php echo __('My Custom Action');?></button>

Now flush the cache and reload the form, it will appear like this. As we can see the html content will appear in position as per defined within your xml form.

We can also include icons, fields in our phtml too.

Similarly you can also create various custom actions like View and edit by including this in your form.

To add other actions on button click we can also initialize js in the phtml and can customise the content according to our requirements.