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();
},
});
});