How to add Custom Field in UI Component using htmlContent Magento 2

In this blog, we will learn how to add a custom input using htmlContent inside a UI component form in Magento 2.

we can create a form using the Magento UI component, but if you want to add some htmlContent to your form using the Magento UI component then the solution is here.

HtmlContent component

The htmlContent is a UI component. We can render Block into UI components.

Here We are following some steps-

1. Create a custom module in Magento:

We are creating a module with the name Webkul_CustomField in Magento.

You can follow this blog to create a custom module in Magento 2

Create a custom module blog

2. Create an etc/module.xml file.

It is a step to create a custom module. create module.xml file in the etc folder.

app/code/Webkul/CustomField/etc/module.xml

code would be :

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Webkul_CustomField">
    </module>
</config>

3. Create a registration.php file in the module root

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Webkul_CustomField',
    __DIR__
);

4. Create a UI component form

To create a UI component form follow these blogs

Step 1 Create UI Form in Magento2 – Part 1

Step 2 Create Ui Form In Magento2 – Part 2

UI component form

5. Add htmlContent code inside UI component form .xml file

and put htmlContent code inside UI component form <fieldset>.

<htmlContent name="custom_field">
   <block name="html_content_input_field" >
      <arguments>
	<argument name="template" xsi:type="string">
	    Webkul_CustomField::input_field.phtml
	</argument>
      </arguments>
   </block>
</htmlContent>

Note – You can add a Block class to create functions to use in input_field.phtml file.

6. Now create input_field.phtml file

Now create a template file for the input input_field.phtml in which we will write the HTML content.

app/code/Webkul/CustomField/view/adminhtml/templates/input_field.phtml

you can add your input field code inside input_field.phtml file

<div class="admin__fieldset">
    <div class="admin__field">
        <div class="admin__field-label">Custom Field</div>
        <div class="admin__field-control">
            <input class="admin__control-text" data-form-part="custom_form" type="text" name="custom" value="">
        </div>
    </div>
</div>

Now you can see custom input in our UI component form

- data-form-part="your UI form name" to post that field data with UI component form