How to add html content using uicomponent form
How to add html content using uicomponent form – As we all know that in magento2 we can create a form using magento uicomponent, but if you want to add some html content in your form using magento uicomponent then the solution is here. Using this post you will know how can add a html content inside a fieldset in magento admin form.
In this example I am creating a banner form “grid_banner_form” in module “Webkul_Grid” .
Here I am following some steps-
- Create a custom module:
Name of the module is defined as VendorName_ModuleName. First part is name of the vendor and last part is name of the module: For example: Magento_HelloWorld, Webkul_Grid. Focus on following guide to create the folders:
2: Create etc/module.xml file.
Then, it is necessary to create etc folder and add the module.xml file app/code/Webkul/Grid/etc/module.xml
Contents 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_Grid">
</module>
</config>
3: Create etc/registration.php file
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Webkul_Grid',
__DIR__
);
- Define your uicomponent form in your module xml path – /app/code/Webkul/Grid/view/adminhtml/layout/grid_banner_form.xml –
In this layout file you will declare your uiComponent using the <uiComponent> tag.
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link src="Webkul_Grid::js/bootstrap/banner-post-action.js"/>
</head>
<body>
<referenceContainer name="content">
<uiComponent name="grid_banner_form"/>
</referenceContainer>
</body>
</page>
Now create uicomponent form xml path – /app/code/Webkul/Grid/view/adminhtml/ui_component/grid_banner_form.xml –
Create your uiComponent in the grid_banner_form.xml with dataSource
<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">grid_banner_form.grid_banner_form_data_source</item>
<item name="deps" xsi:type="string">grid_banner_form.grid_banner_form_data_source</item>
</item>
<item name="label" xsi:type="string" translate="true">Grid Banner Information</item>
<item name="layout" xsi:type="array">
<item name="type" xsi:type="string">tabs</item>
<item name="navContainerName" xsi:type="string">left</item>
</item>
<item name="buttons" xsi:type="array">
<item name="back" xsi:type="string">Webkul\Grid\Block\Adminhtml\Edit\BackButton</item>
<item name="delete" xsi:type="string">Webkul\Grid\Block\Adminhtml\Edit\Banner\DeleteButton</item>
<item name="reset" xsi:type="string">Webkul\Grid\Block\Adminhtml\Edit\ResetButton</item>
<item name="save" xsi:type="string">Webkul\Grid\Block\Adminhtml\Edit\Banner\SaveButton</item>
<item name="save_and_continue" xsi:type="string">Webkul\Grid\Block\Adminhtml\Edit\SaveAndContinueButton</item>
</item>
</argument>
<dataSource name="grid_banner_form_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Webkul\Grid\Model\Banner\DataProvider</argument>
<argument name="name" xsi:type="string">grid_banner_form_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="submit_url" xsi:type="url" path="grid/banner/save"/>
</item>
</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
</item>
</argument>
</dataSource>
<fieldset name="grid_banner">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Grid Banner Information</item>
</item>
</argument>
<container name="banner_container">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="sortOrder" xsi:type="number">1</item>
</item>
</argument>
<htmlContent name="html_content">
<argument name="block" xsi:type="object">Webkul\Grid\Block\Adminhtml\Edit\Banner\CustomData</argument>
</htmlContent>
</container>
</fieldset>
</form>
Note : Make sure to declare the data source in di.xml file of your module located at app/code/Webkul/Grid/etc/adminhtml/di.xml
Now create a custom Block “CustomData.php” file in path :
\app\code\Webkul\Grid\Block\Adminhtml\Edit\Banner\
<?php
namespace Webkul\Grid\Block\Adminhtml\Edit\Banner;
class CustomData extends \Magento\Backend\Block\Template
{
/**
* Block template.
*
* @var string
*/
protected $_template = 'banner/customdata.phtml';
/**
* AssignProducts constructor.
*
* @param \Magento\Backend\Block\Template\Context $context
* @param array $data
*/
public function __construct(
\Magento\Backend\Block\Template\Context $context,
array $data = []
) {
parent::__construct($context, $data);
}
}
Now create a template file for the above block customdata.phtml file in which we will write the html content which you want in path – /app/code/Webkul/Grid/view/adminhtml/templates/banner/
<div><span><?php echo __("Webkul123");?></span> </div>
So In this way you can add custom html data in your uiComponent form.
How to add html content using uicomponent form in magento2
You can also check below:
https://developer.adobe.com/commerce/frontend-core/ui-components/