How do i add custom jquery to a page widget in magento 2 admin?

Question

I'm creating a new widget which can be added to a cms page in admin, i have all the fields defined and it adds the widget to the page, but i need to load in some custom jquery so i can attach some events to the form fields.

So here is the xml definition with the parameters that i need to also inject the jquery:

<widget class="Vendor\Module\Block\Widget\Posts" id="vendor_module_posts">
            <label>RssFeeds Articles by Posts</label>
        <description>Widget to show the latest articles from the processed RSS Feeds</description>
        <parameters>
            <parameter name="title" sort_order="5" visible="true" xsi:type="text">
                <label>Title</label>
            </parameter>
            <parameter name="rss_posts" xsi:type="multiselect" visible="true" sort_order="10" source_model="Vendor\Module\Ui\Component\Listing\Column\RssPosts">
                <label translate="true">Posts</label>
            </parameter>
            <parameter name="show_image" xsi:type="select" required="true" source_model="Vendor\Module\Model\Config\Source\Select" visible="true" sort_order="20" >
                <label translate="true">Show image</label>
                <description>Select type option</description>
            </parameter>
            <parameter name="show_author" xsi:type="select" required="true" source_model="Vendor\Module\Model\Config\Source\Select" visible="true" sort_order="30" >
                <label translate="true">Show author</label>
                <description>Select type option</description>
            </parameter>
            <parameter name="show_published_date" xsi:type="select" required="true" source_model="Vendor\Module\Model\Config\Source\Select" visible="true" sort_order="40" >
                <label translate="true">Show published date</label>
                <description>Select type option</description>
            </parameter>
            <parameter name="show_title" xsi:type="select" required="true" source_model="Vendor\Module\Model\Config\Source\Select" visible="true" sort_order="50" >
                <label translate="true">Show title</label>
                <description>Select type option</description>
            </parameter>
            
        </parameters>
    </widget>

I'm basically wanting to add some jquery to attach to some of the elements for change events etc.

NOTE: This is only for the admin area where you actually select the widget to add to the page and select the options, i don't need the jquery on the frontend (that bit i already know how to do)

Answer 1

To add custom jQuery to a page widget in the Magento 2 admin, you can follow these steps:

1. Create a JavaScript file that contains your custom jQuery code. Let's say you name it custom-widget.js. Place this file in your module's view/adminhtml/web/js directory.

2. In your module's layout XML file (e.g., view/adminhtml/layout/widget.xml), add the following code inside the node:

    <parameter name="for" xsi:type="block" required="true" visible="true">
      <block class="Magento\Backend\Block\Template" template="Vendor_Module::widget/js.phtml"/>
    </parameter>
   

3. Create the js.phtml template file in your module's view/adminhtml/templates/widget directory. This file will be used to include your JavaScript file:

   <script>
        require(['jquery'], function ($) {
          $(document).ready(function () {
            // Your custom jQuery code here
            // Attach events to the form fields using jQuery
            // Example: $('#field-id').on('change', function() { ... });
          });
       });
   </script>
   

4. In your module's view/adminhtml/layout/widget.xml file, locate the node and add the following code inside it:

   <referenceContainer name="js">
      <block class="Magento\Backend\Block\Template" template="Vendor_Module::widget/js.phtml"/>
   </referenceContainer>
   

5. Clear the Magento cache.

Now, when you add your widget to a CMS page in the admin area, the custom-widget.js file will be loaded, and the custom jQuery code inside the js.phtml template will be executed.

Make sure to replace Vendor_Module with the appropriate values for your module. Also, remember to adjust the JavaScript code in js.phtml to match your specific requirements.

This approach allows you to add your custom jQuery code specifically for the admin area where you select the widget and configure its options.

I hope this helps!