Add Readonly Field in ui_component Form in Magento 2

 Steps to Add Readonly Field in ui_component Form in Magento 2:




Step 1: First create a ui_component file


For that use this guide – How to Create UI Component Grid and Form in Magento 2




Step 2: Now move to the below path


app/code/Vendor/Extension/view/adminhtml/ui_component/uiexample_form.xml


Edit the code snippet as follows





<?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">uiexample_form.grid_record_grid_list_data_source</item>

            <item name="deps" xsi:type="string">uiexample_form.grid_record_grid_list_data_source</item>

         </item>

        <item name="label" xsi:type="string" translate="true">Add New Record</item>

        <item name="config" xsi:type="array">

            <item name="dataScope" xsi:type="string">data</item>

            <item name="namespace" xsi:type="string">uiexample_form</item> 

        </item> 

        <item name="template" xsi:type="string">templates/form/collapsible</item> 

        <item name="buttons" xsi:type="array"> 

            <item name="save" xsi:type="string">Vendor\Extension\Block\Adminhtml\Edit\Save</item> 

        </item> 

    </argument> 

    <dataSource name="grid_record_grid_list_data_source"> 

        <argument name="dataProvider" xsi:type="configurableObject"> 

            <argument name="class" xsi:type="string">Vendor\Extension\Model\DataProvider</argument> 

            <argument name="name" xsi:type="string">grid_record_grid_list_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="*/*/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="general_information"> 

        <argument name="data" xsi:type="array"> 

            <item name="config" xsi:type="array"> 

                <item name="collapsible" xsi:type="boolean">false</item> 

                <item name="label" xsi:type="string" translate="true">General Information</item> 

                <item name="sortOrder" xsi:type="number">20</item> 

            </item> 

        </argument> 

        <field name="name" sortOrder="10" formElement="input"> 

            <settings> 

                <dataType>text</dataType>                 <visible>true</visible>

 

                <label translate="true">Name</label> 

            </settings> 

        </field>

        <field name="identifier" formElement="hidden">

                <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">Country</item>

                        <item name="formElement" xsi:type="string">input</item>

                        <item name="source" xsi:type="string">identifier</item>

                        <item name="dataScope" xsi:type="string">identifier</item>

                        <item name="default" xsi:type="string">India</item> 

                    </item>

                </argument>

 

                <!-- Add Below Code To Make Read Only  Field-->

                <settings>

                    <dataType>text</dataType>

                    <disabled>1</disabled>

                </settings>

                <!--  -->

 

            </field>

 

        <field name="comment" sortOrder="20" formElement="input"> 

            <settings> 

                <dataType>text</dataType> 

                <visible>true</visible> 

                <label translate="true">Comment</label>

             </settings>

 

        </field> 

        <field name="address" sortOrder="20" formElement="input"> 

            <settings> 

                <dataType>text</dataType> 

                <visible>true</visible> 

                <label translate="true">Address</label> 

            </settings> 

        </field> 

    </fieldset> 

</form>




You have to add “<settings>” and “<disabled>1</disabled>” to make any field read-only. As you can see in the screenshot below, the country field is read only.

Comments

Post a Comment

Popular posts from this blog

Add Admin User name and Action name in Order Comment Section through Action Performed from Sales Order Grid in Magento 2

  Step 1:  First, we need to create an “events.xml“ file inside our extension at the following path app\code\Vendor\Extension\etc\adminhtml\ Then add the code as follows. <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">     <event name="sales_order_save_after">         <observer name="sales_order_save_after_comment_history_add"           instance="\Vendor\Extension\Observer\OrderSaveAfter" />     </event> </config> Step 2:  After that, we need to create an “OrderSaveAfter.php” file inside our extension at the following path app\code\Vendor\Extension\Observer\ And embed the code as given below. <?php  namespace Vendor\Extension\Observer;   use Magento\Framework\Event\ObserverInterface; use Magento\Framework\App\RequestInterface; use Magento\Backen...
Read more

How to Update Product Stock Programmatically in Magento 2

 Steps to Update Product Stock Programmatically in Magento 2: Step 1: We need to create a “Data.php” file inside our extension at the following path app\code\Vendor\Extension\Helper\ Now add the code as follows <?php namespace Vendor\Extension\Helper;   class Data extends \Magento\Framework\App\Helper\AbstractHelper {     protected $_productobj;     protected $_stockRegistry;       public function __construct(         \Magento\Framework\App\Helper\Context $context,         \Magento\Catalog\Model\Product $productobj,         \Magento\CatalogInventory\Api\StockRegistryInterface $stockRegistry,      ) {         $this->_productobj = $productobj;         $this->_stockRegistry = $stockRegistry;         parent::__construct($context);     }       public function updateProductStock($pr...
Read more

How to Set and Get Cookie in Magento 2

 <?php namespace Vendor\Extension\Model; class Customcookie {     private $customCookieManager;     private $customCookieMetadataFactory;     public function __construct(         \Magento\Framework\Stdlib\CookieManagerInterface $customCookieManager,         \Magento\Framework\Stdlib\Cookie\CookieMetadataFactory $customCookieMetadataFactory)    {         $this->customCookieManager = $customCookieManager;         $this->customCookieMetadataFactory = $customCookieMetadataFactory;     }     public function setCookie()     {         $customCookieMetadata = $this->customCookieMetadataFactory->createPublicCookieMetadata();         $customCookieMetadata->setDurationOneYear();         $customCookieMetadata->setPath('/');         $customCookieMe...
Read more