How to display sObject fields in second component based on first component field?

Question

Requirement :

From the first coponent I just pass "phonenumber" based on the phone number.After that by clicking a button it retrives all remaing fields from that record and dispaly in second component.

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

Answer 1

You need not have separate attributes to store the field values of sObject.

Remove below lines from JS:

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);

Implement attribute to store single record

<aura:attribute name="RPABot" type="RPABot__c" default="{'sobjectType':'RPABot__c'}" />

Now you can store the returned value in this attribute directly:

component.set("v.RPABot",response.getReturnValue());

Ofcource you need to implement error handling as shown in this document

Now for getting Customer_Name__c you can say:

{!v.RPABot.Customer_Name__c}

You can pass this attribute to other components and show value in those components as well.

<c:myOtherComponent RPABot="{!v.RPABot}" />