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:
Maybe using dataProviders? Can you provide some example to help me pre-select options ? Thanks
Solution 2
Solved by injecting the data into the form dataProvider:
$this->loadedData[$model->getId()]["products"] = ["1", "3"]; // array of ID strings
OTHER TIPS
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>
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>