Preselect default options in the Ui-select component of Magento 2

Question

I'm able to load custom options into the select but I don't know how to pre-select some of these options at page load

My UI field:

<field name="products">
 <argument name="data" xsi:type="array">
 <item name="options" xsi:type="object">vendor\Module\Model\Attribute\Source\SourceName</item>
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Products</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">products</item>
 <item name="filterOptions" xsi:type="boolean">true</item>
 <item name="showCheckbox" xsi:type="boolean">true</item>
 <item name="disableLabel" xsi:type="boolean">true</item>
 <item name="chipsEnabled" 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">10</item>
 <item name="required" xsi:type="boolean">true</item>
 </item>
 </argument>
</field>

My options source class:

<?php
namespace vendor\Module\Model\Attribute\Source;
class SourceName implements \Magento\Framework\Option\ArrayInterface
{
 protected $productCollection;
 public function __construct(
 \Magento\Catalog\Model\ResourceModel\Product\Collection $productCollection
 ) {
 $this->productCollection = $productCollection;
 }
 public function toOptionArray()
 {
 // Load the products as options
 $products = $this->productCollection->load();
 $options = [];
 /* @todo: add query to load selected options */
 foreach ($products as $product){
 $options[] = [
 "value" => $product->getId(),
 "label" => $product->getSku()
 ];
 }
 return $options;
 }
}

Preview:

enter image description here

Maybe using dataProviders? Can you provide some example to help me pre-select options ? Thanks

• chirag dodia: How you achieve dropdown with select in product edit page?
• Manuel Di Iorio: @chiragdodia it's the ui-select component of Magento, my above code shows how to achieve it. showCheckbox = true will show the checkboxes

Answer 1

Use default argument in config

<item name="default" xsi:type="string">1</item>

Final Code:

<field name="storeview">
 <argument name="data" xsi:type="array">
 ...
 <item name="config" xsi:type="array">
 ...
 <item name="default" xsi:type="string">1</item>
 ...
 </item>
 </argument>
</field>

• Manuel Di Iorio: I need to dinamically preselect multiple values of this multi-select
• quickshiftin: I did not need to have this dynamically, just needed to set it in the XML, and this worked for me - thanks!

Answer 2

Solved by injecting the data into the form dataProvider:

$this->loadedData[$model->getId()]["products"] = ["1", "3"]; // array of ID strings

• akgola: could you please share full code, I am also not able to populate pre selected values?
• Devidas: could you please share full code, I am also not able to populate pre selected values
• Manuel Di Iorio: I don't work anymore on this company project and haven't got access anymore to the code, I apologize.

Answer 3

enter image description here
Your loop working like this
public function toOptionArray() { $options = []; $options[] =
[ 'label' => 'New Tab', 'value' => '_blank' ];
$options[] = [ 'label' => 'Same Tab', 'value' => '_self' ]; $options[] = [ 'label' => 'test', 'value' => 'test' ] };

And Please add component like below
<field name="urltarget"> <argument name="data" xsi:type="array"> <item name="options" xsi:type="object">Vendor\Module\Model\Targetoptions</item> <item name="config" xsi:type="array"> <item name="dataType" xsi:type="string">text</item> <item name="label" xsi:type="string" translate="true">Slide Url Open In</item> <item name="formElement" xsi:type="string">select</item> <item name="source" xsi:type="string">sliders</item> <item name="sortOrder" xsi:type="number">5</item> <item name="dataScope" xsi:type="string">urltarget</item> </item> </argument> </field>

Answer 4

Magento 2 UI component form set default value for fields. Add the below code xml in your field config

<item name="default" xsi:type="string">1</item>

Like as:-

 <field name="fieldname">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="default" xsi:type="number"1</item>
 </item>
 </argument>
 </field>