function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Andrew Hoban 6Andrew Hoban 6 

LWC Navigate to a New Record Thats Created in Apex

Hi,

I have a lightning web component that when a button is clicked, an apex method is performed to create a record.

After the record is created within apex, is it possible to get the record id of the new record back into the LWC to be used as part of the NavigationMixin?

Any example would be appreciated. 

Thanks
Best Answer chosen by Andrew Hoban 6
Maharajan CMaharajan C
Hi Andrew,

Yes you can pass the Id back to LWC.

Please refer the below sample and i have highlighted the important lines :

HTML:
  
<template>
    <lightning-card title="Add a New Contact">
        <lightning-layout multiple-rows>
            <lightning-layout-item size="12" padding="around-small">
                <lightning-input label="First Name" onchange={firstNameChange}></lightning-input>
                <lightning-input label="Last Name" onchange={LastNameChange}></lightning-input>
                <lightning-input label="Phone" onchange={phoneChange}></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <lightning-button variant="brand" label="Create Contact" onclick={createContact}></lightning-button>
            </lightning-layout-item>
        </lightning-layout> 
    </lightning-card>
</template>

JS:
  
import { LightningElement } from 'lwc';
import createContact from "@salesforce/apex/CreateContactController.createContact";
import { NavigationMixin } from 'lightning/navigation';

export default class CreateContactUsingCustomForm extends NavigationMixin(LightningElement) {
    firstName;
    lastName;
    phone;
    recordId='';
    firstNameChange(event){
        this.firstName = event.target.value;
    }

    LastNameChange(event){
        this.lastName = event.target.value;
    }

    phoneChange(event){
        this.phone = event.target.value;
    }

    createContact(){
        createContact({
            FName : this.firstName,LName : this.lastName, Phone: this.Phone
        }
        ).then(result => {
            console.log(' --- Contact Created --- ' + result);
            this.recordId = result;  // you can access the Id returned from Apex here
            this[NavigationMixin.Navigate]({
                type: 'standard__recordPage',
                attributes: {
                    recordId: this.recordId,
                    actionName: 'view'
                }
            });
        })
        .catch(error => {
                // TODO Error handling
                console.log('error --> ' + error);
        });
    }
}

Apex Class:
  
public class CreateContactController {
	@AuraEnabled
    public static string createContact(String FName, String LName, String Phone){
        system.debug(' ******** ');
        Contact c = new Contact(FirstName = FName, LastName = LName, Phone = Phone);
        insert c;
        return c.Id;  // Return the Id to LWC
    }
}

Thanks.
Maharajan.C

All Answers

Sai PraveenSai Praveen (Salesforce Developers) 
Hi Andrew,

Can you check the below stack exchange question with the similar requirement which is answered by expert.

https://salesforce.stackexchange.com/questions/305321/lwc-navigationmixin-navigate-after-creating-new-record-not-getting-id

If this solution helps, Please mark it as best answer.

Thanks,
 
Andrew Hoban 6Andrew Hoban 6
The problem i have is the record is needed to be created within an apex class rather than the LWC so i have no reference to the id. 

Is it possible to pass the id back into the LWC?
Maharajan CMaharajan C
Hi Andrew,

Yes you can pass the Id back to LWC.

Please refer the below sample and i have highlighted the important lines :

HTML:
  
<template>
    <lightning-card title="Add a New Contact">
        <lightning-layout multiple-rows>
            <lightning-layout-item size="12" padding="around-small">
                <lightning-input label="First Name" onchange={firstNameChange}></lightning-input>
                <lightning-input label="Last Name" onchange={LastNameChange}></lightning-input>
                <lightning-input label="Phone" onchange={phoneChange}></lightning-input>
            </lightning-layout-item>
            <lightning-layout-item padding="around-small">
                <lightning-button variant="brand" label="Create Contact" onclick={createContact}></lightning-button>
            </lightning-layout-item>
        </lightning-layout> 
    </lightning-card>
</template>

JS:
  
import { LightningElement } from 'lwc';
import createContact from "@salesforce/apex/CreateContactController.createContact";
import { NavigationMixin } from 'lightning/navigation';

export default class CreateContactUsingCustomForm extends NavigationMixin(LightningElement) {
    firstName;
    lastName;
    phone;
    recordId='';
    firstNameChange(event){
        this.firstName = event.target.value;
    }

    LastNameChange(event){
        this.lastName = event.target.value;
    }

    phoneChange(event){
        this.phone = event.target.value;
    }

    createContact(){
        createContact({
            FName : this.firstName,LName : this.lastName, Phone: this.Phone
        }
        ).then(result => {
            console.log(' --- Contact Created --- ' + result);
            this.recordId = result;  // you can access the Id returned from Apex here
            this[NavigationMixin.Navigate]({
                type: 'standard__recordPage',
                attributes: {
                    recordId: this.recordId,
                    actionName: 'view'
                }
            });
        })
        .catch(error => {
                // TODO Error handling
                console.log('error --> ' + error);
        });
    }
}

Apex Class:
  
public class CreateContactController {
	@AuraEnabled
    public static string createContact(String FName, String LName, String Phone){
        system.debug(' ******** ');
        Contact c = new Contact(FirstName = FName, LastName = LName, Phone = Phone);
        insert c;
        return c.Id;  // Return the Id to LWC
    }
}

Thanks.
Maharajan.C
This was selected as the best answer
Andrew Hoban 6Andrew Hoban 6
Thats worked as expected. Thank you!