Read More
Read More
Menu Close

    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-

    1. Define your uicomponent form in your module xml path – /app/code/Webkul/Grid/view/adminhtml/layout/grid_banner_form.xml  –
      <?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>
      
    2. Now create uicomponent form xml path – /app/code/Webkul/Grid/view/adminhtml/ui_component/grid_banner_form.xml  –
      <?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>
      
    3. Now create CustomData.php file in path \app\code\Webkul\Grid\Block\Adminhtml\Edit\Banner\
      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);
          }
      }
    4. Now create customdata.phtml file with html content which you want in path – /app/code/Webkul/Grid/view/adminhtml/templates/banner/
      <div>
         <span><?php echo __("Some Custom Data");?></span>
      </div>

    So In this way you can add custom html data in your uiComponent form.

    Searching for an experienced
    Magento 2 Company ?
    Read More
    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    Be the first to comment.

    Back to Top