Adding custom js and css to Product grid in Magento 2

Question

Can we add custom JavaScript and CSS to the Product grid. I've created a product_listing.xml within my own module, and it's working, but can we add custom JS and CSS to product_listing.xml like we do for page layouts?

Here's my product_listing.xml located in MyCompany/MyModule/view/adminhtml/ui_component.

<?xml version="1.0" encoding="UTF-8"?>
    <listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
        <listingToolbar name="listing_top">
            <massaction name="listing_massaction">
                <action name="upload">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="type" xsi:type="string">upload</item>
                            <item name="label" xsi:type="string" translate="true">Upload</item>
                            <item name="url" xsi:type="url" path="myroute/product/upload"/>
                        </item>
                    </argument>
                </action>
                <action name="check_import_status">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="type" xsi:type="string">check_import_status</item>
                            <item name="label" xsi:type="string" translate="true">Check Source Document Status</item>
                            <item name="url" xsi:type="url" path="myroute/product/updatesourcestatus"/>
                        </item>
                    </argument>
                </action>
                <action name="request_translations">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="type" xsi:type="string">request_translations</item>
                            <item name="label" xsi:type="string" translate="true">Request Translations</item>
                            <item name="url" xsi:type="url" path="myroute/product/requesttranslations"/>
                        </item>
                    </argument>
                </action>
                <action name="check_target_status">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="type" xsi:type="string">check_target_status</item>
                            <item name="label" xsi:type="string" translate="true">Check Translations Status</item>
                            <item name="url" xsi:type="url" path="myroute/product/updatetargetstatus"/>
                        </item>
                    </argument>
                </action>
                <action name="download_translations">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="type" xsi:type="string">download_translations</item>
                            <item name="label" xsi:type="string" translate="true">Download Translations</item>
                            <item name="url" xsi:type="url" path="myroute/product/downloadtranslations"/>
                        </item>
                    </argument>
                </action>
                <action name="disassociate_translations">
                    <argument name="data" xsi:type="array">
                        <item name="config" xsi:type="array">
                            <item name="type" xsi:type="string">disassociate_translations</item>
                            <item name="label" xsi:type="string" translate="true">Disassociate Translations</item>
                            <item name="url" xsi:type="url" path="myroute/product/disassociatetranslations"/>
                        </item>
                    </argument>
                </action>
            </massaction>
        </listingToolbar>
        <columns name="product_columns" class="Magento\Catalog\Ui\Component\Listing\Columns">
            <column name="source" class="MyCompany\MyModule\Ui\Component\Listing\Columns\SourceIcon">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="filter" xsi:type="string">text</item>
                        <item name="component" xsi:type="string">MyCompany_MyModule/js/grid/columns/sourceicon</item>
                        <item name="add_field" xsi:type="boolean">true</item>
                        <item name="label" xsi:type="string" translate="true">Source</item>
                        <item name="sortOrder" xsi:type="number">34</item>
                    </item>
                </argument>
            </column>
            <column name="translations" class="MyCompany\MyModule\Ui\Component\Listing\Columns\TargetIcon">
                <argument name="data" xsi:type="array">
                    <item name="config" xsi:type="array">
                        <item name="filter" xsi:type="string">text</item>
                        <item name="component" xsi:type="string">MyCompany_MyModule/js/grid/columns/targeticon</item>
                        <item name="add_field" xsi:type="boolean">true</item>
                        <item name="label" xsi:type="string" translate="true">Translations</item>
                        <item name="sortOrder" xsi:type="number">37</item>
                    </item>
                </argument>
            </column>
        </columns>
    </listing>

Mohammad, I want to add js and css to a custom icon I've created in each product row. — Joseph Hovik
– Joseph Hovik, Commented Jun 1, 2017 at 15:23
Prince Patel, yes thank you for your answer. However I get this error when adding the code you cited at the top of my product_listing.xml file: Exception #0 (Exception): Warning: DOMDocument::loadXML(): Extra content at the end of the document in Entity, line: 6 in /home/username/web/magento2/vendor/magento/framework/View/Element/UiComponent/Config/DomMerger.php on line 324. — Joseph Hovik
– Joseph Hovik, Commented Jun 1, 2017 at 15:33

xanka · Accepted Answer · 2022-02-11 08:50:01Z

You can add JS and CSS in layout .XML files. The layout file you added product_listing.xml. This is example: .../Namespace_ModuleName/view/adminhtml/layout/modulename_page_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head> // add custom js and CSS in here
        <css src="css/filename.css"/>
        <script src="js/filename.js"/> 
    </head>
    <body>
        <referenceContainer name="content">
            <uiComponent name="product_listing"/>
        </referenceContainer>
    </body>
</page>

Rafael Corrêa Gomes · Accepted Answer · 2017-06-01 04:28:19Z

0

You can add using some XML tags like these below.

CSS:

code / vendorname / modulename / view / frontend(for admin adminhtml) / web /css / filename.css

JS:

code / vendorname / modulename / view / frontend(for admin adminhtml) / web /js / filename.js

XML:

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <css src="css/filename.css"/>
        <script src="js/filename.js"/> 
    </head>
</page>

answered Jun 1, 2017 at 4:28

Rafael Corrêa Gomes

14k15 gold badges93 silver badges192 bronze badges

Thanks Rafael again for your answer. I'm still trying to figure out the information you sent me about Magento 2 plugins. :)

Joseph Hovik
– Joseph Hovik

2017-06-01 15:39:21 +00:00
Commented Jun 1, 2017 at 15:39

Add a comment |

Prince Patel · Accepted Answer · 2017-06-02 12:02:12Z

0

You need to add "fieldClass" property to the column configuration:

<column name="column_name">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="fieldClass" xsi:type="string">your-css-class</item>
        </item>
    </argument>
</column>

edited Jun 2, 2017 at 12:02

answered Jun 1, 2017 at 5:33

Prince Patel

23.1k10 gold badges102 silver badges124 bronze badges

Add a comment |

Stack Exchange Network

Adding custom js and css to Product grid in Magento 2

3 Answers 3

Your Answer

Hot Network Questions

Adding custom js and css to Product grid in Magento 2

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions