Magento 2.1 Ui-Komponente: Feldbasis im Dropdown-Feld ein- und ausblenden

Ich habe eine Dropdown-Liste, die den Status des Tages anzeigt: entweder schließen oder öffnen, auswählbar aus einer Dropdown-Liste. Wenn der Status ist nah , mag ich die offenen und Schließzeitpunkte innerhalb dieses bestimmten Feldsatzes kollabieren und verstecken.

Hier ist mein Code:

<fieldset name="monday_timings">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="collapsible" xsi:type="boolean">true</item>
            <item name="label" xsi:type="string" translate="true">Monday Timings</item>
            <item name="sortOrder" xsi:type="number">501</item>
        </item>
    </argument>    
    <field name="monday_status">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">NameSpace\ModuleName\Model\Timetable\Source\IsSpecial</item>
                <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Monday Status</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">monday_status</item>
                <item name="sortOrder" xsi:type="number">19</item>
                <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
            </item>
    </argument>
    </field>        
 <field name="monday_open_time">
<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="dataType" xsi:type="string">Timepicker</item>
        <item name="label" xsi:type="string" translate="true">Start Time</item>
        <item name="formElement" xsi:type="string">date</item>
        <item name="source" xsi:type="string">date</item>
        <item name="sortOrder" xsi:type="number">101</item>
        <item name="dataScope" xsi:type="string">monday_open_time</item>
        <item name="validation" xsi:type="array">
            <item name="required-entry" xsi:type="boolean">true</item>
        </item>
        <item name="options" xsi:type="array">
            <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            <item name="timeFormat" xsi:type="string">hh:mm:ss</item>
            <item name="showsTime" xsi:type="boolean">true</item>
        </item>
    </item>
</argument>
</field> 
 <field name="monday_close_time">
<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="dataType" xsi:type="string">Timepicker</item>
        <item name="label" xsi:type="string" translate="true">End Time</item>
        <item name="formElement" xsi:type="string">date</item>
        <item name="source" xsi:type="string">date</item>
        <item name="sortOrder" xsi:type="number">105</item>
        <item name="dataScope" xsi:type="string">monday_close_time</item>
        <item name="validation" xsi:type="array">
            <item name="required-entry" xsi:type="boolean">true</item>
        </item>
        <item name="options" xsi:type="array">
            <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            <item name="timeFormat" xsi:type="string">hh:mm:ss</item>
            <item name="showsTime" xsi:type="boolean">true</item>
        </item>
    </item>
</argument>
</field>
<field name="monday_break_time">
<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="dataType" xsi:type="string">Timepicker</item>
        <item name="label" xsi:type="string" translate="true">Break Time</item>
        <item name="formElement" xsi:type="string">date</item>
        <item name="source" xsi:type="string">date</item>
        <item name="sortOrder" xsi:type="number">103</item>
        <item name="dataScope" xsi:type="string">monday_break_time</item>            
        <item name="options" xsi:type="array">
            <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            <item name="timeFormat" xsi:type="string">hh:mm:ss</item>
            <item name="showsTime" xsi:type="boolean">true</item>
        </item>
    </item>
</argument>
</field> 
 <field name="monday_offbreak_time">
<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="dataType" xsi:type="string">Timepicker</item>
        <item name="label" xsi:type="string" translate="true">End Break</item>
        <item name="formElement" xsi:type="string">date</item>
        <item name="source" xsi:type="string">date</item>
        <item name="sortOrder" xsi:type="number">104</item>
        <item name="dataScope" xsi:type="string">monday_offbreak_time</item>            
        <item name="options" xsi:type="array">
            <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            <item name="timeFormat" xsi:type="string">hh:mm:ss</item>
            <item name="showsTime" xsi:type="boolean">true</item>
        </item>
    </item>
</argument>
</field>
</fieldset>

Wie kann dies erreicht werden, wäre jede Hilfe dankbar. Vielen Dank im Voraus für jede Hilfe.

Standardmäßig gibt es hierfür keine Option. Hierfür können Sie eine benutzerdefinierte Komponente und Vorlage erstellen. Versuchen Sie es auf folgende Weise:

