Zend certified PHP/Magento developer

Create a product chooser field with ui component form

I want to create a form field allowing to choose (multiple products and associating a position to them).

I need to get a solution where i could select a set a products and give them a position in my custom entity).

  • My first work around was to create a select box and listing all the product sku source inside.

      <field name="product_id" sortOrder="40" formElement="select">
          <argument name="data" xsi:type="array">
              <item name="config" xsi:type="array">
                  <item name="source" xsi:type="string">products_homepage</item>
              </item>
          </argument>
          <settings>
              <validation>
                  <rule name="required-entry" xsi:type="boolean">true</rule>
              </validation>
              <dataType>int</dataType>
              <label translate="true">Product Sku</label>
          </settings>
          <formElements>
              <select>
                  <settings>
                      <options class="CpyMiseEnAvantOptionProductOption"/>
                  </settings>
              </select>
          </formElements>
      </field>
    

This works fine but the ux is disgusting and it requires to select only one product and have one product for one position all the time.

The objective would be to get all the products and position at once

It looks great,
But even if it looks better writting only the skus doesn’t fit what we need for UX.

We would like to get a real array with the producs like the products in category tab or even like the grid products. The ideal would be to have a select product button like that will open a product chooser and then adding it to an array where we could drag and drop to change the position / order.

Right now my only lead would be to to for a custom template and coding everything from scratch

        <container name="assign_products">
            <htmlContent name="html_content">
                <argument name="block" xsi:type="object">CpyMiseEnAvantBlockAdminhtmlProductChooser</argument>
            </htmlContent>
        </container>

To get a custom template where i would do everything on my own

class ProductChooser extends Template{

/**
 * Block template.
 *
 * @var string
 */
protected $_template = 'product_chooser.phtml';

public function __construct(TemplateContext $context,
                            array $data = [], ?JsonHelper $jsonHelper = null, ?DirectoryHelper $directoryHelper = null)
{
    parent::__construct($context, $data, $jsonHelper, $directoryHelper);
}

}

But I don’t know…I have the feeling that somewhere in magento there is the pieces we need to do that…it’s existing in the categories…there might be a way.

Any leads or solutions would be appreciated.