Как правильно заполнить пользовательский интерфейс - выберите компонент


Я хотел бы скопировать новый инструмент выбора категорий из формы редактирования продукта в мою пользовательскую форму.

enter image description here

Я обнаружил, что этот компонент основан на

\Magento_Ui\view\base\web\js\form\element\ui-select.js

Поэтому я добавил следующее к своему определению формы:

<field name="categories">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">Magento\Catalog\Ui\Component\Product\Form\Categories\Options</item>
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Category</item>
                <item name="componentType" xsi:type="string">field</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">categories</item>
                <item name="filterOptions" xsi:type="boolean">false</item>
                <item name="showCheckbox" xsi:type="boolean">true</item>
                <item name="chipsEnabled" xsi:type="boolean">true</item>
                <item name="disableLabel" xsi:type="boolean">true</item>
            <item name="levelsVisibility" xsi:type="number">1</item>
                <item name="multiple" xsi:type="boolean">true</item>
                <item name="sortOrder" xsi:type="number">20</item>
                <item name="listens" xsi:type="array">
                    <item name="newOption" xsi:type="string">toggleOptionSelected</item>
                </item>
                <item name="required" xsi:type="boolean">true</item>
                <item name="source" xsi:type="string">conditions</item>
                <item name="validation" xsi:type="array">
                    <item name="required-entry" xsi:type="boolean">true</item>
                </item>
            </item>
        </argument>
    </field>

Это прекрасно работает. Компонент отображается, я также могу выбрать категории, и выбранные категории также отправляются вместе с остальной частью формы.

Однако я не уверен, как правильно заполнить компонент от поставщика данных при загрузке страницы. Когда поставщик данных возвращает массив с различными идентификаторами категорий, например

[7, 9]

Компонент получает идентификаторы (при сохранении формы я вижу значения в запросе), но при отображении страницы "крошки" не видны. Вот так:

enter image description here

Итак, как этот компонент может быть заполнен существующими категориями?

Author: Vishwas Bhatnagar, 2016-08-23

1 answers

Оказывается, проблема в том, что я пытался передать массив с целыми числами компоненту. В случае, если выбор пользовательского интерфейса является множественным выбором:

<item name="multiple" xsi:type="boolean">true</item>

Это не работает. Что работает, так это передача массива со строковыми значениями:

['7', '9']

Не уверен, почему это так. Если выбор не является множественным выбором:

<item name="multiple" xsi:type="boolean">false</item>

Целые числа можно использовать без проблем.

 3
Author: Langley, 2016-08-24 08:49:48