We use different Aura interfaces to enable the component to receive context data or to surface components in a different context, such as in the Lightning App Builder or Experience Builder.
When we have to get the same features in Lightning web component we have to do the following things:
- To enable the Lightning web component (LWC) to receive context data we have to import the corresponding module.
- To surface a component in different contexts, use the "targets" metadata in "*.js-meta.xml" configuration file.
Aura interfaces that are not listed below don't have an equivalent in Lightning Web Components for now.
Aura:
lightning:hasPageReference
LWC:
We have to import "CurrentPageReference" from module "lightning/navigation"
Eg:
import { CurrentPageReference } from
'lightning/navigation';
@wire(CurrentPageReference) pageRef;Description:
Indicates that the component accepts a PageReference.
Aura:
flexipage:availableForAllPageTypes
LWC:
We have to configure targets In the "*.js-meta.xml" file.
Eg:
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
<target>lightning__UtilityBar</target>
</targets>Description:
This indicates that the component is available for record pages, the utility bar, and
any other type of page.
We have to specify each page type explicitly as a target as shown above in the LWC meta file "*.js-meta.xml"(AppPage, RecordPage, HomePage, UtilityBar).
Aura:
flexipage:availableForRecordHome
LWC:
We have to configure the "target" in the "*.js-meta.xml" file.
Eg:
<targets>
<target>lightning__RecordPage</target>
</targets>Description:
Indicates that the component is available for record pages only.
Aura:
force:hasRecordId
LWC:
We have to configure the "target" in the "*.js-meta.xml" file and declare a public variable in the JavaScript file called "recordId"
Eg:
Javascript File:
import { LightningElement, api } from 'lwc';
@api recordId;Meta File (*.js-meta.xml):
<targets>
<target>lightning__RecordPage</target>
</targets>Description:
Indicates that the component takes a record Id as an attribute.
In LWC public variable (a variable which is decorated with "api" decorator) called "recordId" receives the current record id on Lightning Record Page where we included our LWC.
Aura:
force:hasSObjectName
LWC:
We have to configure the "target" in the "*.js-meta.xml" file and declare a public variable in the JavaScript file called "objectApiName"
Eg:
JavaScript File:
import { LightningElement, api } from 'lwc';
@api objectApiName;Meta File(*.js-meta.xml):
<targets>
<target>lightning__RecordPage</target>
</targets>Description:
Indicates that the component takes the API name of the current record’s object
type.
In LWC public variable (a variable which is decorated with "api" decorator) called "objectApiName" receives the API name of the current record’s object
type. on Lightning Record Page where we included our LWC.
Aura:
forceCommunity:availableForAllPageTypes
LWC:
We have to configure the "target" in the "*.js-meta.xml" file.
Eg:
<targets>
<target>lightningCommunity__Page</target>
</targets>Description:
Indicates that the component can be used in Experience Builder.
Aura:
clients:availableForMailAppPage
LWC:
We have to configure the "target" in the "*.js-meta.xml" file.
Eg:
<targets>
<target>lightning__Inbox</target>
</targets>Description:
Indicates that the component can be used in Lightning App Builder to add to email
application panes for the Outlook and Gmail integrations.
Aura:
clients:availableForMailAppPage
LWC:
We have to configure the "target" in the "*.js-meta.xml" file.
Eg:
<targets>
<target>lightning__Inbox</target>
</targets>Description:
Indicates that the component can be used in Lightning App Builder to add to email
application panes for the Outlook and Gmail integrations.
Reference:
No comments:
Post a Comment