<field name = "monday_status">
    <argument name = "data" xsi: type = "array">
        <item name = "options" xsi: type = "object"> NameSpace \ Modulname \ Modell \ Zeitplan \ Quelle \ IsSpecial </ item>
        <item name = "config" xsi: type = "array">
            <item name = "component" xsi: type = "string"> NameSpace_ModuleName / js / form / element / is-special </ item>
            <item name = "elementTmpl" xsi: type = "string"> NameSpace_ModuleName / form / element / is-special </ item>
            <item name = "label" xsi: type = "string" translate = "true"> Montagstatus </ item>
            <item name = "sichtbar" xsi: type = "boolean"> true </ item>
            <item name = "dataType" xsi: type = "string"> number </ item>
            <item name = "formElement" xsi: type = "string"> wählen Sie </ item>
            <item name = "source" xsi: type = "string"> item </ item>
            <item name = "dataScope" xsi: type = "string"> Montag_status </ item>
            <item name = "sortOrder" xsi: type = "number"> 19 </ item>
            <item name = "validation" xsi: type = "array">
                <item name = "Erforderlicher Eintrag" xsi: type = "boolean"> true </ item>
            </ item>
        </ item>
    </ argument>
</ field>

NameSpace / Modulname / view / adminhtml / web / js / form / element / is-special.js

definieren([
    'jquery',
    'Magento_Ui / js / form / element / select'
], Funktion ($, Select) {
    'use strict';

    return Select.extend ({
        Standardeinstellungen: {
            customName: '$ {$ .parentName}. $ {$ .index} _input'
        },
        / **
         * Ändern Sie die aktuell ausgewählte Option
         * *
         * @param {String} id
         * /
        selectOption: Funktion (ID) {
            if (($ ("#" + id) .val () == 0) || ($ ("#" + id) .val () == undefined)) {
                $ ('div [data-index = "monday_open_time"]'). hide ();
                $ ('div [data-index = "monday_close_time"]'). hide ();
                $ ('div [data-index = "monday_break_time"]'). hide ();
                $ ('div [data-index = "monday_offbreak_time"]'). hide ();
            } else if ($ ("#" + id) .val () == 1) {
                $ ('div [data-index = "monday_open_time"]'). show ();
                $ ('div [data-index = "monday_close_time"]'). show ();
                $ ('div [data-index = "monday_break_time"]'). show ();
                $ ('div [data-index = "monday_offbreak_time"]'). show ();
            }}
        },
    });
});

NameSpace / Modulname / view / adminhtml / web / template / form / element / is-special.html

<select class = "admin__control-select" data-bind = "
    Ereignis: {change: selectOption (uid)},
    attr: {
        name: inputName,
        id: uid,
        deaktiviert: deaktiviert,
        'Arie-beschrieben von': NoticeId
    },
    hasFocus: fokussiert,
    optgroup: Optionen,
    Wert: Wert,
    optionsCaption: caption,
    optionsValue: 'value',
    optionsText: 'label' "
/>

Cache leeren.

Es ist auch in der UI-Komponente mit dem möglich <switcherConfig>. Sie können das Magento-Verkaufsregelmodul aus der UI-Komponentendatei referenzieren. Ich hatte die gleiche Anforderung und habe dies mithilfe des folgenden Codes getan.

<field name="allow_to_proceed" sortOrder="10" formElement="checkbox">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="source" xsi:type="string">page</item>
            <item name="default" xsi:type="number">0</item>
        </item>
    </argument>
    <settings>
        <dataType>boolean</dataType>
        <label translate="true">Allow Proceed to Checkout</label>
        <dataScope>allow_to_proceed</dataScope>
        <switcherConfig>
            <rules>
                <rule name="0">
                    <value>1</value>
                    <actions>
                        <action name="0">
                            <target>custom_module_rules_form.custom_module_rules_form.actions.skip_other_rules</target>
                            <callback>show</callback>
                        </action>
                        <action name="1">
                            <target>custom_module_rules_form.custom_module_rules_form.actions.remove_discount</target>
                            <callback>show</callback>
                        </action>
                    </actions>
                </rule>
                <rule name="1">
                    <value>0</value>
                    <actions>
                        <action name="0">
                            <target>custom_module_rules_form.custom_module_rules_form.actions.skip_other_rules</target>
                            <callback>hide</callback>
                        </action>
                        <action name="1">
                            <target>custom_module_rules_form.custom_module_rules_form.actions.remove_discount</target>
                            <callback>hide</callback>
                        </action>
                    </actions>
                </rule>
            </rules>
            <enabled>true</enabled>
        </switcherConfig>        
    </settings>
    <formElements>
        <checkbox>
            <settings>
                <valueMap>
                    <map name="false" xsi:type="number">0</map>
                    <map name="true" xsi:type="number">1</map>
                </valueMap>
                <prefer>toggle</prefer>
            </settings>
        </checkbox>
    </formElements>
