2

I have created a UI form in admin. I have one select field which has some options.For some values I want to hide a fieldset in the form. How can I achieve it.

Referred this link

magento 2.1 How do i create form component field custom depends on another field value

Here is my UI form:

<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">customform_form.customform_form_data_source</item>
            <item name="deps" xsi:type="string">customform_form.customform_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Custom Field Information</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">customform_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">Company\Module\Block\Adminhtml\Customform\Edit\SaveButton</item>
        </item>
    </argument>
    <dataSource name="customform_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Company\Module\Model\ResourceModel\Customform\DataProvider</argument>
            <argument name="name" xsi:type="string">customform_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">attr_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="customform/customform/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="customform_details">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Field Properties</item>
                <item name="sortOrder" xsi:type="number">20</item>
            </item>
        </argument>
         <field name="attr_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">attr_id</item>
             </item>
         </argument>
    </field>
        <field name="attr_label">
            <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">Label</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">customform</item>
                    <item name="dataScope" xsi:type="string">attr_label</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>

        <field name="attr_type">
            <argument name="data" xsi:type="array">
                <item name="options" xsi:type="array">
                    <item name="textfield" xsi:type="array">
                        <item name="value" xsi:type="string">1</item>
                        <item name="label" xsi:type="string" translate="true">Label1</item>
                    </item>
                    <item name="textarea" xsi:type="array">
                        <item name="value" xsi:type="string">2</item>
                        <item name="label" xsi:type="string" translate="true">Label2</item>
                    </item>
                    <item name="yesno" xsi:type="array">
                        <item name="value" xsi:type="string">3</item>
                        <item name="label" xsi:type="string" translate="true">Label3</item>
                    </item>
                    <item name="select" xsi:type="array">
                        <item name="value" xsi:type="string">4</item>
                        <item name="label" xsi:type="string" translate="true">Label4</item>
                    </item>
                </item>
                <item name="config" xsi:type="array">
                    <item name="component" xsi:type="string">Company_Module/js/form/element/custfield</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Input Type</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="dataScope" xsi:type="string">attr_type</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>  
        </fieldset>
        <fieldset name="fieldset_multiple_options">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Manage Options (Values of Your Field)</item>
        </item>
    </argument>    
    <container name="multiple_options">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Manage Options (Values of Your Field) </item>
                <!-- <item name="visible" xsi:type="boolean">false</item> -->
                <item name="component" xsi:type="string">Magento_Ui/js/dynamic-rows/dynamic-rows</item>
                <item name="template" xsi:type="string">Magento_Backend/dynamic-rows/grid</item>
                <item name="componentType" xsi:type="string">dynamicRows</item>
                <item name="recordTemplate" xsi:type="string">record</item>
                <item name="deleteButtonLabel" xsi:type="string">Remove</item>
                <item name="addButtonLabel" xsi:type="string">Add New</item>
                <item name="deleteProperty" xsi:type="boolean">false</item>
                <item name="dndConfig" xsi:type="array">
                    <item name="enabled" xsi:type="boolean">false</item>
                </item>
            </item>
        </argument>
        <container name="record">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Label</item>
                    <item name="component" xsi:type="string" translate="true">Magento_Ui/js/dynamic-rows/record</item>
                    <item name="isTemplate" xsi:type="boolean">true</item>
                    <item name="is_collection" xsi:type="boolean">true</item>
                    <item name="showFallbackReset" xsi:type="boolean">false</item>
                </item>
            </argument>
            <field name="label">
                <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">Label</item>
                        <item name="formElement" xsi:type="string">input</item>
                        <item name="source" xsi:type="string">customform</item>
                        <item name="dataScope" xsi:type="string">label</item>
                    </item>
                </argument>
            </field>
            <field name="value">
                <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">Value</item>
                        <item name="formElement" xsi:type="string">input</item>
                        <item name="source" xsi:type="string">customform</item>
                        <item name="dataScope" xsi:type="string">value</item>
                    </item>
                </argument>
            </field>
            <actionDelete>
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="componentType" xsi:type="string">actionDelete</item>
                        <item name="dataType" xsi:type="string">text</item>
                        <item name="fit" xsi:type="boolean">false</item>
                        <item name="label" xsi:type="string">Actions</item>
                        <item name="additionalClasses" xsi:type="string">data-grid-actions-cell</item>
                        <item name="template" xsi:type="string">Magento_Backend/dynamic-rows/cells/action-delete</item>
                    </item>
                </argument>
            </actionDelete>
        </container>
    </container>
</fieldset>
</form>

Js file:

   define([
    'underscore',
    'uiRegistry',
    'Magento_Ui/js/form/element/select',
    'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
    'use strict';
    return select.extend({  

        initialize: function (){

            var field1 = uiRegistry.get('index = fieldset_multiple_options');

            var fieldtype = this._super().initialValue; 
            if (fieldtype == '2') {
                field1.show();               
            } else{
               field1.hide();
            }
            return this;

        },      

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        onUpdate: function (value) {
            var field1 = uiRegistry.get('index = fieldset_multiple_options');
            if (value == '2') {
                field1.show();               
            } else{
               field1.hide();
            }
            return this._super();
        },
    });
});

Your Answer

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

Browse other questions tagged or ask your own question.