1

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>
  • What you want achieve ? – Mohammad Mujassam Jun 1 '17 at 3:17
  • Did you get my answer? – Prince Patel Jun 1 '17 at 6:14
  • Mohammad, I want to add js and css to a custom icon I've created in each product row. – Joseph Hovik Jun 1 '17 at 15:23
  • 1
    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 Jun 1 '17 at 15:33
  • @JosephHovik. Check my updated answer. – Prince Patel Jun 2 '17 at 12:02
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>
-1

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>
  • Thanks Rafael again for your answer. I'm still trying to figure out the information you sent me about Magento 2 plugins. :) – Joseph Hovik Jun 1 '17 at 15:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.