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

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>

Answer 2

Solved by injecting the data into the form dataProvider:

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

Answer 3

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>