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

7

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. Geben Sie hier die Bildbeschreibung ein

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.

magento-2.1 adminhtml uicomponent fieldsets Verdu
quelle

Antworten:

13

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.

Sohel Rana
quelle
Perfekt, tolle Arbeit!
Verdu
können Sie dies überprüfen magento.stackexchange.com/questions/191972/…
Verdu
Die obige Frage, die Sie beantwortet haben, funktioniert hervorragend, aber es gibt einen Fehler - zum Beispiel zwei Szenarien 1. Wenn wir zum ersten Mal einen neuen Eintrag erstellen, wird die Auswahl so eingestellt, dass sie geschlossen wird. OK, der Rest der zugehörigen Felder wird ausgeblendet. 2. Sobald wir einen Eintrag erstellt und gespeichert haben, bearbeiten wir denselben Eintrag, für den die Auswahl auf Öffnen gesetzt ist, die zugrunde liegenden Felder werden jedoch nicht angezeigt / angezeigt. Um die ausgeblendeten Felder anzuzeigen, müssen wir zuerst zum Schließen wechseln. Wenn wir sie dann auswählen, werden die Felder angezeigt. Wenn die Auswahl standardmäßig geöffnet ist, müssen die zugrunde liegenden ausgeblendeten Felder sichtbar sein.
Verdu
Beim Laden der Seite erhalten wir standardmäßig die Werte in der Variablen ($ ("#" + id) .val () sind undefiniert und Null. Fehlt etwas oder wie können wir dieses Manko ändern?
Verdu
Ist es möglich von $ fieldset-> addField () (stattdessen in meinem Block)?
Ankita Biswas
6

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.

Ranjit Shinde
quelle
Ist es möglich von $fieldset->addField()(in meinem Block stattdessen)?
Adarsh ​​Khatri
3

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!.

Himanshu
quelle
1
Ist es möglich, eine Enitire-Registerkarte mit der Switcher-Konfiguration auszublenden?
Aravind
1

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);
},
Łukasz Linczewski
quelle
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!

Juliano Vargas
quelle
Ist es möglich, eine Enitire-Registerkarte mit der Switcher-Konfiguration auszublenden?
Aravind