+ Start a Discussion
Rakesh ChattyRakesh Chatty 

How to call Aura controller method from component if condition true

Hi All,

I have a Quick action component for the edit button if the currently logged-in user is the owner of the record then the standard edit page. if not the owner then custom edit page.

<aura:component controller = 'clientExtension_Lex' implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <aura:attribute name="IsClientOwner" type="boolean" default="false"/>
    <aura:attribute name="fields" type="string[]" />
    <aura:handler name="init" value="{!this}" action="{!c.doinit}"/>
    <aura:if isTrue = "{!IsClientOwner}">
        <aura:method name="editRecord" action="{!c.editRecord}" access="public"></aura:method>
        <aura:set attribute = "else">
            <lightning:recordForm aura:id="myRecordForm" recordId="{!v.recordId}" objectApiName="Account" fields="{!v.fields}" columns="2" mode="edit" onsubmit="{!c.handleSuccess}" oncancel="{!c.closeModel}" />
        </aura:set>
    </aura:if>
</aura:component>
 
({
    doinit :function(component, event, helper) {
        var recordId = component.get('v.recordId');
        var action = component.get('c.clientdata');
        action.setParams({ recordId : recordId });
        action.setCallback(this, function(response) {
            var responseValue = response.getReturnValue(); 
			component.set("v.IsClientOwner",responseValue.IsClientOwner);	
            var fieldsetValues = [];
            for(var j =0 ; j<responseValue.editableFields.length; j++){
                for(var i =0 ; i<responseValue.wrapper.length ; i++){
                    if(responseValue.wrapper[i].show == true && responseValue.wrapper[i].customrecord.Field_API__c == responseValue.editableFields[j] && responseValue.wrapper[i].customrecord.editableField__c == true){
                        fieldsetValues.push(responseValue.editableFields[j]);
                    }
                }
            }
            fieldsetValues = [...new Set(fieldsetValues)]
            component.set("v.fields",fieldsetValues);
        });
        $A.enqueueAction(action);
        
    },
    
     editRecord: function(component, event, helper){
        var eventSource=event.getSource();
        var Id= component.get('v.recordId');
        alert(Id);
        var eRecord = $A.get("e.force:editRecord");
        eRecord.setParams({
            "recordId": Id
        });
        eRecord.fire();
    },
})
 

  if IsClientOwner is then I want to show the standard edit page.

Thanks in advance.

ANUTEJANUTEJ (Salesforce Developers) 
Hi Rakesh,

>> https://salesforce.stackexchange.com/questions/306864/how-to-call-javascript-controller-method-when-a-condition-is-met-in-lightning-co

The above link mentions a solution to call the method upon a condition is met can you try checking this once? I am adding the answer mentioned here for quick reference:

aura:if can have other html markup as body and not anything else. aura:method is like api layer for component so that parent component can communicate with this component. So, when you use aura:method as body of aura:if, it basically is thinking that it is html which ofcourse is invalid - there is no html tag aura:method

Solution:
You should have that condition in javascript method instead and have aura:method as the top most tag (direct child of aura:component)

CMP file:

 <aura:method name="getChosenProductName" action="{!c.getChosenProductName}" description="Sample method with parameters">
 </aura:method>
Controller JS:

getChosenProductName: function(component, event, helper) {
    if(component.get("v.product.stripePlanId") === component.get("v.chosenProduct")) {
        ...
    }
},
aura:method creates a api layer on component for parent components to interact. So, it is not really rendered in HTML of component but is rendered in Javascript. (Aura is a really weird implementation and LWC is more in line with standards). So, aura:method should always be the top most tag in cmp file.

Let me know if it helps you and close your query by marking it as the best answer so that it can help others in the future.  

Thanks.
Rakesh ChattyRakesh Chatty

Hi,

I want to call JS function, if i use aura:method as showing in Question its throwing error as "Invalid attribute "name": Source".

<aura:component>
    <aura:if isTrue="{!v.truthy}">
    True
     //HERE I WANT TO CALL JS METHOD editRecord
    <aura:set attribute="else">
      False
    </aura:set>
  </aura:if> 
</aura:component>
 
editRecord: function(component, event, helper){
        var eventSource=event.getSource();
        var Id= component.get('v.recordId');
        alert(Id);
        var eRecord = $A.get("e.force:editRecord");
        eRecord.setParams({
            "recordId": Id
        });
        eRecord.fire();
    },

 
Suraj Tripathi 47Suraj Tripathi 47
Hi Rakesh Chatty
Greeting!

I think the changes you can make in your js for calling the function in aura component is
editRecord: function(component, event, helper){
        var eventSource=event.getSource();
        var Id= component.get('v.recordId');
        alert(Id);
        var eRecord = $A.get("e.force:editRecord");
        eRecord.setParams({
            "recordId": Id
        });
     component.set('v.truthy',true);   //////It will set the value of truthy attribute  to true.
        eRecord.fire();
    },

If you find your solution mark this as best answer.

Thank you!
Regards,
Suraj Tripathi