0

I have the following custom form in my admin html and I have tried to insert a javascript function on my custom button click but the page being in a infinity loading loop.

view/adminhtml/ui_component/addfat_form.xml

<?xml version="1.0" encoding="UTF-8"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">    
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">addfat_form.addfat_form_data_source</item>
            <item name="deps" xsi:type="string">addfat_form.addfat_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Nova fatura</item>
        <item name="config" xsi:type="array">
            <item name="dataScope" xsi:type="string">data</item>
            <item name="namespace" xsi:type="string">addfat_form</item>
        </item>
        <item name="template" xsi:type="string">templates/form/collapsible</item>
        <item name="buttons" xsi:type="array">
            <item name="btn_load_client" xsi:type="string">PereiraTech\Faturamento\Block\Adminhtml\Buttons\Edit\Button\CustomButton</item>
        </item>        
    </argument>
    <dataSource name="addfat_form_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">PereiraTech\Faturamento\Model\DataProvider</argument>
            <argument name="name" xsi:type="string">addfat_form_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">fat_id</argument>
            <argument name="requestFieldName" xsi:type="string">fat_id</argument>
        </argument>
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
    </dataSource>
    <fieldset name="title">        
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="collapsible" xsi:type="boolean">false</item>
                <item name="label" xsi:type="string" translate="true">Nova fatura</item>
                <item name="sortOrder" xsi:type="number">20</item>
            </item>
        </argument>
        <field name="fat_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">ID da fatura</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">fatura</item>
                    <item name="dataScope" xsi:type="string">fat_id</item>
                    <item name="disabled" xsi:type="boolean">true</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>        
        <field name="cliente_mail">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">column</item>
                    <item name="label" xsi:type="string" translate="true">Email do cliente</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">employee</item>
                    <item name="dataScope" xsi:type="string">employee_id</item>                    
                </item>              
            </argument>                        
        </field>             
        <field name="cliente">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Cliente</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">fatura</item>
                    <item name="dataScope" xsi:type="string">cliente</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="cliente_cpf_cnpj">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">CPF/CNPJ</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">fatura</item>
                    <item name="dataScope" xsi:type="string">cliente_cpf_cnpj</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="vendas_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string">Compras</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="formElement" xsi:type="string">multiselect</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                    <item name="source" xsi:type="string">fatura</item>
                    <item name="dataScope" xsi:type="string">vendas_id</item>
                </item>
                <item name="options" xsi:type="object">PereiraTech\Faturamento\Model\DataProvider</item>
            </argument>
        </field>
        <field name="data_inicio">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="label" xsi:type="string" translate="true">De</item>
                    <item name="formElement" xsi:type="string">date</item>
                    <item name="source" xsi:type="string">fatura</item>
                    <item name="sortOrder" xsi:type="number">20</item>
                    <item name="dataScope" xsi:type="string">data_inicio</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                    <item name="options" xsi:type="array">
                        <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>                        
                        <item name="showsTime" xsi:type="boolean">false</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="data_fim">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">string</item>
                    <item name="label" xsi:type="string" translate="true">Até</item>
                    <item name="formElement" xsi:type="string">date</item>
                    <item name="source" xsi:type="string">fatura</item>
                    <item name="sortOrder" xsi:type="number">21</item>
                    <item name="dataScope" xsi:type="string">data_fim</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                    <item name="options" xsi:type="array">
                        <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>                        
                        <item name="showsTime" xsi:type="boolean">false</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="subtotal">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">number</item>
                    <item name="label" xsi:type="string" translate="true">Subtotal:</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">fatura</item>
                    <item name="dataScope" xsi:type="string">subtotal</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>        
        <field name="desconto">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">number</item>
                    <item name="label" xsi:type="string" translate="true">Desconto</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">fatura</item>
                    <item name="dataScope" xsi:type="string">desconto</item>
                </item>
            </argument>
        </field>
        <field name="total">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">number</item>
                    <item name="label" xsi:type="string" translate="true">Total</item>
                    <item name="formElement" xsi:type="string">input</item>
                    <item name="source" xsi:type="string">fatura</item>
                    <item name="dataScope" xsi:type="string">total</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="pago">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="dataType" xsi:type="string">boolean</item>
                    <item name="label" xsi:type="string" translate="true">Pago</item>
                    <item name="formElement" xsi:type="string">checkbox</item>
                    <item name="source" xsi:type="string">fatura</item>
                    <item name="dataScope" xsi:type="string">pago</item>
                    <item name="prefer" xsi:type="string">toggle</item>                    
                    <item name="valueMap" xsi:type="array">
                        <item name="true" xsi:type="number">1</item>
                        <item name="false" xsi:type="number">2</item>
                    </item>
                    <item name="default" xsi:type="number">1</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
        </field>
        <field name="sync" sortOrder="40" formElement="button">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="title" xsi:type="string">Sync</item>
                    <item name="align" xsi:type="string">center</item>   
                    <item name="component" xsi:type="string">PereiraTech_Faturamento/js/form/element/options</item>                 
                </item>
            </argument>
        </field>      
    </fieldset>
</form>

view/adminhtml/web/js/form/element/options.js

define([        
    'Magento_Ui/js/form/element/select',
    'Magento_Ui/js/modal/modal'
], function ($, select, modal) {
    'use strict';

    return select.extend({


        onClick: function(){
            console.log('Worked');


            return this._super();
        },
    });
});

A point is that the button doesn't show up too.

The page at infinity loop loading

[UPDATE] First, that was a mistake at the XML, the path for the JS file was wrong, solved. Second, I've updated my JS code following magefms code, but the require was giving another error, so I've roll back to define. I looked at the console and saw a new error that sounds as progress.

[ERROR] Failed to load the "PereiraTech_Faturamento/js/form/element/options" component

Now the page loads but the component still missing.

0

Try to use require instead

require([    
 'jquery', 
 'Magento_Ui/js/form/element/select',
    'Magento_Ui/js/modal/modal'
], function ($, select, modal) {
    'use strict';

    return select.extend({

        /**
         * On value change handler.
         *
         * @param {String} value
         */
        $(document).on("click", function(){
            console.log('Worked');

            var field1 = uiRegistry.get('index = data_fim');
            field1.hide();

            return this._super();
        },
    });
});

UPDATE: Format your element options component path like this:

PereiraTech_Faturamento/js/form/element/options

no need for full path with view/adminhtml/web/js....

  • Unfortunately, it doesn't worked. – Murilo Pereira Apr 11 at 15:50
  • @MuriloPereira updated answer please check – magefms Apr 11 at 15:58
  • updated question, please check. And the $(documento).on was giving error, "Unexpected Token" – Murilo Pereira Apr 11 at 16:28
  • my mistake @MuriloPereira it was the js – magefms Apr 11 at 16:49
  • I'm still facing the problem [ERROR] Failed to load the "PereiraTech_Faturamento/js/form/element/options" component – Murilo Pereira Apr 11 at 16:52
0
  • The path for the JS file in the XML was wrong, instead of the full patch PereiraTech_Faturamento/view/adminhtml/web/js... need to replace just for PereiraTech_Faturamento/js...

  • In the JS file, change 'Magento_Ui/js/form/element/select' to 'Magento_Ui/js/form/components/button'

  • And finally onClick to action

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.