</field>

Hier <target>ist dein form_datacomponent_name.section_name.field_name.

Sie müssen keine zusätzlichen Standard-UI-Komponenten ausführen, um diese Funktionalität zu erhalten.

<field name="is_enable">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Is Enable</item>
                <item name="visible" xsi:type="boolean">true</item>
                <item name="dataType" xsi:type="string">boolean</item>
                <item name="formElement" xsi:type="string">checkbox</item>
                <item name="prefer" xsi:type="string">toggle</item>
                <item name="valueMap" xsi:type="array">
                    <item name="true" xsi:type="number">1</item>
                    <item name="false" xsi:type="number">0</item>
                </item>
                <item name="default" xsi:type="number">0</item>
                <item name="source" xsi:type="string">from_general</item>
                <item name="dataScope" xsi:type="string">is_enable</item>
                <item name="notice" xsi:type="string" translate="true">
                    Here your message/comment go.
                </item>
                <item name="switcherConfig" xsi:type="array">
                    <item name="enabled" xsi:type="boolean">true</item>
                    <item name="rules" xsi:type="array">
                        <item name="0" xsi:type="array">
                            <item name="value" xsi:type="number">0</item>
                            <item name="actions" xsi:type="array">
                                <item name="0" xsi:type="array">
                                    <item name="target" xsi:type="string">vendor_module_form.vendor_module_form.general.field</item>
                                    <item name="callback" xsi:type="string">show</item>
                                </item>
                            </item>
                        </item>
                        <item name="1" xsi:type="array">
                            <item name="value" xsi:type="number">1</item>
                            <item name="actions" xsi:type="array">
                                <item name="0" xsi:type="array">
                                    <item name="target" xsi:type="string">vendor_module_form.vendor_module_form.general.field</item>
                                    <item name="callback" xsi:type="string">hide</item>
                                </item>
                            </item>
                        </item>
                    </item>
                </item>
            </item>
        </argument>
    </field>  

Sie müssen nur fieldIhr Formular zuweisen namespace, das war's!.

Es funktioniert fast super. Das einzige Problem ist, dass beim Bearbeiten von Elementen keine erwarteten Felder angezeigt werden, da das Skript zu früh ausgeführt wird.

setTimeout behebt das Problem:

selectOption: function(id){
    setTimeout(function() {
        if(($("#"+id).val() == 0)||($("#"+id).val() == undefined)) {
            $('div[data-index="monday_open_time"]').hide();
            $('div[data-index="monday_close_time"]').hide();
            $('div[data-index="monday_break_time"]').hide();
            $('div[data-index="monday_offbreak_time"]').hide();
        } else if($("#"+id).val() == 1) {
            $('div[data-index="monday_open_time"]').show();
            $('div[data-index="monday_close_time"]').show();
            $('div[data-index="monday_break_time"]').show();
            $('div[data-index="monday_offbreak_time"]').show();
        }
    }, 1);
},

Ich habe Himanshus Antwort ausprobiert, aber es hat bei mir nicht funktioniert, aber diese hat funktioniert:

<settings>
   <switcherConfig>
      <rules>
         <rule name="0">
            <value>0</value>
            <actions>
               <action name="0">
                   <target>vendor_module_form.vendor_module_form.general.field</target>
                   <callback>hide</callback>
               </action>
            </actions>
          </rule>
          <rule name="1">
            <value>1</value>
               <actions>
                  <action name="0">
                      <target>vendor_module_form.vendor_module_form.general.field</target>
                     <callback>show</callback>
                  </action>
               </actions>
          </rule>
       </rules>
       <enabled>true</enabled>
   </switcherConfig>
   <validation>
       <rule name="required-entry" xsi:type="boolean">true</rule>
   </validation>
</settings>

Hoffe das hilft jedem!