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.

enter image description here

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:

enter image description here

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.

• Silvan: I'm facing the same issue, how did you change the array so it passes array with string values?
• Langley: When i posted the question i was just testing the ui component. I manually written the array in data provider the form was using. In normal scenario my code is selecting the data from database (custom tables) and the results are strings. So in the end just using the normal data from database worked. If you think that the integers are real problem, you can always iterate over the array and change the type of the values with for example (string) $value