Magento 2.1 How do I create form component field custom depends on another field value?In Magento2 For Ui...
How did Alan Turing break the enigma code using the hint given by the lady in the bar?
Accountant/ lawyer will not return my call
'The literal of type int is out of range' con número enteros pequeños (2 dígitos)
Why would one plane in this picture not have gear down yet?
Why was Goose renamed from Chewie for the Captain Marvel film?
Is it possible to avoid unpacking when merging Association?
What are actual Tesla M60 models used by AWS?
Signed and unsigned numbers
Examples of a statistic that is not independent of sample's distribution?
Is it "Vierergruppe" or "Viergruppe", or is there a distinction?
Does this video of collapsing warehouse shelves show a real incident?
Can you reject a postdoc offer after the PI has paid a large sum for flights/accommodation for your visit?
Are tamper resistant receptacles really safer?
UART pins to unpowered MCU?
Accepted offer letter, position changed
Counting all the hearts
If I receive an SOS signal, what is the proper response?
Do recommendation systems necessarily use machine learning algorithms?
How can I ensure my trip to the UK will not have to be cancelled because of Brexit?
How many characters using PHB rules does it take to be able to have access to any PHB spell at the start of an adventuring day?
Declaring and defining template, and specialising them
How are showroom/display vehicles prepared?
They call me Inspector Morse
Motivation for Zeta Function of an Algebraic Variety
Magento 2.1 How do I create form component field custom depends on another field value?
In Magento2 For Ui component Form select Field,Dependency with another FieldMagento 2 admin form creationMagento 2 Field dependency in ui formMagento 2 Admin Form FieldChange value of text field in admin form based on option selected in dropdownMagento 2 Admin Ui form fieldset dependencyGet text field value Ui ComponentMagento 2.3 : using swicher configDependent dropdown on magento2 using ui_componentHow to create custom modal ui form component with multiple fieldset and fielduiComponent Form. How to show data from DB tableMagento 2 : How can I upload files of dynamically added file input fields in the adminMagento 2.1 UI Component Image upload formMagento 2.1 Ui Component form field Token inputRead only field in UI component form Magento 2An Error while add a complex component modal as insertlisting for add dynamic row in my ui-component admin formSet default values for a multiselect ui-componentHow to create dynamic rows field in custom Ui component formHow to hide particular admin form field(UI Component) based on the value of select field?
I have one field select which has some options. One of them will have some fields depend on value, another field will hidden. I have copied and extended component js for my field but it didn't work or I did it wrong way. Ui component supports this feature? How I can achieve this?
Below is what I have done:
<field name="field1">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">NamespaceModuleNameModelConfigSourceOptions</item>
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Field name</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">number</item>
<item name="formElement" xsi:type="string">select</item>
<item name="source" xsi:type="string">item</item>
<item name="dataScope" xsi:type="string">field1</item>
<item name="component" xsi:type="string">Pathto/js/form/element/options</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="field2Depend1"></field>
<field name="field3Depend1"></field>
jsComponent js/form/element/options
:
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select) {
'use strict';
return select.extend({
onChange: function () {
this.enableDisableFields();
},
/**
* Enable/disable fields on Coupons tab
*/
enableDisableFields: function () {
// code check field
}
});
});
magento-2.1 uicomponent ui-form
add a comment |
I have one field select which has some options. One of them will have some fields depend on value, another field will hidden. I have copied and extended component js for my field but it didn't work or I did it wrong way. Ui component supports this feature? How I can achieve this?
Below is what I have done:
<field name="field1">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">NamespaceModuleNameModelConfigSourceOptions</item>
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Field name</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">number</item>
<item name="formElement" xsi:type="string">select</item>
<item name="source" xsi:type="string">item</item>
<item name="dataScope" xsi:type="string">field1</item>
<item name="component" xsi:type="string">Pathto/js/form/element/options</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="field2Depend1"></field>
<field name="field3Depend1"></field>
jsComponent js/form/element/options
:
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select) {
'use strict';
return select.extend({
onChange: function () {
this.enableDisableFields();
},
/**
* Enable/disable fields on Coupons tab
*/
enableDisableFields: function () {
// code check field
}
});
});
magento-2.1 uicomponent ui-form
add a comment |
I have one field select which has some options. One of them will have some fields depend on value, another field will hidden. I have copied and extended component js for my field but it didn't work or I did it wrong way. Ui component supports this feature? How I can achieve this?
Below is what I have done:
<field name="field1">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">NamespaceModuleNameModelConfigSourceOptions</item>
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Field name</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">number</item>
<item name="formElement" xsi:type="string">select</item>
<item name="source" xsi:type="string">item</item>
<item name="dataScope" xsi:type="string">field1</item>
<item name="component" xsi:type="string">Pathto/js/form/element/options</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="field2Depend1"></field>
<field name="field3Depend1"></field>
jsComponent js/form/element/options
:
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select) {
'use strict';
return select.extend({
onChange: function () {
this.enableDisableFields();
},
/**
* Enable/disable fields on Coupons tab
*/
enableDisableFields: function () {
// code check field
}
});
});
magento-2.1 uicomponent ui-form
I have one field select which has some options. One of them will have some fields depend on value, another field will hidden. I have copied and extended component js for my field but it didn't work or I did it wrong way. Ui component supports this feature? How I can achieve this?
Below is what I have done:
<field name="field1">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">NamespaceModuleNameModelConfigSourceOptions</item>
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Field name</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">number</item>
<item name="formElement" xsi:type="string">select</item>
<item name="source" xsi:type="string">item</item>
<item name="dataScope" xsi:type="string">field1</item>
<item name="component" xsi:type="string">Pathto/js/form/element/options</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="field2Depend1"></field>
<field name="field3Depend1"></field>
jsComponent js/form/element/options
:
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select) {
'use strict';
return select.extend({
onChange: function () {
this.enableDisableFields();
},
/**
* Enable/disable fields on Coupons tab
*/
enableDisableFields: function () {
// code check field
}
});
});
magento-2.1 uicomponent ui-form
magento-2.1 uicomponent ui-form
edited 11 mins ago
magefms
1,310224
1,310224
asked Aug 18 '16 at 17:16
mrtuvnmrtuvn
1,8341729
1,8341729
add a comment |
add a comment |
7 Answers
7
active
oldest
votes
Try this (Note: Don't forget to replace the line "Namespace" and the line "ModuleName" with your values):
<field name="field1">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">NamespaceModuleNameModelConfigSourceOptions</item>
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Parent Option</item>
<item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">number</item>
<item name="formElement" xsi:type="string">select</item>
<item name="source" xsi:type="string">item</item>
<item name="dataScope" xsi:type="string">field1</item>
<item name="sortOrder" xsi:type="number">210</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="field2Depend1">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Field 1</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="sortOrder" xsi:type="number">220</item>
<item name="breakLine" xsi:type="boolean">true</item>
<item name="visibleValue" xsi:type="string">2</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>
<field name="field3Depend1">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Field 2</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="sortOrder" xsi:type="number">230</item>
<item name="breakLine" xsi:type="boolean">true</item>
<item name="visibleValue" xsi:type="string">0</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>
Where:
- The child elements visibility is set by default as
false
; - The
visibleValue
- isfield1
value when element should be
visible;
NamespaceModuleNameModelConfigSourceOptions
namespace NamespaceModuleNameModelConfigSource;
use MagentoFrameworkOptionArrayInterface;
class Options implements ArrayInterface
{
/**
* @return array
*/
public function toOptionArray()
{
$options = [
0 => [
'label' => 'Please select',
'value' => 0
],
1 => [
'label' => 'Option 1',
'value' => 1
],
2 => [
'label' => 'Option 2',
'value' => 2
],
3 => [
'label' => 'Option 3',
'value' => 3
],
];
return $options;
}
}
app/code/Namespace/ModuleName/view/adminhtml/web/js/form/element/options.js
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
console.log('Selected Value: ' + value);
var field1 = uiRegistry.get('index = field2Depend1');
if (field1.visibleValue == value) {
field1.show();
} else {
field1.hide();
}
var field2 = uiRegistry.get('index = field3Depend1');
if (field2.visibleValue == value) {
field2.show();
} else {
field2.hide();
}
return this._super();
},
});
});
Result:
Value 0 selected:
Value 1 selected:
Value 2 selected:
Value 3 selected:
PS: Possibly it not the best solution, but it shall help you
onUpdate is working well, but how to make onLoad? How to get field1.value?
– zhartaunik
Nov 11 '16 at 14:05
@zhartaunik I think you should use theinitialize
method in your case becouse ui-element has noonLoad
method. You can get any field value in any place from the registry using the input index key:uiRegistry.get('index = field1')
. In case you have more questions, please, address me in skype (sarj1989) it will be easier to communicate in Russian.
– Siarhey Uchukhlebau
Nov 11 '16 at 14:26
Thanks @Siarhey. I decided to use initialize. this._super, than add necessary verification.
– zhartaunik
Nov 11 '16 at 14:30
1
I can't get field value when i am using initialize method value is "undefined".
– Saurabh Taletiya
Feb 2 '17 at 11:37
@SaurabhJain Can you show your code (xml)?
– Siarhey Uchukhlebau
Feb 3 '17 at 7:08
|
show 11 more comments
The solution suggested by Magentix will throw an error from time to time when using initialize. It depends on the time it takes for your browser to render the components. In order to fix it you could use setTimeout.
See the code below:
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* Extends instance with defaults, extends config with formatted values
* and options, and invokes initialize method of AbstractElement class.
* If instance's 'customEntry' property is set to true, calls 'initInput'
*/
initialize: function () {
this._super();
this.resetVisibility();
return this;
},
toggleVisibilityOnRender: function (visibility, time) {
var field = uiRegistry.get('index = field_to_toggle');
if(field !== undefined) {
if(visibility == 1) {
field.show();
} else {
field.hide();
}
return;
}
else {
var self = this;
setTimeout(function() {
self.toggleVisibilityOnRender(visibility, time);
}, time);
}
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
if (value == 1) {
this.showField();
} else {
this.hideField();
}
return this._super();
},
resetVisibility: function () {
if (this.value() == 1) {
this.showField();
} else {
this.hideField();
}
},
showField: function () {
this.toggleVisibilityOnRender(1, 1000);
},
hideField: function () {
this.toggleVisibilityOnRender(0, 1000);
}
});
});
Its working properly.
– Dhaduk Mitesh
Oct 10 '18 at 6:16
add a comment |
There's a lot of answers for this question, but most of them make either make assumptions on whether the uiRegistry is fully loaded, or use setTimeout
to clear the call stack, and wait for the next eventloop (which in my opinion is still the wrong way to do it - since you can't be sure when the other ui components have loaded - correct me if I'm wrong).
Firstly, of course, add your custom JS component to the field config (see other answers for details):
<item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>
Then, here's the custom UI component that hides or shows the dependent fields - with comments to explain what's happening.
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select'
], function (_, uiRegistry, select) {
'use strict';
return select.extend({
/**
* Array of field names that depend on the value of
* this UI component.
*/
dependentFieldNames: [
'my_field_name1',
'my_field_name2'
],
/**
* Reference storage for dependent fields. We're caching this
* because we don't want to query the UI registry so often.
*/
dependentFields : [],
/**
* Initialize field component, and store a reference to the dependent fields.
*/
initialize: function() {
this._super();
// We're creating a promise that resolves when we're sure that all our dependent
// UI components have been loaded. We're also binding our callback because
// we're making use of `this`
uiRegistry.promise(this.dependentFieldNames).done(_.bind(function() {
// Let's store the arguments (the UI Components we queried for) in our object
this.dependentFields = arguments;
// Set the initial visibility of our fields.
this.processDependentFieldVisibility(parseInt(this.initialValue));
}, this));
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
// We're calling parseInt, because in JS "0" evaluates to True
this.processDependentFieldVisibility(parseInt(value));
return this._super();
},
/**
* Shows or hides dependent fields.
*
* @param visibility
*/
processDependentFieldVisibility: function (visibility) {
var method = 'hide';
if (visibility) {
method = 'show';
}
// Underscore's invoke, calls the passed method on all the objects in our array
_.invoke(this.dependentFields, method);
}
});
});
add a comment |
This is an old question with multiple answers that work, however I have discovered a solution using what Magento provides (as of 2.1.0) without the need for extending components. As multiple questions have been marked as duplicate and directed here I thought it would be beneficial to provide some information on this option.
All form element ui components that extend Magento_Ui/js/form/element/abstract.js
have a switcherConfig
setting available for purposes such as hiding/showing elements as well as other actions. The switcher
component can be found at Magento_Ui/js/form/switcher for the curious. You can find examples of it being used in sales_rule_form.xml and catalog_rule_form.xml. Of course if you are using your own custom component already you can still use this as long as your component eventually extends abstract
which appears to be the case based on the example code provided in the question.
Now for a more specific example to answer the original question.
In Namespace/ModuleName/view/adminhtml/ui_component/your_entity_form.xml
you simply need to add the following to the field's settings
that does the controlling (i.e. the field that determines which fields are hidden/visible). In your example this would be field1
.
<field name="field1">
<argument name="data" xsi:type="array">
...
</argument>
<settings>
<switcherConfig>
<rules>
<rule name="0">
<value>2</value>
<actions>
<action name="0">
<target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
<callback>show</callback>
</action>
<action name="1">
<target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
<callback>hide</callback>
</action>
</actions>
</rule>
<rule name="1">
<value>3</value>
<actions>
<action name="0">
<target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
<callback>hide</callback>
</action>
<action name="1">
<target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
<callback>show</callback>
</action>
</actions>
</rule>
</rules>
<enabled>true</enabled>
</switcherConfig>
</settings>
</field>
Let's break it down a little. The switcher
component contains an array of rules
which is what we're building out here. Each <rule>
has a name which is a number in this example. This name is the array key/index for this item. We're using numbers as array indexes. Strings should work too but I haven't tested this theory.
Inside each rule
we pass two arguments.
value
- This is the value offield1
which should trigger theactions
defined below.
actions
- Here we have another array. These are the actions to be triggered when this rule's conditions are met. Again, eachaction
's name is just the array index/key of that item.
Now each action
has two arguments as well (with an optional 3rd).
target
- This is the element you wish to manipulate under this action. If you aren't familiar with how ui_component element names are composed in Magento you can check out Alan Storm's article. It's basically something like{component_name}.{component_name}.{fieldset_name}.{field_name}
in this example.
callback
- Here is the action to be taken on the above mentionedtarget
. This callback should be a function that is available on the element targeted. Our example useshide
andshow
. This is where you can start to expand on the functionality available. Thecatalog_rule_form.xml
example I mentioned earlier usessetValidation
if you wish to see a different example.- You can also add
<params>
to anyaction
that calls for them. You can see this in thecatalog_rule_form.xml
example as well.
Finally the last item inside switcherConfig
is <enabled>true</enabled>
. This should be pretty straight forward, it's a Boolean to enable/disable the switcher functionality we just implemented.
And we're done. So using the example above what you should see is field field2Depend1
displayed if you choose an option with value 2
on field1
, and field3Depend1
displayed if you choose an option with value 3
.
I have tested this example using only hide
and show
on a required field and it does appear to take visibility into account for validation. In other words, if field2Depend1
is required it will only be required when visible. No need for further configuration for that to work.
Hope this provides some help for anyone looking for a more out-of-the-box solution.
add a comment |
If you have got error like Field is Undefined
when initialized field visibility, Use setTimeout()
to load that depended fields:
fieldDepend: function (value) {
setTimeout(function(){
var field1 = uiRegistry.get('index = field2');
if (field1.visibleValue == value) {
field1.show();
} else {
field1.hide();
}
var field2 = uiRegistry.get('index = field3');
if (field2.visibleValue == value) {
field2.show();
} else {
field2.hide();
}
}, 1);
return this._super();
},
Instead of setTimeout, use asynchronous method of getting dependencies instead:uiRegistry.get('q', function(field) { ... }));
– Erfan
Sep 29 '17 at 7:12
Insted of suggesting in comment and down-vote my answer you can Post here your answer bro, This is not the way to devote any answer, You are just suggesting different way, my answer is not wrong. @Erfan. your down-vote make wrong impression.
– Ronak Chauhan
Sep 29 '17 at 7:33
@RonakChauhan - Agreed on point !!! your answer is not incorrect , different people have different opinion , suggestion and solution. Your answer is also correct !!
– Manthan Dave
Sep 29 '17 at 7:40
Waiting one second to initialise, and blocking initialisation is quite clearly the wrong way to do it. How do you even know your dependencies will be loaded in one second? Why won't it be two seconds? You're making an assumption here, that's best avoided.
– Erfan
Sep 29 '17 at 7:51
I have not set 1 second here, Its in millisecond, SetTimeout() will just load my code after load the page, And if you have your answer then you can post it. Down-vote someone's answer is not the way to prove yourself right!@Erfan
– Ronak Chauhan
Sep 29 '17 at 8:15
|
show 5 more comments
Custom component with init:
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* Init
*/
initialize: function () {
this._super();
this.fieldDepend(this.value());
return this;
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
this.fieldDepend(value);
return this._super();
},
/**
* Update field dependency
*
* @param {String} value
*/
fieldDepend: function (value) {
var field = uiRegistry.get('index = field_to_toggle');
if (value == 'xxxxx') {
field.show();
} else {
field.hide();
}
return this;
}
});
});
it's show "field is undefined" after using initialize function.
– Prince Patel
Apr 17 '17 at 13:28
1
UsesetTimeout()
infieldDepend()
because depended is not loaded yet.
– Ronak Chauhan
Sep 9 '17 at 12:57
add a comment |
Just in case someone struggles with the Erfan solution, you have to pass the full path to the fields in dependentFieldNames
, e.g.:
dependentFieldNames: [
'form_name.form_name.fieldset.field_name',
'form_name.form_name.fieldset.field_name1',
'form_name.form_name.fieldset.field_name2',
'form_name.form_name.fieldset.field_name3'
],
I'm not sure why form_name has to be 2 times, but this has worked for me.
To debug this I put console.log(query);
in static/adminhtml/Magento/backend/en_US/Magento_Ui/js/lib/registry/registry.js
223rd line ( the get() function just before this._addRequest(query, callback)
)
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f132020%2fmagento-2-1-how-do-i-create-form-component-field-custom-depends-on-another-field%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
7 Answers
7
active
oldest
votes
7 Answers
7
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try this (Note: Don't forget to replace the line "Namespace" and the line "ModuleName" with your values):
<field name="field1">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">NamespaceModuleNameModelConfigSourceOptions</item>
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Parent Option</item>
<item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">number</item>
<item name="formElement" xsi:type="string">select</item>
<item name="source" xsi:type="string">item</item>
<item name="dataScope" xsi:type="string">field1</item>
<item name="sortOrder" xsi:type="number">210</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="field2Depend1">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Field 1</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="sortOrder" xsi:type="number">220</item>
<item name="breakLine" xsi:type="boolean">true</item>
<item name="visibleValue" xsi:type="string">2</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>
<field name="field3Depend1">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Field 2</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="sortOrder" xsi:type="number">230</item>
<item name="breakLine" xsi:type="boolean">true</item>
<item name="visibleValue" xsi:type="string">0</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>
Where:
- The child elements visibility is set by default as
false
; - The
visibleValue
- isfield1
value when element should be
visible;
NamespaceModuleNameModelConfigSourceOptions
namespace NamespaceModuleNameModelConfigSource;
use MagentoFrameworkOptionArrayInterface;
class Options implements ArrayInterface
{
/**
* @return array
*/
public function toOptionArray()
{
$options = [
0 => [
'label' => 'Please select',
'value' => 0
],
1 => [
'label' => 'Option 1',
'value' => 1
],
2 => [
'label' => 'Option 2',
'value' => 2
],
3 => [
'label' => 'Option 3',
'value' => 3
],
];
return $options;
}
}
app/code/Namespace/ModuleName/view/adminhtml/web/js/form/element/options.js
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
console.log('Selected Value: ' + value);
var field1 = uiRegistry.get('index = field2Depend1');
if (field1.visibleValue == value) {
field1.show();
} else {
field1.hide();
}
var field2 = uiRegistry.get('index = field3Depend1');
if (field2.visibleValue == value) {
field2.show();
} else {
field2.hide();
}
return this._super();
},
});
});
Result:
Value 0 selected:
Value 1 selected:
Value 2 selected:
Value 3 selected:
PS: Possibly it not the best solution, but it shall help you
onUpdate is working well, but how to make onLoad? How to get field1.value?
– zhartaunik
Nov 11 '16 at 14:05
@zhartaunik I think you should use theinitialize
method in your case becouse ui-element has noonLoad
method. You can get any field value in any place from the registry using the input index key:uiRegistry.get('index = field1')
. In case you have more questions, please, address me in skype (sarj1989) it will be easier to communicate in Russian.
– Siarhey Uchukhlebau
Nov 11 '16 at 14:26
Thanks @Siarhey. I decided to use initialize. this._super, than add necessary verification.
– zhartaunik
Nov 11 '16 at 14:30
1
I can't get field value when i am using initialize method value is "undefined".
– Saurabh Taletiya
Feb 2 '17 at 11:37
@SaurabhJain Can you show your code (xml)?
– Siarhey Uchukhlebau
Feb 3 '17 at 7:08
|
show 11 more comments
Try this (Note: Don't forget to replace the line "Namespace" and the line "ModuleName" with your values):
<field name="field1">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">NamespaceModuleNameModelConfigSourceOptions</item>
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Parent Option</item>
<item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">number</item>
<item name="formElement" xsi:type="string">select</item>
<item name="source" xsi:type="string">item</item>
<item name="dataScope" xsi:type="string">field1</item>
<item name="sortOrder" xsi:type="number">210</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="field2Depend1">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Field 1</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="sortOrder" xsi:type="number">220</item>
<item name="breakLine" xsi:type="boolean">true</item>
<item name="visibleValue" xsi:type="string">2</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>
<field name="field3Depend1">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Field 2</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="sortOrder" xsi:type="number">230</item>
<item name="breakLine" xsi:type="boolean">true</item>
<item name="visibleValue" xsi:type="string">0</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>
Where:
- The child elements visibility is set by default as
false
; - The
visibleValue
- isfield1
value when element should be
visible;
NamespaceModuleNameModelConfigSourceOptions
namespace NamespaceModuleNameModelConfigSource;
use MagentoFrameworkOptionArrayInterface;
class Options implements ArrayInterface
{
/**
* @return array
*/
public function toOptionArray()
{
$options = [
0 => [
'label' => 'Please select',
'value' => 0
],
1 => [
'label' => 'Option 1',
'value' => 1
],
2 => [
'label' => 'Option 2',
'value' => 2
],
3 => [
'label' => 'Option 3',
'value' => 3
],
];
return $options;
}
}
app/code/Namespace/ModuleName/view/adminhtml/web/js/form/element/options.js
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
console.log('Selected Value: ' + value);
var field1 = uiRegistry.get('index = field2Depend1');
if (field1.visibleValue == value) {
field1.show();
} else {
field1.hide();
}
var field2 = uiRegistry.get('index = field3Depend1');
if (field2.visibleValue == value) {
field2.show();
} else {
field2.hide();
}
return this._super();
},
});
});
Result:
Value 0 selected:
Value 1 selected:
Value 2 selected:
Value 3 selected:
PS: Possibly it not the best solution, but it shall help you
onUpdate is working well, but how to make onLoad? How to get field1.value?
– zhartaunik
Nov 11 '16 at 14:05
@zhartaunik I think you should use theinitialize
method in your case becouse ui-element has noonLoad
method. You can get any field value in any place from the registry using the input index key:uiRegistry.get('index = field1')
. In case you have more questions, please, address me in skype (sarj1989) it will be easier to communicate in Russian.
– Siarhey Uchukhlebau
Nov 11 '16 at 14:26
Thanks @Siarhey. I decided to use initialize. this._super, than add necessary verification.
– zhartaunik
Nov 11 '16 at 14:30
1
I can't get field value when i am using initialize method value is "undefined".
– Saurabh Taletiya
Feb 2 '17 at 11:37
@SaurabhJain Can you show your code (xml)?
– Siarhey Uchukhlebau
Feb 3 '17 at 7:08
|
show 11 more comments
Try this (Note: Don't forget to replace the line "Namespace" and the line "ModuleName" with your values):
<field name="field1">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">NamespaceModuleNameModelConfigSourceOptions</item>
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Parent Option</item>
<item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">number</item>
<item name="formElement" xsi:type="string">select</item>
<item name="source" xsi:type="string">item</item>
<item name="dataScope" xsi:type="string">field1</item>
<item name="sortOrder" xsi:type="number">210</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="field2Depend1">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Field 1</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="sortOrder" xsi:type="number">220</item>
<item name="breakLine" xsi:type="boolean">true</item>
<item name="visibleValue" xsi:type="string">2</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>
<field name="field3Depend1">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Field 2</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="sortOrder" xsi:type="number">230</item>
<item name="breakLine" xsi:type="boolean">true</item>
<item name="visibleValue" xsi:type="string">0</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>
Where:
- The child elements visibility is set by default as
false
; - The
visibleValue
- isfield1
value when element should be
visible;
NamespaceModuleNameModelConfigSourceOptions
namespace NamespaceModuleNameModelConfigSource;
use MagentoFrameworkOptionArrayInterface;
class Options implements ArrayInterface
{
/**
* @return array
*/
public function toOptionArray()
{
$options = [
0 => [
'label' => 'Please select',
'value' => 0
],
1 => [
'label' => 'Option 1',
'value' => 1
],
2 => [
'label' => 'Option 2',
'value' => 2
],
3 => [
'label' => 'Option 3',
'value' => 3
],
];
return $options;
}
}
app/code/Namespace/ModuleName/view/adminhtml/web/js/form/element/options.js
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
console.log('Selected Value: ' + value);
var field1 = uiRegistry.get('index = field2Depend1');
if (field1.visibleValue == value) {
field1.show();
} else {
field1.hide();
}
var field2 = uiRegistry.get('index = field3Depend1');
if (field2.visibleValue == value) {
field2.show();
} else {
field2.hide();
}
return this._super();
},
});
});
Result:
Value 0 selected:
Value 1 selected:
Value 2 selected:
Value 3 selected:
PS: Possibly it not the best solution, but it shall help you
Try this (Note: Don't forget to replace the line "Namespace" and the line "ModuleName" with your values):
<field name="field1">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">NamespaceModuleNameModelConfigSourceOptions</item>
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Parent Option</item>
<item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>
<item name="visible" xsi:type="boolean">true</item>
<item name="dataType" xsi:type="string">number</item>
<item name="formElement" xsi:type="string">select</item>
<item name="source" xsi:type="string">item</item>
<item name="dataScope" xsi:type="string">field1</item>
<item name="sortOrder" xsi:type="number">210</item>
<item name="validation" xsi:type="array">
<item name="required-entry" xsi:type="boolean">true</item>
</item>
</item>
</argument>
</field>
<field name="field2Depend1">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Field 1</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="sortOrder" xsi:type="number">220</item>
<item name="breakLine" xsi:type="boolean">true</item>
<item name="visibleValue" xsi:type="string">2</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>
<field name="field3Depend1">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string">Field 2</item>
<item name="dataType" xsi:type="string">text</item>
<item name="formElement" xsi:type="string">input</item>
<item name="source" xsi:type="string">item</item>
<item name="sortOrder" xsi:type="number">230</item>
<item name="breakLine" xsi:type="boolean">true</item>
<item name="visibleValue" xsi:type="string">0</item>
<item name="visible" xsi:type="boolean">false</item>
</item>
</argument>
</field>
Where:
- The child elements visibility is set by default as
false
; - The
visibleValue
- isfield1
value when element should be
visible;
NamespaceModuleNameModelConfigSourceOptions
namespace NamespaceModuleNameModelConfigSource;
use MagentoFrameworkOptionArrayInterface;
class Options implements ArrayInterface
{
/**
* @return array
*/
public function toOptionArray()
{
$options = [
0 => [
'label' => 'Please select',
'value' => 0
],
1 => [
'label' => 'Option 1',
'value' => 1
],
2 => [
'label' => 'Option 2',
'value' => 2
],
3 => [
'label' => 'Option 3',
'value' => 3
],
];
return $options;
}
}
app/code/Namespace/ModuleName/view/adminhtml/web/js/form/element/options.js
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
console.log('Selected Value: ' + value);
var field1 = uiRegistry.get('index = field2Depend1');
if (field1.visibleValue == value) {
field1.show();
} else {
field1.hide();
}
var field2 = uiRegistry.get('index = field3Depend1');
if (field2.visibleValue == value) {
field2.show();
} else {
field2.hide();
}
return this._super();
},
});
});
Result:
Value 0 selected:
Value 1 selected:
Value 2 selected:
Value 3 selected:
PS: Possibly it not the best solution, but it shall help you
answered Aug 23 '16 at 15:05
Siarhey UchukhlebauSiarhey Uchukhlebau
9,87192858
9,87192858
onUpdate is working well, but how to make onLoad? How to get field1.value?
– zhartaunik
Nov 11 '16 at 14:05
@zhartaunik I think you should use theinitialize
method in your case becouse ui-element has noonLoad
method. You can get any field value in any place from the registry using the input index key:uiRegistry.get('index = field1')
. In case you have more questions, please, address me in skype (sarj1989) it will be easier to communicate in Russian.
– Siarhey Uchukhlebau
Nov 11 '16 at 14:26
Thanks @Siarhey. I decided to use initialize. this._super, than add necessary verification.
– zhartaunik
Nov 11 '16 at 14:30
1
I can't get field value when i am using initialize method value is "undefined".
– Saurabh Taletiya
Feb 2 '17 at 11:37
@SaurabhJain Can you show your code (xml)?
– Siarhey Uchukhlebau
Feb 3 '17 at 7:08
|
show 11 more comments
onUpdate is working well, but how to make onLoad? How to get field1.value?
– zhartaunik
Nov 11 '16 at 14:05
@zhartaunik I think you should use theinitialize
method in your case becouse ui-element has noonLoad
method. You can get any field value in any place from the registry using the input index key:uiRegistry.get('index = field1')
. In case you have more questions, please, address me in skype (sarj1989) it will be easier to communicate in Russian.
– Siarhey Uchukhlebau
Nov 11 '16 at 14:26
Thanks @Siarhey. I decided to use initialize. this._super, than add necessary verification.
– zhartaunik
Nov 11 '16 at 14:30
1
I can't get field value when i am using initialize method value is "undefined".
– Saurabh Taletiya
Feb 2 '17 at 11:37
@SaurabhJain Can you show your code (xml)?
– Siarhey Uchukhlebau
Feb 3 '17 at 7:08
onUpdate is working well, but how to make onLoad? How to get field1.value?
– zhartaunik
Nov 11 '16 at 14:05
onUpdate is working well, but how to make onLoad? How to get field1.value?
– zhartaunik
Nov 11 '16 at 14:05
@zhartaunik I think you should use the
initialize
method in your case becouse ui-element has no onLoad
method. You can get any field value in any place from the registry using the input index key: uiRegistry.get('index = field1')
. In case you have more questions, please, address me in skype (sarj1989) it will be easier to communicate in Russian.– Siarhey Uchukhlebau
Nov 11 '16 at 14:26
@zhartaunik I think you should use the
initialize
method in your case becouse ui-element has no onLoad
method. You can get any field value in any place from the registry using the input index key: uiRegistry.get('index = field1')
. In case you have more questions, please, address me in skype (sarj1989) it will be easier to communicate in Russian.– Siarhey Uchukhlebau
Nov 11 '16 at 14:26
Thanks @Siarhey. I decided to use initialize. this._super, than add necessary verification.
– zhartaunik
Nov 11 '16 at 14:30
Thanks @Siarhey. I decided to use initialize. this._super, than add necessary verification.
– zhartaunik
Nov 11 '16 at 14:30
1
1
I can't get field value when i am using initialize method value is "undefined".
– Saurabh Taletiya
Feb 2 '17 at 11:37
I can't get field value when i am using initialize method value is "undefined".
– Saurabh Taletiya
Feb 2 '17 at 11:37
@SaurabhJain Can you show your code (xml)?
– Siarhey Uchukhlebau
Feb 3 '17 at 7:08
@SaurabhJain Can you show your code (xml)?
– Siarhey Uchukhlebau
Feb 3 '17 at 7:08
|
show 11 more comments
The solution suggested by Magentix will throw an error from time to time when using initialize. It depends on the time it takes for your browser to render the components. In order to fix it you could use setTimeout.
See the code below:
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* Extends instance with defaults, extends config with formatted values
* and options, and invokes initialize method of AbstractElement class.
* If instance's 'customEntry' property is set to true, calls 'initInput'
*/
initialize: function () {
this._super();
this.resetVisibility();
return this;
},
toggleVisibilityOnRender: function (visibility, time) {
var field = uiRegistry.get('index = field_to_toggle');
if(field !== undefined) {
if(visibility == 1) {
field.show();
} else {
field.hide();
}
return;
}
else {
var self = this;
setTimeout(function() {
self.toggleVisibilityOnRender(visibility, time);
}, time);
}
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
if (value == 1) {
this.showField();
} else {
this.hideField();
}
return this._super();
},
resetVisibility: function () {
if (this.value() == 1) {
this.showField();
} else {
this.hideField();
}
},
showField: function () {
this.toggleVisibilityOnRender(1, 1000);
},
hideField: function () {
this.toggleVisibilityOnRender(0, 1000);
}
});
});
Its working properly.
– Dhaduk Mitesh
Oct 10 '18 at 6:16
add a comment |
The solution suggested by Magentix will throw an error from time to time when using initialize. It depends on the time it takes for your browser to render the components. In order to fix it you could use setTimeout.
See the code below:
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* Extends instance with defaults, extends config with formatted values
* and options, and invokes initialize method of AbstractElement class.
* If instance's 'customEntry' property is set to true, calls 'initInput'
*/
initialize: function () {
this._super();
this.resetVisibility();
return this;
},
toggleVisibilityOnRender: function (visibility, time) {
var field = uiRegistry.get('index = field_to_toggle');
if(field !== undefined) {
if(visibility == 1) {
field.show();
} else {
field.hide();
}
return;
}
else {
var self = this;
setTimeout(function() {
self.toggleVisibilityOnRender(visibility, time);
}, time);
}
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
if (value == 1) {
this.showField();
} else {
this.hideField();
}
return this._super();
},
resetVisibility: function () {
if (this.value() == 1) {
this.showField();
} else {
this.hideField();
}
},
showField: function () {
this.toggleVisibilityOnRender(1, 1000);
},
hideField: function () {
this.toggleVisibilityOnRender(0, 1000);
}
});
});
Its working properly.
– Dhaduk Mitesh
Oct 10 '18 at 6:16
add a comment |
The solution suggested by Magentix will throw an error from time to time when using initialize. It depends on the time it takes for your browser to render the components. In order to fix it you could use setTimeout.
See the code below:
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* Extends instance with defaults, extends config with formatted values
* and options, and invokes initialize method of AbstractElement class.
* If instance's 'customEntry' property is set to true, calls 'initInput'
*/
initialize: function () {
this._super();
this.resetVisibility();
return this;
},
toggleVisibilityOnRender: function (visibility, time) {
var field = uiRegistry.get('index = field_to_toggle');
if(field !== undefined) {
if(visibility == 1) {
field.show();
} else {
field.hide();
}
return;
}
else {
var self = this;
setTimeout(function() {
self.toggleVisibilityOnRender(visibility, time);
}, time);
}
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
if (value == 1) {
this.showField();
} else {
this.hideField();
}
return this._super();
},
resetVisibility: function () {
if (this.value() == 1) {
this.showField();
} else {
this.hideField();
}
},
showField: function () {
this.toggleVisibilityOnRender(1, 1000);
},
hideField: function () {
this.toggleVisibilityOnRender(0, 1000);
}
});
});
The solution suggested by Magentix will throw an error from time to time when using initialize. It depends on the time it takes for your browser to render the components. In order to fix it you could use setTimeout.
See the code below:
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* Extends instance with defaults, extends config with formatted values
* and options, and invokes initialize method of AbstractElement class.
* If instance's 'customEntry' property is set to true, calls 'initInput'
*/
initialize: function () {
this._super();
this.resetVisibility();
return this;
},
toggleVisibilityOnRender: function (visibility, time) {
var field = uiRegistry.get('index = field_to_toggle');
if(field !== undefined) {
if(visibility == 1) {
field.show();
} else {
field.hide();
}
return;
}
else {
var self = this;
setTimeout(function() {
self.toggleVisibilityOnRender(visibility, time);
}, time);
}
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
if (value == 1) {
this.showField();
} else {
this.hideField();
}
return this._super();
},
resetVisibility: function () {
if (this.value() == 1) {
this.showField();
} else {
this.hideField();
}
},
showField: function () {
this.toggleVisibilityOnRender(1, 1000);
},
hideField: function () {
this.toggleVisibilityOnRender(0, 1000);
}
});
});
edited May 30 '17 at 11:46
answered May 30 '17 at 10:26
MageinnMageinn
49128
49128
Its working properly.
– Dhaduk Mitesh
Oct 10 '18 at 6:16
add a comment |
Its working properly.
– Dhaduk Mitesh
Oct 10 '18 at 6:16
Its working properly.
– Dhaduk Mitesh
Oct 10 '18 at 6:16
Its working properly.
– Dhaduk Mitesh
Oct 10 '18 at 6:16
add a comment |
There's a lot of answers for this question, but most of them make either make assumptions on whether the uiRegistry is fully loaded, or use setTimeout
to clear the call stack, and wait for the next eventloop (which in my opinion is still the wrong way to do it - since you can't be sure when the other ui components have loaded - correct me if I'm wrong).
Firstly, of course, add your custom JS component to the field config (see other answers for details):
<item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>
Then, here's the custom UI component that hides or shows the dependent fields - with comments to explain what's happening.
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select'
], function (_, uiRegistry, select) {
'use strict';
return select.extend({
/**
* Array of field names that depend on the value of
* this UI component.
*/
dependentFieldNames: [
'my_field_name1',
'my_field_name2'
],
/**
* Reference storage for dependent fields. We're caching this
* because we don't want to query the UI registry so often.
*/
dependentFields : [],
/**
* Initialize field component, and store a reference to the dependent fields.
*/
initialize: function() {
this._super();
// We're creating a promise that resolves when we're sure that all our dependent
// UI components have been loaded. We're also binding our callback because
// we're making use of `this`
uiRegistry.promise(this.dependentFieldNames).done(_.bind(function() {
// Let's store the arguments (the UI Components we queried for) in our object
this.dependentFields = arguments;
// Set the initial visibility of our fields.
this.processDependentFieldVisibility(parseInt(this.initialValue));
}, this));
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
// We're calling parseInt, because in JS "0" evaluates to True
this.processDependentFieldVisibility(parseInt(value));
return this._super();
},
/**
* Shows or hides dependent fields.
*
* @param visibility
*/
processDependentFieldVisibility: function (visibility) {
var method = 'hide';
if (visibility) {
method = 'show';
}
// Underscore's invoke, calls the passed method on all the objects in our array
_.invoke(this.dependentFields, method);
}
});
});
add a comment |
There's a lot of answers for this question, but most of them make either make assumptions on whether the uiRegistry is fully loaded, or use setTimeout
to clear the call stack, and wait for the next eventloop (which in my opinion is still the wrong way to do it - since you can't be sure when the other ui components have loaded - correct me if I'm wrong).
Firstly, of course, add your custom JS component to the field config (see other answers for details):
<item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>
Then, here's the custom UI component that hides or shows the dependent fields - with comments to explain what's happening.
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select'
], function (_, uiRegistry, select) {
'use strict';
return select.extend({
/**
* Array of field names that depend on the value of
* this UI component.
*/
dependentFieldNames: [
'my_field_name1',
'my_field_name2'
],
/**
* Reference storage for dependent fields. We're caching this
* because we don't want to query the UI registry so often.
*/
dependentFields : [],
/**
* Initialize field component, and store a reference to the dependent fields.
*/
initialize: function() {
this._super();
// We're creating a promise that resolves when we're sure that all our dependent
// UI components have been loaded. We're also binding our callback because
// we're making use of `this`
uiRegistry.promise(this.dependentFieldNames).done(_.bind(function() {
// Let's store the arguments (the UI Components we queried for) in our object
this.dependentFields = arguments;
// Set the initial visibility of our fields.
this.processDependentFieldVisibility(parseInt(this.initialValue));
}, this));
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
// We're calling parseInt, because in JS "0" evaluates to True
this.processDependentFieldVisibility(parseInt(value));
return this._super();
},
/**
* Shows or hides dependent fields.
*
* @param visibility
*/
processDependentFieldVisibility: function (visibility) {
var method = 'hide';
if (visibility) {
method = 'show';
}
// Underscore's invoke, calls the passed method on all the objects in our array
_.invoke(this.dependentFields, method);
}
});
});
add a comment |
There's a lot of answers for this question, but most of them make either make assumptions on whether the uiRegistry is fully loaded, or use setTimeout
to clear the call stack, and wait for the next eventloop (which in my opinion is still the wrong way to do it - since you can't be sure when the other ui components have loaded - correct me if I'm wrong).
Firstly, of course, add your custom JS component to the field config (see other answers for details):
<item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>
Then, here's the custom UI component that hides or shows the dependent fields - with comments to explain what's happening.
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select'
], function (_, uiRegistry, select) {
'use strict';
return select.extend({
/**
* Array of field names that depend on the value of
* this UI component.
*/
dependentFieldNames: [
'my_field_name1',
'my_field_name2'
],
/**
* Reference storage for dependent fields. We're caching this
* because we don't want to query the UI registry so often.
*/
dependentFields : [],
/**
* Initialize field component, and store a reference to the dependent fields.
*/
initialize: function() {
this._super();
// We're creating a promise that resolves when we're sure that all our dependent
// UI components have been loaded. We're also binding our callback because
// we're making use of `this`
uiRegistry.promise(this.dependentFieldNames).done(_.bind(function() {
// Let's store the arguments (the UI Components we queried for) in our object
this.dependentFields = arguments;
// Set the initial visibility of our fields.
this.processDependentFieldVisibility(parseInt(this.initialValue));
}, this));
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
// We're calling parseInt, because in JS "0" evaluates to True
this.processDependentFieldVisibility(parseInt(value));
return this._super();
},
/**
* Shows or hides dependent fields.
*
* @param visibility
*/
processDependentFieldVisibility: function (visibility) {
var method = 'hide';
if (visibility) {
method = 'show';
}
// Underscore's invoke, calls the passed method on all the objects in our array
_.invoke(this.dependentFields, method);
}
});
});
There's a lot of answers for this question, but most of them make either make assumptions on whether the uiRegistry is fully loaded, or use setTimeout
to clear the call stack, and wait for the next eventloop (which in my opinion is still the wrong way to do it - since you can't be sure when the other ui components have loaded - correct me if I'm wrong).
Firstly, of course, add your custom JS component to the field config (see other answers for details):
<item name="component" xsi:type="string">Namespace_ModuleName/js/form/element/options</item>
Then, here's the custom UI component that hides or shows the dependent fields - with comments to explain what's happening.
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select'
], function (_, uiRegistry, select) {
'use strict';
return select.extend({
/**
* Array of field names that depend on the value of
* this UI component.
*/
dependentFieldNames: [
'my_field_name1',
'my_field_name2'
],
/**
* Reference storage for dependent fields. We're caching this
* because we don't want to query the UI registry so often.
*/
dependentFields : [],
/**
* Initialize field component, and store a reference to the dependent fields.
*/
initialize: function() {
this._super();
// We're creating a promise that resolves when we're sure that all our dependent
// UI components have been loaded. We're also binding our callback because
// we're making use of `this`
uiRegistry.promise(this.dependentFieldNames).done(_.bind(function() {
// Let's store the arguments (the UI Components we queried for) in our object
this.dependentFields = arguments;
// Set the initial visibility of our fields.
this.processDependentFieldVisibility(parseInt(this.initialValue));
}, this));
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
// We're calling parseInt, because in JS "0" evaluates to True
this.processDependentFieldVisibility(parseInt(value));
return this._super();
},
/**
* Shows or hides dependent fields.
*
* @param visibility
*/
processDependentFieldVisibility: function (visibility) {
var method = 'hide';
if (visibility) {
method = 'show';
}
// Underscore's invoke, calls the passed method on all the objects in our array
_.invoke(this.dependentFields, method);
}
});
});
answered Sep 30 '17 at 4:53
ErfanErfan
2,5441926
2,5441926
add a comment |
add a comment |
This is an old question with multiple answers that work, however I have discovered a solution using what Magento provides (as of 2.1.0) without the need for extending components. As multiple questions have been marked as duplicate and directed here I thought it would be beneficial to provide some information on this option.
All form element ui components that extend Magento_Ui/js/form/element/abstract.js
have a switcherConfig
setting available for purposes such as hiding/showing elements as well as other actions. The switcher
component can be found at Magento_Ui/js/form/switcher for the curious. You can find examples of it being used in sales_rule_form.xml and catalog_rule_form.xml. Of course if you are using your own custom component already you can still use this as long as your component eventually extends abstract
which appears to be the case based on the example code provided in the question.
Now for a more specific example to answer the original question.
In Namespace/ModuleName/view/adminhtml/ui_component/your_entity_form.xml
you simply need to add the following to the field's settings
that does the controlling (i.e. the field that determines which fields are hidden/visible). In your example this would be field1
.
<field name="field1">
<argument name="data" xsi:type="array">
...
</argument>
<settings>
<switcherConfig>
<rules>
<rule name="0">
<value>2</value>
<actions>
<action name="0">
<target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
<callback>show</callback>
</action>
<action name="1">
<target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
<callback>hide</callback>
</action>
</actions>
</rule>
<rule name="1">
<value>3</value>
<actions>
<action name="0">
<target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
<callback>hide</callback>
</action>
<action name="1">
<target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
<callback>show</callback>
</action>
</actions>
</rule>
</rules>
<enabled>true</enabled>
</switcherConfig>
</settings>
</field>
Let's break it down a little. The switcher
component contains an array of rules
which is what we're building out here. Each <rule>
has a name which is a number in this example. This name is the array key/index for this item. We're using numbers as array indexes. Strings should work too but I haven't tested this theory.
Inside each rule
we pass two arguments.
value
- This is the value offield1
which should trigger theactions
defined below.
actions
- Here we have another array. These are the actions to be triggered when this rule's conditions are met. Again, eachaction
's name is just the array index/key of that item.
Now each action
has two arguments as well (with an optional 3rd).
target
- This is the element you wish to manipulate under this action. If you aren't familiar with how ui_component element names are composed in Magento you can check out Alan Storm's article. It's basically something like{component_name}.{component_name}.{fieldset_name}.{field_name}
in this example.
callback
- Here is the action to be taken on the above mentionedtarget
. This callback should be a function that is available on the element targeted. Our example useshide
andshow
. This is where you can start to expand on the functionality available. Thecatalog_rule_form.xml
example I mentioned earlier usessetValidation
if you wish to see a different example.- You can also add
<params>
to anyaction
that calls for them. You can see this in thecatalog_rule_form.xml
example as well.
Finally the last item inside switcherConfig
is <enabled>true</enabled>
. This should be pretty straight forward, it's a Boolean to enable/disable the switcher functionality we just implemented.
And we're done. So using the example above what you should see is field field2Depend1
displayed if you choose an option with value 2
on field1
, and field3Depend1
displayed if you choose an option with value 3
.
I have tested this example using only hide
and show
on a required field and it does appear to take visibility into account for validation. In other words, if field2Depend1
is required it will only be required when visible. No need for further configuration for that to work.
Hope this provides some help for anyone looking for a more out-of-the-box solution.
add a comment |
This is an old question with multiple answers that work, however I have discovered a solution using what Magento provides (as of 2.1.0) without the need for extending components. As multiple questions have been marked as duplicate and directed here I thought it would be beneficial to provide some information on this option.
All form element ui components that extend Magento_Ui/js/form/element/abstract.js
have a switcherConfig
setting available for purposes such as hiding/showing elements as well as other actions. The switcher
component can be found at Magento_Ui/js/form/switcher for the curious. You can find examples of it being used in sales_rule_form.xml and catalog_rule_form.xml. Of course if you are using your own custom component already you can still use this as long as your component eventually extends abstract
which appears to be the case based on the example code provided in the question.
Now for a more specific example to answer the original question.
In Namespace/ModuleName/view/adminhtml/ui_component/your_entity_form.xml
you simply need to add the following to the field's settings
that does the controlling (i.e. the field that determines which fields are hidden/visible). In your example this would be field1
.
<field name="field1">
<argument name="data" xsi:type="array">
...
</argument>
<settings>
<switcherConfig>
<rules>
<rule name="0">
<value>2</value>
<actions>
<action name="0">
<target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
<callback>show</callback>
</action>
<action name="1">
<target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
<callback>hide</callback>
</action>
</actions>
</rule>
<rule name="1">
<value>3</value>
<actions>
<action name="0">
<target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
<callback>hide</callback>
</action>
<action name="1">
<target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
<callback>show</callback>
</action>
</actions>
</rule>
</rules>
<enabled>true</enabled>
</switcherConfig>
</settings>
</field>
Let's break it down a little. The switcher
component contains an array of rules
which is what we're building out here. Each <rule>
has a name which is a number in this example. This name is the array key/index for this item. We're using numbers as array indexes. Strings should work too but I haven't tested this theory.
Inside each rule
we pass two arguments.
value
- This is the value offield1
which should trigger theactions
defined below.
actions
- Here we have another array. These are the actions to be triggered when this rule's conditions are met. Again, eachaction
's name is just the array index/key of that item.
Now each action
has two arguments as well (with an optional 3rd).
target
- This is the element you wish to manipulate under this action. If you aren't familiar with how ui_component element names are composed in Magento you can check out Alan Storm's article. It's basically something like{component_name}.{component_name}.{fieldset_name}.{field_name}
in this example.
callback
- Here is the action to be taken on the above mentionedtarget
. This callback should be a function that is available on the element targeted. Our example useshide
andshow
. This is where you can start to expand on the functionality available. Thecatalog_rule_form.xml
example I mentioned earlier usessetValidation
if you wish to see a different example.- You can also add
<params>
to anyaction
that calls for them. You can see this in thecatalog_rule_form.xml
example as well.
Finally the last item inside switcherConfig
is <enabled>true</enabled>
. This should be pretty straight forward, it's a Boolean to enable/disable the switcher functionality we just implemented.
And we're done. So using the example above what you should see is field field2Depend1
displayed if you choose an option with value 2
on field1
, and field3Depend1
displayed if you choose an option with value 3
.
I have tested this example using only hide
and show
on a required field and it does appear to take visibility into account for validation. In other words, if field2Depend1
is required it will only be required when visible. No need for further configuration for that to work.
Hope this provides some help for anyone looking for a more out-of-the-box solution.
add a comment |
This is an old question with multiple answers that work, however I have discovered a solution using what Magento provides (as of 2.1.0) without the need for extending components. As multiple questions have been marked as duplicate and directed here I thought it would be beneficial to provide some information on this option.
All form element ui components that extend Magento_Ui/js/form/element/abstract.js
have a switcherConfig
setting available for purposes such as hiding/showing elements as well as other actions. The switcher
component can be found at Magento_Ui/js/form/switcher for the curious. You can find examples of it being used in sales_rule_form.xml and catalog_rule_form.xml. Of course if you are using your own custom component already you can still use this as long as your component eventually extends abstract
which appears to be the case based on the example code provided in the question.
Now for a more specific example to answer the original question.
In Namespace/ModuleName/view/adminhtml/ui_component/your_entity_form.xml
you simply need to add the following to the field's settings
that does the controlling (i.e. the field that determines which fields are hidden/visible). In your example this would be field1
.
<field name="field1">
<argument name="data" xsi:type="array">
...
</argument>
<settings>
<switcherConfig>
<rules>
<rule name="0">
<value>2</value>
<actions>
<action name="0">
<target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
<callback>show</callback>
</action>
<action name="1">
<target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
<callback>hide</callback>
</action>
</actions>
</rule>
<rule name="1">
<value>3</value>
<actions>
<action name="0">
<target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
<callback>hide</callback>
</action>
<action name="1">
<target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
<callback>show</callback>
</action>
</actions>
</rule>
</rules>
<enabled>true</enabled>
</switcherConfig>
</settings>
</field>
Let's break it down a little. The switcher
component contains an array of rules
which is what we're building out here. Each <rule>
has a name which is a number in this example. This name is the array key/index for this item. We're using numbers as array indexes. Strings should work too but I haven't tested this theory.
Inside each rule
we pass two arguments.
value
- This is the value offield1
which should trigger theactions
defined below.
actions
- Here we have another array. These are the actions to be triggered when this rule's conditions are met. Again, eachaction
's name is just the array index/key of that item.
Now each action
has two arguments as well (with an optional 3rd).
target
- This is the element you wish to manipulate under this action. If you aren't familiar with how ui_component element names are composed in Magento you can check out Alan Storm's article. It's basically something like{component_name}.{component_name}.{fieldset_name}.{field_name}
in this example.
callback
- Here is the action to be taken on the above mentionedtarget
. This callback should be a function that is available on the element targeted. Our example useshide
andshow
. This is where you can start to expand on the functionality available. Thecatalog_rule_form.xml
example I mentioned earlier usessetValidation
if you wish to see a different example.- You can also add
<params>
to anyaction
that calls for them. You can see this in thecatalog_rule_form.xml
example as well.
Finally the last item inside switcherConfig
is <enabled>true</enabled>
. This should be pretty straight forward, it's a Boolean to enable/disable the switcher functionality we just implemented.
And we're done. So using the example above what you should see is field field2Depend1
displayed if you choose an option with value 2
on field1
, and field3Depend1
displayed if you choose an option with value 3
.
I have tested this example using only hide
and show
on a required field and it does appear to take visibility into account for validation. In other words, if field2Depend1
is required it will only be required when visible. No need for further configuration for that to work.
Hope this provides some help for anyone looking for a more out-of-the-box solution.
This is an old question with multiple answers that work, however I have discovered a solution using what Magento provides (as of 2.1.0) without the need for extending components. As multiple questions have been marked as duplicate and directed here I thought it would be beneficial to provide some information on this option.
All form element ui components that extend Magento_Ui/js/form/element/abstract.js
have a switcherConfig
setting available for purposes such as hiding/showing elements as well as other actions. The switcher
component can be found at Magento_Ui/js/form/switcher for the curious. You can find examples of it being used in sales_rule_form.xml and catalog_rule_form.xml. Of course if you are using your own custom component already you can still use this as long as your component eventually extends abstract
which appears to be the case based on the example code provided in the question.
Now for a more specific example to answer the original question.
In Namespace/ModuleName/view/adminhtml/ui_component/your_entity_form.xml
you simply need to add the following to the field's settings
that does the controlling (i.e. the field that determines which fields are hidden/visible). In your example this would be field1
.
<field name="field1">
<argument name="data" xsi:type="array">
...
</argument>
<settings>
<switcherConfig>
<rules>
<rule name="0">
<value>2</value>
<actions>
<action name="0">
<target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
<callback>show</callback>
</action>
<action name="1">
<target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
<callback>hide</callback>
</action>
</actions>
</rule>
<rule name="1">
<value>3</value>
<actions>
<action name="0">
<target>your_entity_form.your_entity_form.entity_information.field2Depend1</target>
<callback>hide</callback>
</action>
<action name="1">
<target>your_entity_form.your_entity_form.entity_information.field3Depend1</target>
<callback>show</callback>
</action>
</actions>
</rule>
</rules>
<enabled>true</enabled>
</switcherConfig>
</settings>
</field>
Let's break it down a little. The switcher
component contains an array of rules
which is what we're building out here. Each <rule>
has a name which is a number in this example. This name is the array key/index for this item. We're using numbers as array indexes. Strings should work too but I haven't tested this theory.
Inside each rule
we pass two arguments.
value
- This is the value offield1
which should trigger theactions
defined below.
actions
- Here we have another array. These are the actions to be triggered when this rule's conditions are met. Again, eachaction
's name is just the array index/key of that item.
Now each action
has two arguments as well (with an optional 3rd).
target
- This is the element you wish to manipulate under this action. If you aren't familiar with how ui_component element names are composed in Magento you can check out Alan Storm's article. It's basically something like{component_name}.{component_name}.{fieldset_name}.{field_name}
in this example.
callback
- Here is the action to be taken on the above mentionedtarget
. This callback should be a function that is available on the element targeted. Our example useshide
andshow
. This is where you can start to expand on the functionality available. Thecatalog_rule_form.xml
example I mentioned earlier usessetValidation
if you wish to see a different example.- You can also add
<params>
to anyaction
that calls for them. You can see this in thecatalog_rule_form.xml
example as well.
Finally the last item inside switcherConfig
is <enabled>true</enabled>
. This should be pretty straight forward, it's a Boolean to enable/disable the switcher functionality we just implemented.
And we're done. So using the example above what you should see is field field2Depend1
displayed if you choose an option with value 2
on field1
, and field3Depend1
displayed if you choose an option with value 3
.
I have tested this example using only hide
and show
on a required field and it does appear to take visibility into account for validation. In other words, if field2Depend1
is required it will only be required when visible. No need for further configuration for that to work.
Hope this provides some help for anyone looking for a more out-of-the-box solution.
answered Dec 31 '18 at 15:22
rain2orain2o
1938
1938
add a comment |
add a comment |
If you have got error like Field is Undefined
when initialized field visibility, Use setTimeout()
to load that depended fields:
fieldDepend: function (value) {
setTimeout(function(){
var field1 = uiRegistry.get('index = field2');
if (field1.visibleValue == value) {
field1.show();
} else {
field1.hide();
}
var field2 = uiRegistry.get('index = field3');
if (field2.visibleValue == value) {
field2.show();
} else {
field2.hide();
}
}, 1);
return this._super();
},
Instead of setTimeout, use asynchronous method of getting dependencies instead:uiRegistry.get('q', function(field) { ... }));
– Erfan
Sep 29 '17 at 7:12
Insted of suggesting in comment and down-vote my answer you can Post here your answer bro, This is not the way to devote any answer, You are just suggesting different way, my answer is not wrong. @Erfan. your down-vote make wrong impression.
– Ronak Chauhan
Sep 29 '17 at 7:33
@RonakChauhan - Agreed on point !!! your answer is not incorrect , different people have different opinion , suggestion and solution. Your answer is also correct !!
– Manthan Dave
Sep 29 '17 at 7:40
Waiting one second to initialise, and blocking initialisation is quite clearly the wrong way to do it. How do you even know your dependencies will be loaded in one second? Why won't it be two seconds? You're making an assumption here, that's best avoided.
– Erfan
Sep 29 '17 at 7:51
I have not set 1 second here, Its in millisecond, SetTimeout() will just load my code after load the page, And if you have your answer then you can post it. Down-vote someone's answer is not the way to prove yourself right!@Erfan
– Ronak Chauhan
Sep 29 '17 at 8:15
|
show 5 more comments
If you have got error like Field is Undefined
when initialized field visibility, Use setTimeout()
to load that depended fields:
fieldDepend: function (value) {
setTimeout(function(){
var field1 = uiRegistry.get('index = field2');
if (field1.visibleValue == value) {
field1.show();
} else {
field1.hide();
}
var field2 = uiRegistry.get('index = field3');
if (field2.visibleValue == value) {
field2.show();
} else {
field2.hide();
}
}, 1);
return this._super();
},
Instead of setTimeout, use asynchronous method of getting dependencies instead:uiRegistry.get('q', function(field) { ... }));
– Erfan
Sep 29 '17 at 7:12
Insted of suggesting in comment and down-vote my answer you can Post here your answer bro, This is not the way to devote any answer, You are just suggesting different way, my answer is not wrong. @Erfan. your down-vote make wrong impression.
– Ronak Chauhan
Sep 29 '17 at 7:33
@RonakChauhan - Agreed on point !!! your answer is not incorrect , different people have different opinion , suggestion and solution. Your answer is also correct !!
– Manthan Dave
Sep 29 '17 at 7:40
Waiting one second to initialise, and blocking initialisation is quite clearly the wrong way to do it. How do you even know your dependencies will be loaded in one second? Why won't it be two seconds? You're making an assumption here, that's best avoided.
– Erfan
Sep 29 '17 at 7:51
I have not set 1 second here, Its in millisecond, SetTimeout() will just load my code after load the page, And if you have your answer then you can post it. Down-vote someone's answer is not the way to prove yourself right!@Erfan
– Ronak Chauhan
Sep 29 '17 at 8:15
|
show 5 more comments
If you have got error like Field is Undefined
when initialized field visibility, Use setTimeout()
to load that depended fields:
fieldDepend: function (value) {
setTimeout(function(){
var field1 = uiRegistry.get('index = field2');
if (field1.visibleValue == value) {
field1.show();
} else {
field1.hide();
}
var field2 = uiRegistry.get('index = field3');
if (field2.visibleValue == value) {
field2.show();
} else {
field2.hide();
}
}, 1);
return this._super();
},
If you have got error like Field is Undefined
when initialized field visibility, Use setTimeout()
to load that depended fields:
fieldDepend: function (value) {
setTimeout(function(){
var field1 = uiRegistry.get('index = field2');
if (field1.visibleValue == value) {
field1.show();
} else {
field1.hide();
}
var field2 = uiRegistry.get('index = field3');
if (field2.visibleValue == value) {
field2.show();
} else {
field2.hide();
}
}, 1);
return this._super();
},
edited Sep 30 '17 at 5:09
answered Sep 9 '17 at 12:53
Ronak ChauhanRonak Chauhan
4,25011449
4,25011449
Instead of setTimeout, use asynchronous method of getting dependencies instead:uiRegistry.get('q', function(field) { ... }));
– Erfan
Sep 29 '17 at 7:12
Insted of suggesting in comment and down-vote my answer you can Post here your answer bro, This is not the way to devote any answer, You are just suggesting different way, my answer is not wrong. @Erfan. your down-vote make wrong impression.
– Ronak Chauhan
Sep 29 '17 at 7:33
@RonakChauhan - Agreed on point !!! your answer is not incorrect , different people have different opinion , suggestion and solution. Your answer is also correct !!
– Manthan Dave
Sep 29 '17 at 7:40
Waiting one second to initialise, and blocking initialisation is quite clearly the wrong way to do it. How do you even know your dependencies will be loaded in one second? Why won't it be two seconds? You're making an assumption here, that's best avoided.
– Erfan
Sep 29 '17 at 7:51
I have not set 1 second here, Its in millisecond, SetTimeout() will just load my code after load the page, And if you have your answer then you can post it. Down-vote someone's answer is not the way to prove yourself right!@Erfan
– Ronak Chauhan
Sep 29 '17 at 8:15
|
show 5 more comments
Instead of setTimeout, use asynchronous method of getting dependencies instead:uiRegistry.get('q', function(field) { ... }));
– Erfan
Sep 29 '17 at 7:12
Insted of suggesting in comment and down-vote my answer you can Post here your answer bro, This is not the way to devote any answer, You are just suggesting different way, my answer is not wrong. @Erfan. your down-vote make wrong impression.
– Ronak Chauhan
Sep 29 '17 at 7:33
@RonakChauhan - Agreed on point !!! your answer is not incorrect , different people have different opinion , suggestion and solution. Your answer is also correct !!
– Manthan Dave
Sep 29 '17 at 7:40
Waiting one second to initialise, and blocking initialisation is quite clearly the wrong way to do it. How do you even know your dependencies will be loaded in one second? Why won't it be two seconds? You're making an assumption here, that's best avoided.
– Erfan
Sep 29 '17 at 7:51
I have not set 1 second here, Its in millisecond, SetTimeout() will just load my code after load the page, And if you have your answer then you can post it. Down-vote someone's answer is not the way to prove yourself right!@Erfan
– Ronak Chauhan
Sep 29 '17 at 8:15
Instead of setTimeout, use asynchronous method of getting dependencies instead:
uiRegistry.get('q', function(field) { ... }));
– Erfan
Sep 29 '17 at 7:12
Instead of setTimeout, use asynchronous method of getting dependencies instead:
uiRegistry.get('q', function(field) { ... }));
– Erfan
Sep 29 '17 at 7:12
Insted of suggesting in comment and down-vote my answer you can Post here your answer bro, This is not the way to devote any answer, You are just suggesting different way, my answer is not wrong. @Erfan. your down-vote make wrong impression.
– Ronak Chauhan
Sep 29 '17 at 7:33
Insted of suggesting in comment and down-vote my answer you can Post here your answer bro, This is not the way to devote any answer, You are just suggesting different way, my answer is not wrong. @Erfan. your down-vote make wrong impression.
– Ronak Chauhan
Sep 29 '17 at 7:33
@RonakChauhan - Agreed on point !!! your answer is not incorrect , different people have different opinion , suggestion and solution. Your answer is also correct !!
– Manthan Dave
Sep 29 '17 at 7:40
@RonakChauhan - Agreed on point !!! your answer is not incorrect , different people have different opinion , suggestion and solution. Your answer is also correct !!
– Manthan Dave
Sep 29 '17 at 7:40
Waiting one second to initialise, and blocking initialisation is quite clearly the wrong way to do it. How do you even know your dependencies will be loaded in one second? Why won't it be two seconds? You're making an assumption here, that's best avoided.
– Erfan
Sep 29 '17 at 7:51
Waiting one second to initialise, and blocking initialisation is quite clearly the wrong way to do it. How do you even know your dependencies will be loaded in one second? Why won't it be two seconds? You're making an assumption here, that's best avoided.
– Erfan
Sep 29 '17 at 7:51
I have not set 1 second here, Its in millisecond, SetTimeout() will just load my code after load the page, And if you have your answer then you can post it. Down-vote someone's answer is not the way to prove yourself right!@Erfan
– Ronak Chauhan
Sep 29 '17 at 8:15
I have not set 1 second here, Its in millisecond, SetTimeout() will just load my code after load the page, And if you have your answer then you can post it. Down-vote someone's answer is not the way to prove yourself right!@Erfan
– Ronak Chauhan
Sep 29 '17 at 8:15
|
show 5 more comments
Custom component with init:
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* Init
*/
initialize: function () {
this._super();
this.fieldDepend(this.value());
return this;
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
this.fieldDepend(value);
return this._super();
},
/**
* Update field dependency
*
* @param {String} value
*/
fieldDepend: function (value) {
var field = uiRegistry.get('index = field_to_toggle');
if (value == 'xxxxx') {
field.show();
} else {
field.hide();
}
return this;
}
});
});
it's show "field is undefined" after using initialize function.
– Prince Patel
Apr 17 '17 at 13:28
1
UsesetTimeout()
infieldDepend()
because depended is not loaded yet.
– Ronak Chauhan
Sep 9 '17 at 12:57
add a comment |
Custom component with init:
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* Init
*/
initialize: function () {
this._super();
this.fieldDepend(this.value());
return this;
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
this.fieldDepend(value);
return this._super();
},
/**
* Update field dependency
*
* @param {String} value
*/
fieldDepend: function (value) {
var field = uiRegistry.get('index = field_to_toggle');
if (value == 'xxxxx') {
field.show();
} else {
field.hide();
}
return this;
}
});
});
it's show "field is undefined" after using initialize function.
– Prince Patel
Apr 17 '17 at 13:28
1
UsesetTimeout()
infieldDepend()
because depended is not loaded yet.
– Ronak Chauhan
Sep 9 '17 at 12:57
add a comment |
Custom component with init:
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* Init
*/
initialize: function () {
this._super();
this.fieldDepend(this.value());
return this;
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
this.fieldDepend(value);
return this._super();
},
/**
* Update field dependency
*
* @param {String} value
*/
fieldDepend: function (value) {
var field = uiRegistry.get('index = field_to_toggle');
if (value == 'xxxxx') {
field.show();
} else {
field.hide();
}
return this;
}
});
});
Custom component with init:
define([
'underscore',
'uiRegistry',
'Magento_Ui/js/form/element/select',
'Magento_Ui/js/modal/modal'
], function (_, uiRegistry, select, modal) {
'use strict';
return select.extend({
/**
* Init
*/
initialize: function () {
this._super();
this.fieldDepend(this.value());
return this;
},
/**
* On value change handler.
*
* @param {String} value
*/
onUpdate: function (value) {
this.fieldDepend(value);
return this._super();
},
/**
* Update field dependency
*
* @param {String} value
*/
fieldDepend: function (value) {
var field = uiRegistry.get('index = field_to_toggle');
if (value == 'xxxxx') {
field.show();
} else {
field.hide();
}
return this;
}
});
});
answered Apr 3 '17 at 10:07
MagentixMagentix
111
111
it's show "field is undefined" after using initialize function.
– Prince Patel
Apr 17 '17 at 13:28
1
UsesetTimeout()
infieldDepend()
because depended is not loaded yet.
– Ronak Chauhan
Sep 9 '17 at 12:57
add a comment |
it's show "field is undefined" after using initialize function.
– Prince Patel
Apr 17 '17 at 13:28
1
UsesetTimeout()
infieldDepend()
because depended is not loaded yet.
– Ronak Chauhan
Sep 9 '17 at 12:57
it's show "field is undefined" after using initialize function.
– Prince Patel
Apr 17 '17 at 13:28
it's show "field is undefined" after using initialize function.
– Prince Patel
Apr 17 '17 at 13:28
1
1
Use
setTimeout()
in fieldDepend()
because depended is not loaded yet.– Ronak Chauhan
Sep 9 '17 at 12:57
Use
setTimeout()
in fieldDepend()
because depended is not loaded yet.– Ronak Chauhan
Sep 9 '17 at 12:57
add a comment |
Just in case someone struggles with the Erfan solution, you have to pass the full path to the fields in dependentFieldNames
, e.g.:
dependentFieldNames: [
'form_name.form_name.fieldset.field_name',
'form_name.form_name.fieldset.field_name1',
'form_name.form_name.fieldset.field_name2',
'form_name.form_name.fieldset.field_name3'
],
I'm not sure why form_name has to be 2 times, but this has worked for me.
To debug this I put console.log(query);
in static/adminhtml/Magento/backend/en_US/Magento_Ui/js/lib/registry/registry.js
223rd line ( the get() function just before this._addRequest(query, callback)
)
add a comment |
Just in case someone struggles with the Erfan solution, you have to pass the full path to the fields in dependentFieldNames
, e.g.:
dependentFieldNames: [
'form_name.form_name.fieldset.field_name',
'form_name.form_name.fieldset.field_name1',
'form_name.form_name.fieldset.field_name2',
'form_name.form_name.fieldset.field_name3'
],
I'm not sure why form_name has to be 2 times, but this has worked for me.
To debug this I put console.log(query);
in static/adminhtml/Magento/backend/en_US/Magento_Ui/js/lib/registry/registry.js
223rd line ( the get() function just before this._addRequest(query, callback)
)
add a comment |
Just in case someone struggles with the Erfan solution, you have to pass the full path to the fields in dependentFieldNames
, e.g.:
dependentFieldNames: [
'form_name.form_name.fieldset.field_name',
'form_name.form_name.fieldset.field_name1',
'form_name.form_name.fieldset.field_name2',
'form_name.form_name.fieldset.field_name3'
],
I'm not sure why form_name has to be 2 times, but this has worked for me.
To debug this I put console.log(query);
in static/adminhtml/Magento/backend/en_US/Magento_Ui/js/lib/registry/registry.js
223rd line ( the get() function just before this._addRequest(query, callback)
)
Just in case someone struggles with the Erfan solution, you have to pass the full path to the fields in dependentFieldNames
, e.g.:
dependentFieldNames: [
'form_name.form_name.fieldset.field_name',
'form_name.form_name.fieldset.field_name1',
'form_name.form_name.fieldset.field_name2',
'form_name.form_name.fieldset.field_name3'
],
I'm not sure why form_name has to be 2 times, but this has worked for me.
To debug this I put console.log(query);
in static/adminhtml/Magento/backend/en_US/Magento_Ui/js/lib/registry/registry.js
223rd line ( the get() function just before this._addRequest(query, callback)
)
answered Feb 26 '18 at 5:27
user3722573user3722573
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f132020%2fmagento-2-1-how-do-i-create-form-component-field-custom-depends-on-another-field%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown