How to properly populate ui-select component

Question

I would like to copy the new category picker, from product edit form, to my custom form.

I found out that this component based on

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

so i added following to my form definition:

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

This works fine. The component is displayed, i can pick the categories as well and the selected categories are also sent with the rest of the form.

However im not sure how to properly populate the component from data provider on page load. When the data provider returns array with different category ids e.g.

[7, 9]

The component receives the ids (when save the form i see the values in the request), but when the page is displayed the 'crumbs' are not visible. Like this:

So how can this component be populated with existing categories?

Answer 1

It turns out that the problem is, that i was trying to pass array with integers to the component. In case the ui-select is multiselect:

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

this doesn't work. What works is passing array with string values:

['7', '9']

Not sure why that is. If the select is not multiselect:

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

integers can be used without issues.