Como: Usar el InsertListing Ui Component en Magento 2

De vez en cuando necesitas embeber un grid dentro de un formulario, piensa en la pantalla de “agregar productos a una categoría”, donde un listing te deja marcar los registros que quieres y la selección se guarda con la entidad padre. El componente que hace esto posible es insertListing, y es uno de los Ui Components más útiles, y más confusos, de Magento.

Agregar el insertListing a tu formulario

Dentro de un fieldset de tu formulario, declaras un campo insertListing. Referencia un listing existente por su nombre y le dice al formulario cómo intercambiar datos con él.

<?xml version="1.0"?>
<!-- app/code/Vendor/Module/view/adminhtml/ui_component/vendor_entity_form.xml -->
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="items">
        <settings>
            <label translate="true">Selected items</label>
        </settings>
        <insertListing name="vendor_entity_items_listing">
            <settings>
                <autoRender>true</autoRender>
                <dataScope>vendor_entity_items_listing</dataScope>
                <externalProvider>vendor_entity_items_listing.vendor_entity_items_listing_data_source</externalProvider>
                <selectionsProvider>vendor_entity_items_listing.vendor_entity_items_listing.item_columns.ids</selectionsProvider>
                <ns>vendor_entity_items_listing</ns>
                <exportField>selected_items</exportField>
                <imports>
                    <link name="storeId">${ $.provider }:data.store_id</link>
                </imports>
            </settings>
        </insertListing>
    </fieldset>
</form>

Las dos settings que hacen tropezar a la gente son:

1. selectionsProvider — la ruta a la columna de checkboxes del listing. Esto es lo que le dice al formulario qué filas están marcadas.
2. exportField — el campo del formulario donde terminan los ids seleccionados, para que se envíen junto con el resto del formulario al guardar.

El listing necesita una columna de checkbox

Para que la selección funcione, el listing referenciado debe tener un selectionsColumn:

<columns name="item_columns">
    <selectionsColumn name="ids">
        <settings>
            <indexField>entity_id</indexField>
        </settings>
    </selectionsColumn>
    <!-- tus otras columnas -->
</columns>

Al guardar, lees selected_items de la data del formulario y persistes la relación en tu propia tabla. Despliega el static content del admin, limpia la caché, y obtienes un grid embebido justo dentro del formulario con su selección conectada al registro padre.

Espero que esto ayude.

Si tienes alguna pregunta o conoces una mejor manera de lograr esto, siéntete libre de compartir en los comentarios a continuación.