Legen Sie Standardwerte für eine Mehrfachauswahl-UI-Komponente fest


13

Ich habe eine benutzerdefinierte Entität in meiner Magento 2-Installation.
Eines der Felder in dieser Entität ist vom Typ Mehrfachauswahl und enthält die Liste aller Länder.
Ich benutze die UI-Komponenten für mein Admin-Formular.
Da die Auswahl ungefähr 200 Datensätze enthält, möchte ich kein Mehrfachauswahlfeld haben, da es nicht so einfach zu verwenden ist.
Deshalb habe ich eine dieser ausgefallenen Mehrfachauswahlmöglichkeiten erstellt, die dem Feld "Kategorien" im Abschnitt "Produktadministration hinzufügen / bearbeiten" ähnelt.
Es sieht besser aus, aber ich kann keinen Standardwert festlegen.
Hier ist meine Konfiguration (beachte das defaultKonfigurationselement):

<field name="affected_countries" formElement="select" component="Magento_Ui/js/form/element/ui-select" sortOrder="100">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="source" xsi:type="string">article</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="chipsEnabled" xsi:type="boolean">true</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="default" xsi:type="string">RO,MD</item>
        </item>
    </argument>
    <settings>
        <elementTmpl>ui/grid/filters/elements/ui-select</elementTmpl>
        <dataType>text</dataType>
        <label translate="true">Affected Countries</label>
        <dataScope>affected_countries</dataScope>
        <componentType>field</componentType>
    </settings>
    <formElements>
        <select>
            <settings>
                <options class="Magento\Config\Model\Config\Source\Locale\Country"/>
            </settings>
        </select>
    </formElements>
</field>

Daraus ergibt sich:

Und ich erwarte, dass die 2 Werte, die ich in das Standardfeld eingegeben habe, ausgewählt werden:

Wenn ich das Element in eine einfache Mehrfachauswahl verwandle, funktioniert es gut.

<field name="affected_countries" formElement="multiselect" sortOrder="100">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="source" xsi:type="string">article</item>
            <item name="default" xsi:type="string">RO,MD</item>
        </item>
    </argument>
    <settings>
        <dataType>text</dataType>
        <label translate="true">Affected Countries</label>
        <dataScope>affected_countries</dataScope>
    </settings>
    <formElements>
        <multiselect>
            <settings>
                <options class="Magento\Config\Model\Config\Source\Locale\Country"/>
            </settings>
        </multiselect>
    </formElements>
</field>

Ich habe mit diesem Format für die defaultEinstellung gebunden

<item name="default" xsi:type="string">RO,MD</item>

und dieser auch:

<item name="default" xsi:type="array">
    <item name="MD" xsi:type="string">MD</item>
    <item name="RO" xsi:type="string">RO</item>
</item>

Auch mit dem Tag selectund multiselectinnerhalb des formElementsTags versucht .
Alle meine Versuche schlugen fehl.

Die defaultEinstellung in anderen Feldern, wie hier beschrieben (Text, Auswahl, Datum, ...), funktioniert einwandfrei.

Irgendwelche Vorschläge für die Fancy Selects? Etwas, das ich verpasst habe?

Hinweis: Ich weiß, dass ich im Datenprovider einen Standardwert angeben kann, der das Formular ausfüllt, aber ich versuche dies zu vermeiden, da es hässlich aussieht und nicht so erweiterbar ist und nicht mit den übrigen Feldern übereinstimmt.


hast du es mit der id der optionen versucht?
Adrian Z.

MD und RO sind die IDs der Optionen. Wie gesagt, es funktioniert mit einer normalen Mehrfachauswahl mit denselben Standardwerten
Marius

<items name = "default" xsi: type = "array"> </ items>
Idham Choudry

@IdhamChoudry Das habe ich schon ausprobiert. So steht es in der Frage.
Marius

