Invalid Page URL with Custom Lightning Component

Question

I created a new custom lightning component and controller to create a new lead in Salesforce. When you enter all fields correctly and they pass validation the page works as designed. However, when a field fails validation such as email not being formatted correctly (abc.abc.com) then I receive the following error.

Page Doesn't Exist-Enter a valid URL and try again.

I also receive the Success Toast from Salesforce but a lead is not created.I believe I have a problem in the controller from the getState response but cannot figure out where I am wrong.

Here is the component

Component

<aura:component implements="lightning:actionOverride" access="global" controller="overrideStandabuttonwithLC">
    <aura:attribute name="lea" type="Lead" default="{'sobjectType': 'Lead',
                                                        'FirstName':'',
                                                        'LastName':'',
                                                        'Title':'',
                                                        'Email':'',
                                                        'Phone':''}" />    
    <div class="slds-m-around--large">
        <div class="slds-form--stacked">
            <div class="slds-form-element">  
                <div class="slds-form-element__control">
                    <lightning:input aura:id="leaFirstName" label="First Name" value="{!v.lea.FirstName}" class="slds-input"/>
                    <lightning:input aura:id="leaLastName" required="true" label="Last Name" value="{!v.lea.LastName}" class="slds-input"/>
                    <lightning:input aura:id="leaTitle" label="Title" value="{!v.lea.Title}" class="slds-input"/>
                    <lightning:input aura:id="leaEmail" label="Email" value="{!v.lea.Email}" placeholder="[email protected]..." class="slds-input"/>
                    <lightning:input aura:id="leaPhone" label="Phone" value="{!v.lea.Phone}" class="slds-input"/>
                  </div>
            </div>
            <div class="slds-m-around--medium">
                <button class="slds-button slds-button--brand" onclick="{!c.createLead}">Save</button>
            </div>
        </div>
    </div>    
</aura:component>

Javascript Controller

({
    createLead : function(component, event, helper) {
        var action = component.get("c.saveLead");
        action.setParams({
            "leaRec":component.get("v.lea")
        });
        action.setCallback(this, function(response){
            if(response.getState()==='SUCCESS'){
                var leaId = response.getReturnValue();
                var toastEvent = $A.get("e.force:showToast");
                toastEvent.setParams({
                    "title": "Success!",
                    "type":"Success",
                    "message": "Lead created successfully."
                });

                toastEvent.fire();


                var navEvt = $A.get("e.force:navigateToSObject");
                navEvt.setParams({
                    "recordId": leaId,
                    "slideDevName": "related"
                });
                navEvt.fire();
            }
        });
        $A.enqueueAction(action);
    },
})

Apex

public with sharing class overrideStandabuttonwithLC {

    @AuraEnabled
    public static ID saveLead(Lead leaRec){
        try{
            insert leaRec;
        }
        catch(Exception e){
            system.debug('e-->' + e.getMessage());
        }

        return leaRec.Id;
    }  

}

nitpicking, but you should have better naming conventions. is it that much more difficult to add the d to leadRec so it's leadRec or to complete the whole description to leadRecord? — TemporaryFix

TemporaryFix TemporaryFix · Accepted Answer · 2019-05-14T17:27:14

The reason this happens makes sense. Your controller method saveLead is failing. A lead record is never inserted. You are returning null to your component. You can't navigate to a null record.

You need to have better error handling. if leadId is undefined/null you should display an error to the user. if leadId has a value then it is safe to navigate to the record.

Alternatively you can remove the try/catch from your server method and have your callback look like this

action.setCallback(this, function(response){
    var toastEvent = $A.get("e.force:showToast");
    if(response.getState()==='SUCCESS'){
        var leaId = response.getReturnValue();

        toastEvent.setParams({
            "title": "Success!",
            "type":"Success",
            "message": "Lead created successfully."
        });

        toastEvent.fire();


        var navEvt = $A.get("e.force:navigateToSObject");
        navEvt.setParams({
            "recordId": leaId,
            "slideDevName": "related"
        });
        navEvt.fire();
    } else {
        let errors = response.getError();
        let message = 'Unknown error'; // Default error message
        // Retrieve the error message sent by the server
        if (errors && Array.isArray(errors) && errors.length > 0) {
            message = errors[0].message;
        }
        toastEvent.setParams({
            "title": "Error!",
            "type":"Error",
            "message": message
        });

        toastEvent.fire();
    }
});

Invalid Page URL with Custom Lightning Component

1 Answers