0

Please give some suggestions on this i'm able to get the data by using phonenumber field but I'm stucked at how to display related fields in second component.

Requirement :

In the first component I will display only phonenumber field and a button.Afterbclicking a button i want to display second component with all fields from phonenumber related record.

Please check below code once and help me how to display second component by clicking a button.

RPAControler:(Component 1)

aura:component controller="RPAProcess" implements="force:lightningQuickAction,force:appHostable,flexipage:availableForAllPageTypes" access="global">

aura:attribute name="PhoneNumber" type="String" default="" />  
div class="slds-size_3-of-12">
lightning:input label="Phone Number" name="phonenumber" value="{!v.PhoneNumber}" /><br/>    
 lightning:button variant="brand" label="GetData" onclick="{!c.getData}" /> 
    </div>   
/aura:component>

RPAController.js

({
 getData : function(component, event, helper) {
        var action = component.get("c.getDetails");  //calling server class               
           action.setParams({  
            phonenumber : component.get("v.PhoneNumber")
        });                  
        action.setCallback(this, function(response){                
component.set("v.CustomerName",response.getReturnValue().Customer_Name__c);
component.set("v.PhoneNumber",response.getReturnValue().Phone_Number__c);
          component.set("v.DOB",response.getReturnValue().DOB__c);
          component.set("v.Pin",response.getReturnValue().Pin__c); 
          component.set("v.RPAId",response.getReturnValue().RPA_ID__c);       
        });
        $A.enqueueAction(action);
    },
})

Apex Class:

public class RPAProcess {

    @auraEnabled
    public static RPABot__c getDetails(String phonenumber){

 return [ SELECT Id, Customer_Name__c,DOB__c,RPA_ID__c,Pin__c,Phone_Number__c FROM RPABot__c WHERE Phone_Number__c = :phonenumber  Limit 1 ];

  }
}

Here I'm able to get all fields by using phonenumber value but after clicking "GetData" button how to display remaining fields in other component.

Anyone help me to resolve this issue

Thanks, Raghu

  • Is the second component the parent? a sibling? – Glen De Marcos Jul 31 at 7:04
  • @GlenDeMarcos No it;s not a parent it's sibling.Could you please help me how to display all fields in component 2 by clicking a button in component 1. – Raghu Jul 31 at 7:24
0

You need to fire an APPLICATION event on button click and add a listener on component #2 where the fields are to be displayed, this component will grab the info and store it for displaying purposes.

Steps:

  1. Create a custom APPLICATION event
  2. Fire event with record values in component #1
  3. Listen for event in component #2 and capture values

Here is a simple example for you:

1. Create event "customPhoneEvent"

<aura:event type="APPLICATION">        
    <aura:attribute name="DOB" type="String"/>
    <aura:attribute name="Pin" type="String"/>
    <aura:attribute name="RPAId" type="String"/>
</aura:event>

2. Add event Component #1

cmp

<aura:registerEvent name="phoneEvent" type="c:customPhoneEvent"/>    

js

var appEvent = $A.get("e.c:customPhoneEvent");
appEvent.setParam("DOB", component.get("v.DOB"));
appEvent.setParam("Pin", component.get("v.Pin"));
appEvent.setParam("RPAId", component.get("v.RPAId"));
//appEvent.setParams({ "DOB" : component.get("v.DOB"), "Pin" : component.get("v.Pin"), "RPAId": component.get("v.RPAId")});
appEvent.fire();

3. Listen for event Component #2

cmp

<aura:attribute name="dob" type="String" default="" />  
<aura:attribute name="pin" type="String" default="" />  
<aura:attribute name="rpaid" type="String" default="" />
<aura:attribute name="eventHandled" type="Boolean" default="" />  
<aura:handler event="c:customPhoneEvent" action="{!c.handleApplicationEvent}"/>
<aura:if isTrue="{!v.eventHandled}">
  ... output fields here.
</aura:if>

js

handleApplicationEvent : function(component, handler, event) {
    var dob = event.getParam("DOB");
    var pin = event.getParam("Pin");
    var rpaid = event.getParam("RPAId");

    // set the handler attributes based on event data
    component.set("v.dob", dob);
    component.set("v.pin", pin);
    component.set("v.rpaid", rpaid);
    component.set("v.eventHandled", true);
}

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.