Establecer valores predeterminados para un componente ui multiselección


13

Tengo una entidad personalizada en mi instalación de magento 2.
Y uno de los campos en esta entidad es de tipo multiselección y contiene la lista de todos los países.
Estoy usando los componentes ui para mi formulario de administración.
Como hay alrededor de 200 registros en la selección, no quiero tener un campo de selección múltiple porque no es tan fácil de usar.
Así que creé una de esas multiselecciones elegantes similares al campo de categorías en la sección de administración de agregar / editar producto.
Se ve mejor, pero no puedo establecer un valor predeterminado.
Aquí está mi configuración (observe el defaultelemento de configuración):

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

Resulta en esto:

Y espero que se seleccionen los 2 valores que coloqué en el campo predeterminado:

Si convierto el elemento en una simple selección múltiple, funciona muy bien.

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

Atado con este formato para la defaultconfiguración

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

y este también:

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

También probé con la etiqueta selecty multiselectdentro de la formElementsetiqueta.
Todos mis intentos terminaron en fracaso.

El uso de la defaultconfiguración en cualquier otro tipo de campos, como se indica aquí (texto, selección, fecha, ...) funciona bien.

¿Alguna sugerencia para los selectos elegantes? Algo que me perdí?

Nota: Sé que puedo proporcionar un valor predeterminado en el proveedor de datos que llena el formulario, pero estoy tratando de evitar esto, ya que se ve feo y no es tan extensible y no es consistente con el resto de los campos.


intentaste con el id de las opciones?
Adrian Z.

MD y RO son los identificadores de las opciones. Como dije, funciona con una selección múltiple normal usando los mismos valores predeterminados
Marius

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

@IdhamChoudry Ya lo intenté. Lo dice en la pregunta.
Marius

1
@LazyCoder echa un vistazo a mi pregunta sobre esto <options class="Magento\Config\Model\Config\Source\Locale\Country"/>. Necesita una clase similar que implemente \Magento\Framework\Option\ArrayInterfacey tenga un método llamado toOptionArrayque devuelva una matriz con sus valores. cada elemento de la matriz debe tener este aspecto['value' => ..., 'label' => ...]
Marius

Respuestas:


1

Trabajé para categorías personalizadas, pero en este método debe proporcionar datos de países a través de la base de datos, tomar una idea de este código y puede proporcionar datos de Db o datos estáticos extendiendo datos de magento, espero que pueda ayudar

El código xml

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

El código de Cofig

<?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;
}
}

La salida se ve así ingrese la descripción de la imagen aquí


oh ... pero esta pregunta se hizo hace 7 meses :(
sheraz khan

Los valores provienen de la base de datos ya. Solo necesito en la "pantalla Agregar" cuando no estoy editando algo almacenado en la base de datos para preseleccionar los valores predeterminados. No creo que esto resuelva mi problema. Además, no necesito una estructura en forma de árbol. Solo tengo una lista plana de países.
Marius

Sí, debemos usar datos predeterminados para esto, en mi caso escribo el proveedor de datos, pero en su caso esto no es eficiente, en su caso a través de xml es adecuado
sheraz khan
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.