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
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
MagentoFrameworkComponentComponentRegistrar::register(
MagentoFrameworkComponentComponentRegistrar::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
Source link
