0

I've to create an aura component which will contain a form and when the data is saved by clicking SAVE button it should redirect us to another component. The issue i'm facing is how to get the record id of the record created so that i can use it as a parameter in order to navigate to my next component.

Component:

<aura:component controller="SaveLoanData" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:attribute name="Customerform" type="Customer__c" default="{
                                                                    'sobjectType' : 'Customer__c',
                                                                    'Name' : '',
                                                                    'CustomerId__c' : '',
                                                                    'Date_of_birth__c' : '',
                                                                    'Aadhar_Card__c' : '' ,
                                                                    'Mobile_Number__c' : '',
                                                                    'Loan_Amount__c' : '',
                                                                    'Email__c' : '',
                                                                    'Relationship_Satus__c' : '',
                                                                    'Gender__c' : '' }"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="RelationshipStatus" type="String[]" default=" ,Single,Married,Divorced"/>
    <aura:attribute name="Pick" type="Customer__c[]"/>
    <form class="slds-form_stacked">
    <lightning:input name="CustomerName" label="Customer Name" value="{!v.Customerform.Name}"/>
    <lightning:input name="CustomerId" label="Customer Id" type="number" value="{!v.Customerform.CustomerId__c  }"/>
    <lightning:input name="DateOfBirth" label="Date of Birth" type="date" value="{!v.Customerform.Date_of_birth__c  }"/>
    <lightning:input name="AadharCard" label="Aadhar Card" type="number" value="{!v.Customerform.Aadhar_Card__c}"/>
    <lightning:select aura:id="Picklistid" name="Gender" label="Gender" value="{!v.Customerform.Gender__c}">
        <option value="" >Choose the Gender </option>
        <aura:iteration items="{!v.Pick}" var="p">
            <option value="{!p}" text="{!p}"></option>
        </aura:iteration>
    </lightning:select>
    <lightning:input type="tel" label="Mobile Number" name="MobileNumber" value="{!v.Customerform.Mobile_Number__c}" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"/>
    <lightning:select name="Status" label="Relationship Status">
        <aura:iteration items="{!v.RelationshipStatus}" var="status">
            <option text="{!status}"></option>
        </aura:iteration>
    </lightning:select>
    <lightning:input name="LoanAmount" label="Loan Amount" type="number" value="{!v.Customerform.Loan_Amount__c }"/>
    <lightning:input name="Email" label="Email" type="email" value="{!v.Customerform.Email__c}"/> <br/>
    <lightning:button variant="brand" label="Save" onclick="{!c.handleClick}"/>
    </form>
</aura:component>

Aura Controller :

({
    doInit : function(component,event,helper) {        
        var PicklistValues = component.get("c.getPicklist");
        
        PicklistValues.setCallback(this,function(response){
           var state = response.getState();
            if(state === "SUCCESS"){
                component.set("v.Pick",response.getReturnValue());
            }
        });
        $A.enqueueAction(PicklistValues);
    },
    
    handleClick : function(component, event, helper) {
      var regForm = component.get("v.Customerform"); 
      var action = component.get("c.saveDetails");
        action.setParams({
            regform1 : regForm
        });
        action.setCallback(this,function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
               var evt = $A.get("e.force:navigateToComponent");
               evt.setParams({
               componentDef: "c:LoanRecordPage",
               
               });
               evt.fire(); 
            }
        });
        $A.enqueueAction(action);

    }
    
})

Apex

public class SaveLoanData {
    @AuraEnabled
    public static List<String> getPicklist(){
        List<String> options = new List<String>();
        Schema.DescribeFieldResult fieldResult = Customer__c.Gender__c.getDescribe();
        List<Schema.PicklistEntry> pList = fieldResult.getPicklistValues();
        for(Schema.PicklistEntry p : pList){
            options.add(p.getLabel());
        }
        return options;
    }
    
    
    @AuraEnabled
    public static List<String> getPicklists(){
        List<String> rValues = new List<String>();
        Schema.DescribeFieldResult result = Customer__c.Relationship_Satus__c.getDescribe();
        List<Schema.PicklistEntry> piList = result.getPicklistValues();
        for(Schema.PicklistEntry p : piList){
            rValues.add(p.getLabel());
        }
        return rValues;
    }

    
    @AuraEnabled
    public static void saveDetails(Customer__c regform1){
        INSERT regform1;
    }
}
0

Assuming all of your code functions correctly up to this point, saveDetails needs to return the Id of the newly inserted record.

@AuraEnabled
public static Id saveDetails(Customer__c regForm1) {
    try {
        insert regForm1;
        return regForm1.Id;
    } catch(DmlException dmle) {
        throw new AuraHandledException(dmle.getMessage());
    }
}

And then in your Aura controller, handle the return value and set the appropriate properties on your navigateToComponent event:

var regForm = component.get("v.Customerform"); 
var action = component.get("c.saveDetails");
action.setParams({
    regform1 : regForm
});
action.setCallback(this,function(response){
    var state = response.getState();
    if(state === "SUCCESS"){
        var evt = $A.get("e.force:navigateToComponent");
        evt.setParams({
            componentDef: "c:LoanRecordPage",
            componentAttributes: {
                <loan-record-page-attribute>: response.getReturnValue()
            }
        });
        evt.fire(); 
    }
});
$A.enqueueAction(action);

You will need to update <loan-record-page-attribute> with the real property name used on c:LoanRecordPage.

It's also worth noting that you may not need a custom method to insert your object. You may be able to leverage Lightning Data Service/lightning:recordForm without the need for an Apex controller.

2
  • Hi @nbrown This worked but i don't know why its not navigating to other component or the record detail page using navigateToSObject I used console.log to verify that recordId is returned or not and it is successfully returning that too. – SouravRai Apr 6 at 15:20
  • The force:navigateToSObject event is different from force:navigateToComponent. Check your parameters if you're going to be changing the event. – nbrown Apr 6 at 15:57

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.