2

I'm showing data in admin side like enter image description here

and its code is

<?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">makeanoffer_edit.makeanoffer_data_source</item>
            <item name="deps" xsi:type="string">makeanoffer_edit.makeanoffer_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Make An Offer</item>
         <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">makeanoffer_edit</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
         <item name="buttons" xsi:type="array">
            <item name="back" xsi:type="string">PME\MakeAnOffer\Block\Adminhtml\MakeAnOffer\Edit\BackButton</item>
            <item name="accept" xsi:type="string">PME\MakeAnOffer\Block\Adminhtml\MakeAnOffer\Edit\AcceptButton</item>
            <item name="reject" xsi:type="string">PME\MakeAnOffer\Block\Adminhtml\MakeAnOffer\Edit\RejectButton</item>      
        </item>        
    </argument>
    <dataSource name="makeanoffer_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">PME\MakeAnOffer\Model\MakeAnOffer\DataProvider</argument>
            <argument name="name" xsi:type="string">makeanoffer_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">makeanoffer_id</argument>
            <argument name="requestFieldName" xsi:type="string">id</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">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string"/>
            </item>
        </argument>
        <field name="makeanoffer_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">false</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">makeanoffer</item>
                </item>
            </argument>
        </field>
        <field name="product_name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Product Name:</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="disabled" xsi:type="boolean">true</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">makeanoffer</item>
                </item>
            </argument>
        </field>
        <field name="name">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Customer Name:</item>  
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="disabled" xsi:type="boolean">true</item>
                    <item name="source" xsi:type="string">makeanoffer</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">false</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="email">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Customer Email:</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="disabled" xsi:type="boolean">true</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">makeanoffer</item>
                </item>
            </argument>
        </field>
        <field name="pnumber">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Customer PhoneNo:</item>
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="disabled" xsi:type="boolean">true</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">makeanoffer</item>
                </item>
            </argument>
        </field>

but I want to show this data like

enter image description here

Now How can I change my ui_component view like this?

  • There is no default table ui component still the magento2.3.1. So either you have to use custom css for it or block method – Rutvee Sojitra May 8 at 9:09
  • how can I use custom CSS on xml file? – Asad Khan May 8 at 9:10
  • you can add in layout file – Rutvee Sojitra May 8 at 9:16
0

You may try the process described below but to follow the process you need to create an admin theme.

step 1 ) Create an Admin Theme. You can check this Create an admin theme.

I assume you created an admin theme with name "MyCompany_mytheme"

step 2 ) Create an HTML template file input-custom.html under YOUR-MAGENTO-ROOT/app/design/adminhtml/MyCompany/mytheme/Magento_Ui/web/templates/form/element for input UI element.

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<input class="admin__control-text" readonly style="background-color: #fff;border-color: #fff;color:#000000;cursor: not-allowed;opacity: 1" type="text"
    data-bind="
        event: {change: userChanges},
        value: value,
        hasFocus: focused,
        valueUpdate: valueUpdate,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            id: uid,            
            maxlength: 255
    }"/>

Note: Please remove inline CSS and try to use CSS class

step 3) Update your UI component XML to set new HTML template, mark the field as read-only (but not disable) for Input field.

<?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">
-------------------
-------------------
<field name="pnumber">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                     ------------------
                     ------------------
                   <item name="disabled" xsi:type="boolean">false</item>
                   <item name="formElement" xsi:type="string">input</item>                    
                   <item name="elementTmpl" xsi:type="string">ui/form/element/input-custom</item>                    
                </item>
            </argument>
        </field> 
-------------
</form>

Please Note : item "disabled" = False [since we make it readonly from custom template] item "elementTmpl" = ui/form/element/input-custom [Custom Template path for input field UI]

step 4) Flush Magento cache

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.