1
@ LazyCoder werfen Sie einen Blick in meine Frage dazu <options class="Magento\Config\Model\Config\Source\Locale\Country"/>. Sie benötigen eine ähnliche Klasse, die \Magento\Framework\Option\ArrayInterfaceeine Methode mit dem Namen implementiert und hat toOptionArray, die ein Array mit Ihren Werten zurückgibt. Jedes Element aus dem Array muss so aussehen['value' => ..., 'label' => ...]
Marius

Antworten:


1

Ich habe für benutzerdefinierte Kategorien gearbeitet, aber bei dieser Methode müssen Sie Länderdaten über eine Datenbank bereitstellen, eine Idee aus diesem Code übernehmen und möglicherweise Daten aus Db oder statischen Daten bereitstellen, indem Sie Magento-Daten erweitern

Der XML-Code

    <field name="country_id">
    <argument name="data" xsi:type="array">
        <item name="options" xsi:type="object">Vendor\Module\Model\Config\Source\CountriesTree</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Country</item>
            <item name="formElement" xsi:type="string">select</item>
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/ui-select</item>
            <item name="elementTmpl" xsi:type="string">ui/grid/filters/elements/ui-select</item>
            <item name="dataScope" xsi:type="string">category_id</item>
            <item name="filterOptions" xsi:type="boolean">true</item>
            <item name="chipsEnabled" xsi:type="boolean">true</item>
            <item name="showCheckbox" xsi:type="boolean">true</item>
            <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="multiple" xsi:type="boolean">true</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
            <item name="sortOrder" xsi:type="number">30</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">false</item>
            </item>
            <item name="listens" xsi:type="array">
                <item name="index=create_category:responseData" xsi:type="string">setParsed</item>
                <item name="newOption" xsi:type="string">toggleOptionSelected</item>
            </item>
        </item>
    </argument>
</field>

Der Cofig Code

<?php

namespace Vendor\Module\Model\Config\Source;

class CountriesTree implements \Magento\Framework\Option\ArrayInterface
{

protected $_countryCollectionFactory;

protected $_options;

protected $_childs;


public function __construct(
    \Vendor\Module\Model\ResourceModel\Country\CollectionFactory 
 $countryCollectionFactory
) {
    $this->_countryCollectionFactory = $countryCollectionFactory;
}

public function toOptionArray()
{
    if ($this->_options === null) {
        $this->_options = $this->_getOptions();
    }
    return $this->_options;
}

protected function _getOptions($itemId = 0)
{
    $childs =  $this->_getChilds();
    $options = [];

    if (isset($childs[$itemId])) {
        foreach ($childs[$itemId] as $item) {
            $data = [
                'label' => $item->getCountry_title(),
                'value' => $item->getCountry_id(),
            ];

             if (isset($childs[$item->getCountry_id()])) {
                 $data['optgroup'] = $this->_getOptions($item->getCountry_id());
             }

            $options[] = $data;
        }
    }

    return $options;
}

protected function _getChilds()
{
    if ($this->_childs === null) {
        $this->_childs =  $this->_countryCollectionFactory->create()
            ->getGroupedChilds();
    }
    return $this->_childs;
}
}

Die Ausgabe sieht so aus Bildbeschreibung hier eingeben


oh ... aber diese Frage wurde vor 7 Monaten gestellt :(
sheraz khan

Die Werte stammen bereits aus der Datenbank. Ich brauche nur auf dem "Bildschirm hinzufügen", wenn ich nicht etwas bearbeitet habe, das in der Datenbank gespeichert ist, um Standardwerte vorzuwählen. Ich glaube nicht, dass dies mein Problem löst. Außerdem brauche ich keine baumähnliche Struktur. Ich habe nur eine flache Liste von Ländern.
Marius

Ja, wir müssen Standarddaten dafür verwenden, in meinem Fall schreibe ich einen Datenprovider, aber in Ihrem Fall ist dies in einem nicht effizienten Ansatz, in Ihrem Fall per XML geeignet
sheraz khan
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.