Passing a record Id from a Lightning Component to an APEX Controller

One of the most common things you will come across when working with Lightning Components is the need to pass a record Id to an APEX controller. When we talk about Lightning Components we are referring to an AuraBundleDefinition. Within that Aura bundle there are a number of different items, but for this example, we will only be using the component and the controller. If you want to learn more about the AuraBundleDefinition you can click here. Enough small talk, let's jump right in and take a look at the code.

LightningRecordIdExample.cmp

	<aura:component controller="LightningRecordIdExampleController" implements="flexipage:availableForAllPageTypes,force:hasRecordId">
	<aura:attribute name="account" type="Account"/>
	<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
	<lightning:card iconName="standard:product" title="{!v.account.Name}">
	</lightning:card>
	</aura:component>

view raw LightningRecordIdExample_Component hosted with ❤ by GitHub

The first line of the component is where we specify the controller class and implement our interfaces.

<aura:component controller="LightningRecordIdExampleController" implements="flexipage:availableForAllPageTypes,force:hasRecordId"></aura:component>

And as you've probably figured out from the snippet above, the interface used to get the record Id is ...force:hasRecordId". 

The force:hasRecordId interface does a couple of thing to the component that implements it.

• It adds an attribute named recordId to your component. This attribute is of type String, and its value is an 18-character Salesforce record ID, for example: 001xx000003DGSWAA4. If you added it yourself, the attribute definition would look like the following markup:

<aura:attribute name="recordId" type="String"></aura:attribute>

Note If your component implements force:hasRecordId, you don’t need to add a recordId attribute to the component yourself. If you do add it, don’t change the access level or type of the attribute or the component will cause a runtime error.

• When your component is invoked in a record context in Lightning Experience or the Salesforce app, the recordId is set to the ID of the record being viewed.

Now that we have our record Id, let's take a look at the Lightning controller class.

LightningRecordIdExample.js

	({
	doInit : function(component, event, helper) {
	// create a one-time use instance of the getAccount action
	// in the server-side controller
	var action = component.get("c.getAccount");
	action.setParams({
	"accountId": component.get("v.recordId")
	});
	// Create a callback that is executed after
	// the server-side action returns
	action.setCallback(this, function(response) {
	var state = response.getState();
	if (component.isValid() && state === "SUCCESS") {
	//Set the component account attribute to the returned account object
	component.set("v.account", response.getReturnValue());
	}
	else if (state === "INCOMPLETE") {
	// do something
	}
	else if (state === "ERROR") {
	var errors = response.getError();
	if (errors) {
	if (errors[0] && errors[0].message) {
	console.log("Error message: " +
	errors[0].message);
	}
	} else {
	console.log("Unknown error");
	}
	}
	});
	// $A.enqueueAction adds the server-side action to the queue.
	$A.enqueueAction(action);
	}
	})

view raw LightningRecordIdExample_ContollerJS hosted with ❤ by GitHub

In our controller class, we have a single function call doInit the gets called upon page initialization.

doInit : function(component, event, helper){

This function creates a one-time instance of the getAccount function in the server-side controller.

var action = component.get("c.getAccount");

Next, we set the accountId parameter by getting the recordId attribute value from the component.

action.setParams({
     "accountId": component.get("v.recordId")
});

Now that we have defined the action and added the record Id as a parameter, all that's left to do is to queue the action and handle the callback response.

action.setCallback(this, function(response) {
   var state = response.getState();
   
   if (component.isValid() && state === "SUCCESS") {
      component.set("v.account", response.getReturnValue());
      ...

That's pretty much it! You can check out the server-side controller class below.