How to show/hide UiComponent form field on based of new/edit mode
-
29-03-2021 - |
Pergunta
I want to show shortcode field once record inserted. else on new record is should be hidden.
Ui Component form field xml:
<field name="shortcode">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="visible" xsi:type="boolean">false</item>
<item name="disabled" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Shortcode</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">banner</item>
<item name="sortOrder" xsi:type="number">10</item>
<item name="dataScope" xsi:type="string">shortcode</item>
<item name="notice" xsi:type="string" translate="true">Copy this shortcode to CMS Block/Page to show banner slider</item>
<item name="component" xsi:type="string">Rchauhan_BannerSlider/js/form/element/toggle-checkbox-category</item>
</item>
</argument>
</field>
toggle-checkbox-category.js:
define([
'jquery',
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/text',
'Magento_Ui/js/modal/modal'
], function ($, _, uiRegistry, textbox, modal) {
'use strict';
return textbox.extend({
/**
* Choose notice on initialization
*
* @returns {*|void|Element}
*/
initialize: function (value) {
this._super();
setTimeout(function () {
let field1 = uiRegistry.get('index = entity_id');
let field2 = uiRegistry.get('index = shortcode');
if (field1.getInitialValue()) {
field2.show();
} else {
field2.hide();
}
}, 2000)
return this;
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
var field1 = uiRegistry.get('index = entity_id');
var field2 = uiRegistry.get('index = shortcode');
console.log(field1.getInitialValue());
if (field1.getInitialValue()) {
field2.show();
} else {
field1.hide();
}
return this._super();
},
});
});
Any suggestions would be welcome. Thanks.
Solução
You need to replace this below line in your xml file :
<item name="visible" xsi:type="boolean">${ $.provider }:data.hide_field</item>
and then, add condition in your dataprovider file like below way :
/**
* @var \Magento\Framework\App\RequestInterface
*/
protected $request;
public function __construct(
\Magento\Framework\App\RequestInterface $request
){
$this->request = $request;
}
public function getData(){
$id = $this->request->getParam('entity_id');
if($id)
$this->loadedData[$id]['hide_field'] = true;
else
$this->loadedData[$id]['hide_field'] = false;
return $this->loadedData;
}
You need to change code based on your requirement in your module's dataprovider file.
Reference : Magento\Catalog\Model\Category\DataProvider.php
Licenciado em: CC-BY-SA com atribuição
Não afiliado a magento.stackexchange