Skip to content

Add thumbnail preview for dynamic row field

In magento 2 it is easy to add a Thumbnail column within a listing Ui Component, like so:

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="product_columns" class="MagentoCatalogUiComponentListingColumns">
        <column name="thumbnail" class="MagentoCatalogUiComponentListingColumnsThumbnail"
                component="Magento_Ui/js/grid/columns/thumbnail" sortOrder="20">
            <settings>
                <altField>name</altField>
                <hasPreview>1</hasPreview>
                <addField>true</addField>
                <label translate="true">Thumbnail</label>
                <sortable>false</sortable>
             </settings>
        </column>
    </columns>
</listing>

In the above code you can see that in the settings, you can easily choose that the thumbnail has a preview if you click on it with <hasPreview>1</hasPreview>

I was wondering if this is also possible within a dynamic row field. I am using a form UI component. Something like:

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="products" sortOrder="20">
        <dynamicRows name="items">
            <container name="record">
                <field name="thumbnail" sortOrder="2">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="formElement" xsi:type="string">input</item>
                            <item name="elementTmpl" xsi:type="string">ui/dynamic-rows/cells/thumbnail</item>
                            <item name="component" xsi:type="string">Magento_Ui/js/form/element/text</item>
                            <item name="dataType" xsi:type="string">text</item>
                            <item name="dataScope" xsi:type="string">thumbnail</item>
                            <item name="fit" xsi:type="boolean">true</item>
                            <item name="label" xsi:type="string" translate="true">Thumbnail</item>
                        </item>
                    </argument>
                <field>
            </container>
        </dynamicRows>
    </fieldset>
</form>

I already tried to use the same setting as the listing UI component, but that doesn’t work.
Does someone know how you can add a preview to a thumbnail field within a dynamic row? Please let me know 🙂