There are visual swatch uploader available in store -> product -> Edit "color" attribute and Manage Swatch (Values of Your Attribute) like display in below image.
I want to apply same that uploader in my custom module's UI form. I found that code in this file. But, not getting output.
vendor/magento/module-swatches/view/adminhtml/templates/catalog/product/attribute/visual.phtml
How can I add in my UI form?
Any help would be appreciated !!
You have to add below line in your ui_component file
<field name="swatchvisual" component="Magento_Swatches/js/form/element/swatch-visual" template="Magento_Swatches/swatch-visual" formElement="select">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">category</item>
<item name="uploadUrl" xsi:type="url" path="swatches/iframe/show"/>
<item name="prefixName" xsi:type="string">swatchvisual.value</item>
<item name="prefixElementName" xsi:type="string">option_</item>
</item>
</argument>
<settings>
<additionalClasses>
<class name="swatches-visual-col">true</class>
</additionalClasses>
<label translate="true">Swatch</label>
</settings>
</field>
copy
vendor/magento/module-swatches/view/adminhtml/web/js/form/element/swatch-visual.js
to your custom module and change in configureDataScope function.
and add these css in your layout file.
<head>
<css src="Magento_Swatches::css/swatches.css"/>
<css src="jquery/colorpicker/css/colorpicker.css"/>
</head>
UPDATE change ui xml like this.
<field name="swatchvisual" component="Magento_Swatches/js/form/element/swatch-visual" template="Vendor_Module/swatch-visual" formElement="select">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="source" xsi:type="string">category</item>
<item name="uploadUrl" xsi:type="url" path="swatches/iframe/show"/>
<item name="prefixName" xsi:type="string">swatchvisual.value</item>
<item name="prefixElementName" xsi:type="string">option_</item>
</item>
</argument>
<settings>
<additionalClasses>
<class name="swatches-visual-col">true</class>
</additionalClasses>
<label translate="true">Swatch</label>
</settings>
</field>
replace template file to your template file with following content to fix design issue.
<div class="admin__field"
visible="visible"
css="$data.additionalClasses"
attr="'data-index': index">
<div class="admin__field-label" visible="$data.labelVisible">
<label if="$data.label" attr="for: uid">
<span translate="label" attr="'data-config-scope': $data.scopeLabel"/>
</label>
</div>
<div class="admin__field-control"
visible="visible"
css="$data.additionalClasses">
<input type="hidden" data-bind="
attr: {
name: inputName
},
value: value
"/>
<div attr="class: 'swatch_window ' + elementName" ko-style="backgroundColor: $data.value"></div>
<div class="swatch_sub-menu_container">
<div class="swatch_row position-relative">
<div class="swatch_row_name colorpicker_handler">
<p translate="'Choose a color'"></p>
</div>
</div>
<div class="swatch_row">
<div data-bind="
attr: {
class: 'swatch_row_name btn_choose_file_upload swatch_choose_file_option_' + elementName,
'data-class': 'swatch_choose_file_option_' + elementName
}
">
<p translate="'Upload a file'"></p>
</div>
</div>
<div class="swatch_row">
<div class="swatch_row_name btn_remove_swatch">
<p translate="'Clear'"></p>
</div>
</div>
</div>
</div>
</div>
Hope this will help you
