Aura Component Interfaces Simplified

Aura Interfaces are like a contract your aura component will follow. There are specific interfaces that provide a specific ability or features to your lightning component.

You have to simply add the interface name to the component’s implements attribute.

Below we have covered a few key interfaces which you would be using a lot in your lightning component.

force:lightningQuickAction

It allows you to create a component that can be used with a lightning quick action.

force:hasRecordId

It allows you to bind a record Id to recordId attribute if your component is present on a record detail page.

It is also used in conjunction with force:recordData (A lighting component that allows you to create, update or delete records using lighting data services)

force:appHostable

It allows your component to appear as a lighting component tab or salesforce1.

flexiPage:availableForAllPageTypes

It allows you to create a component that will be available for lightning pages or Lighting App Builder.

flexiPage:availableForRecordHome

It allows you to create a component for use on the record home page in lightning experience.

forceCommunity:layout

It allows you to create a custom layout for the lightning community pages.

forceCommunity:themeLayout

It allows you to create a custom theme layout for the lightning community.

forceCommunity:availableForAllPageTypes

It allows you to create a component that is available for drag and drop in experience builder (community)

Lightning:isUrlAddressable

It allows one lightning component to be navigated to another lightning component.

Lightning:actionOverride

It allows your component to override new, edit and view button actions.

We will be covering each interface with their real-time application and use cool examples in this lightning aura component series. You will be visiting them one by one in the next parts 🙂

Implementing an Aura Interface:

An Aura component can implement an interface using the implements keyword. It can implement more than one interface at a time with comma-separated values.

Let’s create an aura component named as InterfaceExample. You can refer to how to create a lightning aura component over here – Create Aura Components

In this component we will be implementing two interfaces flexipage:availableForAllPageTypes & force:hasRecordId.

As said above flexipage:availableForAllPageTypes will allow the lightning component to be present in Lightning App Bulider. Also, force:hasRecordId will be binding the record Id to the recordId attribute when it is loaded from a record detail page.

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId">
<lightning:card title="Record Id Utility">
    <p class="slds-p-horizontal_small">
        Record Id : {!v.recordId}
    </p>
</lightning:card>
</aura:component>	

Save the above component in your salesforce org.

Go to a lead record and click on the gear icon. Click on the Edit Page button. Refer screenshot below:

This will take you to the lightning app builder. Drag the custom component InterfaceExample in the page and activate & save it. You can refer to the Lightning App Builder Steps over here – Lightning App Builder

Go To A Lead Record and observe the output of your lightning component InterfaceExample. You can see the record Id to be present over there as in the screenshot below:

So how does the record Id come over there? It was provided by Salesforce Lighting Aura Framework to you after you have implemented force:hasRecordId.

It will be automatically binded to an attribute with the name of recordId. You don’t have to explicitly create an attribute with this name it will be provided by the framework only.

Also we have used expression syntax {!v.recordId} to display the recordId attribute in our component InterfaceExample. We will be covering them in the aura attributes, how to get and set them, and more about expression syntax in the next parts.

Thank you for visiting SalesforceBlue.com
If you have any queries feel free to write down a comment below 🙂