0

Is there any way that I can add a JS/Jquery file which may able to listen my uicomponent's (checkbox/Radio) event (like OnClick or OnChange) so that I can do some operation with that. That UiComponent i used for an admin form (mentioned below). Please help me on how to add a js/jquery in admin uiComponent form. Actually I want to avoid knockoutJS because of its complexity and lengthy process.

my_uicomponent_form.xml

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<fieldset name="checkout_process_options">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="collapsible" xsi:type="boolean">true</item>
            <item name="opened" xsi:type="boolean">false</item>
            <item name="label" xsi:type="string" translate="true">Checkout Process Settings</item>
        </item>
    </argument>
    <field name="main_data">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">SHasan\MyModule\Model\Source\Data\MainData</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Main Data</item>
                    <item name="formElement" xsi:type="string">radioset</item>
                    <item name="disabled" xsi:type="boolean">false</item>                        
                </item>
        </argument>
    </field>        
    <field name="secondary_options">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">SHasan\MyModule\Model\Source\Data\SecondaryOptions</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Secondary Options</item>
                    <item name="formElement" xsi:type="string">checkboxset</item>
                    <item name="disabled" xsi:type="boolean">false</item>                        
                </item>
        </argument>
    </field>
    <field name="optional_options">
        <argument name="data" xsi:type="array">
            <item name="options" xsi:type="object">SHasan\MyModule\Model\Source\Data\OptionalOptions</item>
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Optional Options</item>
                    <item name="formElement" xsi:type="string">checkboxset</item>
                    <item name="disabled" xsi:type="boolean">false</item>                        
                </item>
        </argument>
    </field>
</fieldset>

1 Answer 1

0

Yes, you can do that by using a .phtml file (for writing your JQuery/JS code) and linking it with your UI component inside the layout file.
Inside view/adminhtml/layout/frontname_controller_action.xml

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="styles"/>
    <body>
        <referenceContainer name="content">
            <uiComponent name="YourUIcomponent"/>
            <block class="Magento\Backend\Block\Template" name="fieldname" template="Vendor_Extension::Yourtemplatefile.phtml"/>
        </referenceContainer>
        
    </body>
</page>

Then create a template file and write your JQuery/JS code in the script tags
view/adminhtml/templates/Yourtemplatefile.phtml

<script type="text/javascript">
---Your code---
</script>

Hopefully, this info is useful.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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