1

I have a lightning recordEditForm that does what I need it to do. However I cannot get the controller correct. At this point after the user enters a few fields and hits "create record" the record is created but I don't get taken to the new record. I would like either a toast or preferably to be taken to the new record. Any help is appreciated. Thanks

Component

<aura:component implements="lightning:actionOverride">
        <lightning:recordEditForm aura:id="newLeadForm" 
                           objectApiName="Lead">
        <lightning:messages />
        <lightning:inputField fieldName="Name" />
            <lightning:inputField fieldName="Phone" />
            <lightning:inputField fieldName="Email" />
            <lightning:inputField fieldName="Company" />
        <lightning:button class="slds-m-top_small" type="submit" label="Create new" />
    </lightning:recordEditForm>
</aura:component>

Controller

({
    handleLoad : function(component, event, helper) {
        console.log('handle handleLoad');
        component.set("v.showSpinner", false);
    },
    handleSubmit : function(component, event, helper) {
        event.preventDefault(); // Prevent default submit
        var fields = event.getParam("fields");

        component.find('newLeadForm').submit(fields); // Submit form
        console.log('handle handleSubmit');
    },
    handleSuccess : function(component, event, helper) {
        console.log('record updated successfully');


        component.set("v.showSpinner", false);
    },
})
1

lightning:recordEditForm does not automatically navigate to newly created record.

You can use force:showToast for toast message and force:navigateToSObject to navigate to newly create object.


For this to work, you need to bind the submit and success methods in recordEditForm defined in the component as:

<lightning:recordEditForm aura:id="newLeadForm" 
    objectApiName="Lead"
    onsubmit="{!c.handleSubmit}"
    onsuccess="{!c.handleSuccess}">

Finally you need to add toast and navigation in your handleSuccess method of controller or helper JS as:

handleSubmit : function(component, event, helper) {
    // your existing code
},
handleSuccess: function(component, event, helper) {

    // stop spinner 
    component.set("v.showSpinner", false);

    // Show toast
    var toastEvent = $A.get("e.force:showToast");
    toastEvent.setParams({
        "type": "success",
        "title": "Success!",
        "message": "Lead record has been created successfully."
    });
    toastEvent.fire();

    // navigate to new record on successful save
    var navEvt = $A.get("e.force:navigateToSObject");
    navEvt.setParams({
        "recordId": event.getParam("response").id,
        "slideDevName": "detail"
    });
    navEvt.fire();
}
| improve this answer | |

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.