Magento2 – Add Custom Block in UI Form Field

custom-fieldmagento2ui-form

I want to call custom block to call my custom .phtml in ui-form field.

How to do that?

My form field :

<field name="title">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Title</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">title</item>
            <item name="dataScope" xsi:type="string">title</item>
        </item>
    </argument>
</field>

I want to add this as html code (Go to stores -> Attributes -> Product -> Edit attribute -> Manage Labels):

enter image description here
enter image description here

Any help would be appreciated.

Best Answer

Follow this below steps to store labels in ui form

1) Add this container in your ui form inside fieldset :

<container name="group_title_container">
   <argument name="data" xsi:type="array">
      <item name="config" xsi:type="array">
         <item name="sortOrder" xsi:type="number">20</item>
         <item name="validation" xsi:type="array">
            <item name="required-entry" xsi:type="boolean">true</item>
         </item>
      </item>
   </argument>
   <htmlContent name="group_title">
      <argument name="data" xsi:type="array">
         <item name="config" xsi:type="array">
            <item name="additionalClasses" xsi:type="string">admin__field</item>
            <item name="label" xsi:type="string" translate="true">Group Title</item>
         </item>
      </argument>
      <argument name="block" xsi:type="object">Vendor\Module\Block\Adminhtml\Custom</argument>
   </htmlContent>
</container>

Using this, you can add custom block in htmlContent

<argument name="block" xsi:type="object">Vendor\Module\Block\Adminhtml\Custom</argument>

2) Create Custom.php block file for call phtml file :

app/code/Vendor/Module/Block/Adminhtml/Custom.php

<?php
namespace Vendor\Module\Block\Adminhtml;

class Custom extends \Magento\Backend\Block\Template {
    /**
     * Block template
     *
     * @var string
     */
    protected $_template = 'custom.phtml';
}

3) Create custom.phtml file to create store label field :

app/code/Vendor/Module/view/adminhtml/templates/custom.phtml

<?php

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

?>
<?php
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$storeManager = $objectManager->create("\Magento\Store\Model\StoreManagerInterface");
$stores = $storeManager->getStores(true, false);
?>
<label class="label admin__field-label" for="group_name" data-ui-id="adminhtml-form-renderer-fieldset-multistore-0-text-name-label"><span><?php echo __("Store Label") ?></span></label>
<div class="admin__field-control control">
    <div class="fieldset-wrapper-content in collapse" id="manage-store-labels">
        <fieldset class="admin__fieldset fieldset">
            <div class="admin__control-table-wrapper">
                <table class="admin__control-table" id="attribute-labels-table">
                    <thead>
                    <tr>
                        <?php foreach ($stores as $_store): ?>
                            <th class="col-store-view"><?= /* @escapeNotVerified */ $_store->getName() ?></th>
                        <?php endforeach; ?>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <?php foreach ($stores as $_store): ?>
                            <td class="col-store-view">
                                <input class="input-text<?php if ($_store->getId() == \Magento\Store\Model\Store::DEFAULT_STORE_ID): ?> required-option<?php endif; ?>" type="text" name="frontend_label[<?= /* @escapeNotVerified */ $_store->getId() ?>]" value="<?php echo "Test"; ?>"<?php if ($block->getReadOnly()):?> disabled="disabled"<?php endif;?>/>
                            </td>
                        <?php endforeach; ?>
                    </tr>
                    </tbody>
                </table>
            </div>
        </fieldset>
    </div>
</div>

For proper layout, Add this below css code :

#manage-store-labels .admin__fieldset
        {
            padding-bottom: 0;
            padding-top: 0;
        }

Output :

enter image description here

Hope, It will helpful for you.

Related Topic