Ich habe ein Feld ausgewählt, das einige Optionen hat. In einem von ihnen hängen einige Felder vom Wert ab, in einem anderen Feld werden sie ausgeblendet. Ich habe die Komponente js für mein Feld kopiert und erweitert, aber es hat nicht funktioniert oder ich habe es falsch gemacht. UI-Komponente unterstützt diese Funktion? Wie kann ich das erreichen?
Folgendes habe ich getan:
<field name="field1">
<argument name="data" xsi:type="array">
<item name="options" xsi:type="object">Namespace\ModuleName\Model\Config\Source\Options</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
}
});
});
quelle
initialize
Methode in Ihrem Fall verwenden, da ui-element keineonLoad
Methode hat. Mit dem Eingabeindexschlüssel können Sie einen beliebigen Feldwert an einer beliebigen Stelle aus der Registrierung abrufen :uiRegistry.get('index = field1')
. Wenn Sie weitere Fragen haben, wenden Sie sich bitte per Skype an mich (sarj1989). Die Kommunikation auf Russisch ist einfacher.Die von Magentix vorgeschlagene Lösung löst bei der Verwendung von initialize von Zeit zu Zeit einen Fehler aus. Dies hängt von der Zeit ab, die Ihr Browser zum Rendern der Komponenten benötigt. Um dies zu beheben, können Sie setTimeout verwenden.
Siehe den folgenden Code:
quelle
Dies ist eine alte Frage mit mehreren Antworten, die funktionieren. Ich habe jedoch eine Lösung gefunden, die Magento (ab 2.1.0) verwendet, ohne dass Komponenten erweitert werden müssen. Da mehrere Fragen als doppelt markiert und hier gerichtet wurden, hielt ich es für vorteilhaft, einige Informationen zu dieser Option bereitzustellen.
Für alle erweiterten Komponentenelement-UI-Komponenten steht
Magento_Ui/js/form/element/abstract.js
eineswitcherConfig
Einstellung zur Verfügung, die zum Ausblenden / Anzeigen von Elementen sowie für andere Aktionen verwendet werden kann. Dieswitcher
Komponente finden Sie unter Magento_Ui / js / form / switcher für Neugierige. Beispiele dafür finden Sie in sales_rule_form.xml und catalog_rule_form.xml . Wenn Sie bereits eine eigene benutzerdefinierte Komponente verwenden, können Sie diese natürlich weiterhin verwenden, solange sich Ihre Komponente schließlich erweitert. Diesabstract
scheint auf der Grundlage des in der Frage angegebenen Beispielcodes der Fall zu sein.Nun zu einem genaueren Beispiel zur Beantwortung der ursprünglichen Frage.
In müssen
Namespace/ModuleName/view/adminhtml/ui_component/your_entity_form.xml
Sie lediglich Folgendes zu den Feldern hinzufügensettings
, die das Controlling ausführen (dh das Feld, das bestimmt, welche Felder ausgeblendet / sichtbar sind). In Ihrem Beispiel wäre diesfield1
.Lassen Sie es uns ein wenig aufschlüsseln. Die
switcher
Komponente enthält ein Array, vonrules
dem wir hier bauen. Jeder<rule>
hat einen Namen, der in diesem Beispiel eine Nummer ist. Dieser Name ist der Array-Schlüssel / Index für dieses Element. Wir verwenden Zahlen als Array-Indizes.Strings sollten auch funktionieren, aber ich habe diese Theorie nicht getestet. UPDATE - Wie von @ChristopheFerreboeuf in den Kommentaren erwähnt, funktionieren Zeichenfolgen hier nicht. Dies sind Arrays und sollten mit beginnen0
, nicht mit Strings oder 1.In jedem übergeben
rule
wir zwei Argumente.value
- Dies ist der Wert, derfield1
dieactions
unten definierte auslösen soll .actions
- Hier haben wir ein anderes Array. Dies sind die Aktionen, die ausgelöst werden, wenn die Bedingungen dieser Regel erfüllt sind. Auch hier ist jederaction
Name nur der Array-Index / Schlüssel dieses Elements.Jetzt hat jeder
action
auch zwei Argumente (mit einem optionalen dritten).target
- Dies ist das Element, das Sie im Rahmen dieser Aktion bearbeiten möchten. Wenn Sie nicht wissen, wie die Namen von ui_component-Elementen in Magento zusammengesetzt sind, können Sie den Artikel von Alan Storm lesen . Es ist im Grunde so etwas wie{component_name}.{component_name}.{fieldset_name}.{field_name}
in diesem Beispiel.callback
- Hier ist die Maßnahme zu den oben genanntentarget
. Dieser Rückruf sollte eine Funktion sein, die für das Zielelement verfügbar ist. Unser Beispiel verwendethide
undshow
. Hier können Sie die verfügbaren Funktionen erweitern. Dascatalog_rule_form.xml
zuvor erwähnte Beispiel wird verwendet,setValidation
wenn Sie ein anderes Beispiel sehen möchten.<params>
zu jedem hinzufügenaction
, der sie anfordert. Sie können dies auch imcatalog_rule_form.xml
Beispiel sehen.Schließlich ist der letzte Punkt im Inneren
switcherConfig
ist<enabled>true</enabled>
. Dies sollte ziemlich einfach sein, es ist ein Boolescher Wert zum Aktivieren / Deaktivieren der Switcher-Funktionalität, die wir gerade implementiert haben.Und wir sind fertig. So am Beispiel über das, was sollten Sie sehen , ist Feld
field2Depend1
angezeigt , wenn Sie eine Option mit dem Wert wählen2
auffield1
undfield3Depend1
angezeigt , wenn Sie eine Option mit dem Wert wählen3
.Ich habe dieses Beispiel nur mit
hide
undshow
in einem erforderlichen Feld getestet und es scheint die Sichtbarkeit für die Validierung zu berücksichtigen. Mit anderen Worten, wenn diesfield2Depend1
erforderlich ist , ist es nur erforderlich, wenn es sichtbar ist. Es ist keine weitere Konfiguration erforderlich, damit dies funktioniert.Ich hoffe, dies bietet Hilfe für alle, die nach einer sofort einsatzbereiten Lösung suchen.
quelle
Es gibt viele Antworten auf diese Frage, aber die meisten von ihnen gehen entweder davon aus, ob die uiRegistry vollständig geladen ist, oder verwenden sie
setTimeout
, um den Aufrufstapel zu löschen und auf den nächsten Eventloop zu warten (was meiner Meinung nach immer noch der falsche Weg ist Tun Sie es - da Sie nicht sicher sind, wann die anderen UI-Komponenten geladen wurden - korrigieren Sie mich, wenn ich falsch liege.Fügen Sie zunächst natürlich Ihre benutzerdefinierte JS-Komponente zur Feldkonfiguration hinzu (Einzelheiten finden Sie in den anderen Antworten):
Dann ist hier die benutzerdefinierte UI-Komponente, die die abhängigen Felder verbirgt oder anzeigt - mit Kommentaren, um zu erklären, was passiert.
quelle
Wenn Sie Fehler
Field is Undefined
beim Initialisieren der Feldsichtbarkeit haben, verwenden Sie diese OptionsetTimeout()
, um die abhängigen Felder zu laden:quelle
uiRegistry.get('q', function(field) { ... }));
Benutzerdefinierte Komponente mit init:
quelle
setTimeout()
in,fieldDepend()
da abhängig noch nicht geladen ist.Es gibt verschiedene Möglichkeiten, um Feldabhängigkeiten zu behandeln. Für ein einfaches Dropdown-Menü Ja / Nein, ein Kontrollkästchen oder einen Umschalter können Sie die Eigenschaften
imports
oderexports
Verknüpfungen in Magento 2 verwenden. Die Lösung wird hier ausführlich erläutert: Abhängige Felder in Formularen für UI-Komponenten in Magento 2 ohne Javascript für boolesche Felder :Um andere Arten von Werten zu behandeln, z. B. die Abhängigkeit von einer Liste von Werten in einer Dropdown-Liste oder, obwohl dies unwahrscheinlich ist, einen Wert eines Eingabefelds, können Sie die verwenden
switcherConfig
. Überprüfen Sie abhängige Felder in UI-Komponentenformularen in Magento 2 ohne Javascript auf Informationen.Die obigen 2 Regeln behandeln so ziemlich alles mit XML-Konfiguration. Für komplexere Regeln können Sie auch JavaScript verwenden.
Jedes Feld im UI-Komponentenformular ist eine Komponente, die mithilfe des
component
Attributs für erweitert werden kann<field component="path to your js" ...>...</field>
. Sie können das Feld dann verwendendata.config
, um weitere Informationen an die Komponente zu übergeben, falls die Komponente generisch ist und an mehreren Stellen wiederverwendet wird, kombiniert mit der Eigenschaftimports
oderexports
linked, um Werte an Observables oder Methoden zu übergeben.Weitere Informationen zu den Verknüpfungseigenschaften finden Sie unter Verknüpfungseigenschaften von UI-Komponenten
quelle
Nur für den Fall, dass jemand mit der Erfan- Lösung zu kämpfen hat , müssen Sie den vollständigen Pfad zu den Feldern in übergeben
dependentFieldNames
, z.Ich bin nicht sicher, warum form_name 2 mal sein muss, aber das hat bei mir funktioniert.
Zum Debuggen dieses I put
console.log(query);
instatic/adminhtml/Magento/backend/en_US/Magento_Ui/js/lib/registry/registry.js
der 223. Zeile (die get () Funktion kurz vorthis._addRequest(query, callback)
)quelle