2

I have added custom filed dropdown in product edit form using UI component. Below is the code in file app/code/Vendor/Module/view/adminhtml/ui_component/product_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">
<field name="customer" component="Vendor_Module/js/components/select-customer" sortOrder="5" formElement="select">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="multiple" xsi:type="boolean">false</item>
            <item name="showCheckbox" xsi:type="boolean">true</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
        </item>
    </argument>
    <settings>
        <required>true</required>
        <validation>
            <rule name="required-entry" xsi:type="boolean">true</rule>
        </validation>
        <elementTmpl>ui/grid/filters/elements/ui-select</elementTmpl>
        <label translate="true">Select Customer</label>
        <dataScope>data.customer</dataScope>
        <componentType>field</componentType>
        <listens>
            <link name="${ $.namespace }.${ $.namespace }:responseData">setParsed</link>
        </listens>
    </settings>
    <formElements>
        <select>
            <settings>
                <options class="Vendor\Module\Ui\Component\Create\Form\Customer\Options"/>
            </settings>
        </select>
    </formElements>
   </field>
</form>

By this code, I'm able to display a drop-down with customer name and id like an option value

enter image description here

Now when someone edits the product, I want to preselect the drop-down value base on the data save in another table. Can anyone help me with this? I think using data provider one can achieve this but not sure

If i add a dataprovider using below tag. It is giving an error "Element 'dataSource': This element is not expected"

   <dataSource name="customfiled_customer_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Vendor\Module\Ui\DataProvider\Product\CustomerDataProvider</argument>
        <argument name="name" xsi:type="string">customfiled_customer_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">brand_id</argument>
        <argument name="requestFieldName" xsi:type="string">customer</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>
1
         <field name="customer">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="Vendor\Module\Ui\Component\Create\Form\Customer\Options</item>
             <item name="config" xsi:type="array">
        <item name="filterOptions" xsi:type="boolean">true</item>
        <item name="multiple" xsi:type="boolean">false</item>
        <item name="showCheckbox" xsi:type="boolean">true</item>
        <item name="disableLabel" xsi:type="boolean">true</item>
        <item name="levelsVisibility" xsi:type="number">1</item>
          <item name="dataScope" xsi:type="string">Column_name(which you 
               want from database)</item>
    </item>
        </argument>
    </field>

you can use datasource in form like below:

             <dataSource name="custom_form_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
             <argument name="class" xsi:type="string">Vendor\Namespace\Model\DataProvider</argument>
        <argument name="name" xsi:type="string">custom_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="*/*/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>

your form file should be like:

(Just demo code)

               <?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"> Namespace_imports_form.Namespace_custom_form_data_source Namespace_imports_form.Namespace_custom_form_data_source Import Namespace using CSV data Namespace_imports_form

    <item name="buttons" xsi:type="array">
        <item name="back" xsi:type="string">Vendor\Namespace\Block\Adminhtml\Edit\Imports\BackButton</item>
        <item name="reset" xsi:type="string">Vendor\Namespace\Block\Adminhtml\Edit\ResetButton</item>
        <item name="save" xsi:type="string">Vendor\Namespace\Block\Adminhtml\Edit\SaveButton</item>
    </item>
    <item name="layout" xsi:type="array">
        <item name="type" xsi:type="string">tabs</item>
        <item name="navContainerName" xsi:type="string">left</item>
    </item>
</argument>
<dataSource name="Namespace_custom_form_data_source">
    <argument name="dataProvider" xsi:type="configurableObject">
        <argument name="class" xsi:type="string">Vendor\Namespace\Model\DataProvider</argument>
        <argument name="name" xsi:type="string">Namespace_custom_form_data_source</argument>
        <argument name="primaryFieldName" xsi:type="string">Namespace_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="*/imports/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="Namespace" sortOrder="5">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string">Item information</item>
            <item name="collapsible" xsi:type="boolean">false</item>
        </item>
    </argument>
    <field name="upload_file">
        <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">Select File to Import </item>
                <item name="formElement" xsi:type="string">fileUploader</item>
                <item name="elementTmpl" xsi:type="string">ui/form/element/uploader/uploader</item>
                <item name="source" xsi:type="string">Namespace</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
                <item name="uploaderConfig" xsi:type="array">
                    <item name="url" xsi:type="url" path="*/imports/imports"/>
                </item>
            </item>
        </argument>
    </field>
</fieldset>

  • This will not work because my data is stored in another custom table, not in catalog eav table. – chirag dodia Oct 5 '18 at 4:10
  • Yes but you can join your custom table with catalog collection – Rutvee Sojitra Oct 5 '18 at 4:23
  • That I understood but where I can define dataprovider class. If i add datasource tag in XML it is giving an error like "datasource element is not expected" – chirag dodia Oct 5 '18 at 4:53
  • @chiragdodia yes you can use datasource like above code – Rutvee Sojitra Oct 5 '18 at 4:58
  • Thank you for your effort @rutvee-sojitra But as I have mentioned above datadataSource tag not allowed in product edit form XML schema. The code you have mentioned is work when you add a form to your custom module. – chirag dodia Oct 5 '18 at 6:52

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.