0

I'm doing this Trailhead.

Basically, the idea is to have one component that include a form, a button to submit the form, and a child component that display the list of items.

I'm trying to improve the basic component with adding buttons, I think it's useless to copy the whole code, but fragments could help :

  • my three buttons :

                  <!-- BOUTON submit-->
                    <lightning:button label="Create Expense"
                                      class="slds-m-top--medium"
                                      variant="brand"
                                      onclick="{! c.clickCreate}"/>
    
                    <!-- BOUTON delete-->
                    <lightning:button label="Delete Expenses"
                                      class="slds-m-top--medium"
                                      variant="brand"
                                      onclick="{! c.clickDelete}"/>
                    <!-- BOUTON Reinitialize-->
                    <lightning:button label="Reinitialize form"
                                  class="slds-m-top--medium"
                                  onclick="{! c.helper.initForm }"/>
                <!-- / CREATE NEW EXPENSE FORM -->
    

The controller clickCreate function :

clickCreate : function(cmp, event, helper) {

    // tcheck validité du formulaire
    if( !helper.isValidForm(cmp)) {
        console.log('--Erreur de datas dans le form--');
        return;
    }

    // recuperation méthode APEX
    var action = cmp.get('c.saveExpense'); //console.log('action vide ? : ' + action);
    var newExp = cmp.get('v.newExpense');

    // ajout du paramètre
    action.setParams({
        'ex' : newExp
        // 'expArray' : newExp
    });

    // console.log('--clickCreate-- action.setParams : ' + JSON.stringify(action.getParam('ex')));
    // console.log('--clickCreate-- action.setParams : ' + JSON.stringify(action.getParam('expArray')));

    // définiton du callback
    action.setCallback(this, function(resp) {
        var state = resp.getState();
        console.log('saveExpense -- resp.getState() : ' + state);

        // console.log('resp[0] : ' + resp.getReturnValue()[0]);

        if (cmp.isValid() && state.toUpperCase()==='SUCCESS') {
            // rappel de la fonction doInit en fin de compte ?!
            console.log('--call doInit for refreshing the list -I know it's bad');
            let initAgain = cmp.get('c.doInit');
            $A.enqueueAction(initAgain);

            // reinitialiser le formulaire
            helper.initForm(cmp);

        } else {
            console.log('Err d\'insert de l\'expense avec statu : ', state);
        }
    });
    $A.enqueueAction(action);
}

And the helper initForm function :

initForm : function (cmp) {
    var form = cmp.set('v.newExpense', { 'sobjectType': 'Expense__c','Name': '','Amount__c': 0.0, 'Client__c': '','Date__c': '', 'Reimbursed__c': false });
}

So the clickCreate allows to create the expense and to add it to the list, and also to reinitialize the form with blank values calling the helper initForm() function ;

The thing is I'm unable to call the initForm() method in order to assign it to the third button...

This line is not working : onclick="{! c.helper.initForm }"/>

I got ideas, but I'm not happy with it (copying the method from the helper really isn't a solution), What would be the best way to achieve my goal ?

Thanks !!

Nb : for the record the form look like this : enter image description here

  • you need to declare a method in the controller that calls the helper, not invoke the helper directly on button click – glls Jul 18 '19 at 15:43
  • Oh really ? I understand the logic behind, but it's sad in this use case. So, the best way is to add (and affect to the onclik) this method : initForm : function (cmp, event, helper) { helper.initForm(); } ?? – Alexis MASSON Jul 18 '19 at 15:46
  • avoid using the same name in your controller and helper, idk, callInit : function(cmp, event, helper){ helper.initForm();} – glls Jul 18 '19 at 15:47
  • Sure, good advice I was focused on the logic. Thanks anyway ! – Alexis MASSON Jul 18 '19 at 15:50
3

You need to declare a method in the controller that calls the helper, not invoke the helper directly on button click.

Additionally, avoid using the same name in your controller and helper functions.

ex.

callInit : function(cmp, event, helper){ 
               helper.initForm();
            }
| improve this answer | |
  • Thanks, did it ! (why duplicating your comment ?) – Alexis MASSON Jul 18 '19 at 16:21
  • 1
    Just formalized the answer so the question can be marked as accepted – glls Jul 18 '19 at 16:44

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.