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 🙂