Migrate Interfaces

Implementing an Aura interface enables you to receive context data or to surface your custom component in different contexts, such as in the Lightning App Builder or Experience Builder.

To receive context data in a Lightning web component, import the corresponding module. To surface a component in different contexts, use the targets metadata in your *.js-meta.xml configuration file. For supported tags, see XML Configuration File Elements.

Many Aura interfaces require both JavaScript changes and configuration file changes to achieve LWC functionality. Aura interfaces that aren’t listed don’t currently have an LWC equivalent.

clients:availableForMailAppPage

In *.js-meta.xml:

1<targets>
2  <target>lightning__Inbox</target>
3</targets>

Indicates that the component can be used in Lightning App Builder to add to email application panes for the Outlook and Gmail integrations. See Create Components for the Outlook and Gmail Integrations.

clients:hasEventContext

1import { LightningElement, api } from 'lwc';
2  @api dates;
3  @api location;

In *.js-meta.xml:

1<targets>
2  <target>lightning__Inbox</target>
3</targets>

Indicates that the component takes context information about an event when used with the Outlook and Gmail integrations. See Create Components for the Outlook and Gmail Integrations.

clients:hasItemContext

1import { LightningElement, api } from 'lwc';
2  @api mode;
3  @api people;
4  @api source;
5  @api subject;
6  @api messageBody;

In *.js-meta.xml:

1<targets>
2  <target>lightning__Inbox</target>
3</targets>

Indicates that the component takes context information about an email or calendar event when used with the Outlook and Gmail integrations. See Create Components for the Outlook and Gmail Integrations.

flexipage:availableForAllPageTypes

In *.js-meta.xml:

1<targets>
2  <target>lightning__AppPage</target>
3  <target>lightning__RecordPage</target>
4  <target>lightning__HomePage</target>
5  <target>lightning__UtilityBar</target>
6</targets>

Indicates that the component is available for record pages, the utility bar, and any other type of pages. Specify each page type explicitly as a target. See Configure a Component for Lightning App Builder and Configure a Component for the Utility Bar.

flexipage:availableForRecordHome

1<targets>
2  <target>lightning__RecordPage</target>
3</targets>

Indicates that the component is available for record pages only. See Configure a Component for Lightning App Builder.

force:appHostable

1<targets>
2     <target>lightning__Tab</target>
3  </targets>

Indicates that the component can be used as a custom tab in Lightning Experience or the Salesforce mobile app. See Configure Components for Custom Tabs.

force:hasRecordId

1import { LightningElement, api } from 'lwc';
2  @api recordId;

In *.js-meta.xml:

1<targets>
2  <target>lightning__RecordPage</target>
3</targets>

Indicates that the component takes a record Id as an attribute. See Make a Component Aware of Its Record Context.

force:hasSObjectName

1import { LightningElement, api } from 'lwc';
2  @api objectApiName;

In *.js-meta.xml:

1<targets>
2  <target>lightning__RecordPage</target>
3</targets>

Indicates that the component takes the API name of the current record’s object type. See Make a Component Aware of Its Object Context.

force:lightningQuickAction

In *.js-meta.xml:

1<targets>
2  <target>lightning__RecordAction</target>
3</targets>
4<targetConfigs>
5  <targetConfig targets="lightning__RecordAction">
6    <actionType>ScreenAction</actionType>
7  </targetConfig>
8</targetConfigs>

Indicates that the component is a quick action. See Configure a Component for Quick Actions.

LWC quick actions are currently supported only on the record page.

Note

force:lightningQuickActionWithoutHeader

In *.js-meta.xml:

1<targets>
2  <target>lightning__RecordAction</target>
3</targets>
4<targetConfigs>
5  <targetConfig targets="lightning__RecordAction">
6    <actionType>ScreenAction</actionType>
7  </targetConfig>
8</targetConfigs>

Indicates that the component is a quick action with no header. See Configure a Component for Quick Actions.

LWC quick actions are currently supported only on the record page.

Note

forceCommunity:availableForAllPageTypes

In *.js-meta.xml:

1<targets>
2  <target>lightningCommunity__Page</target>
3</targets>

Indicates that the component can be used in Experience Builder. See Configure a Component for Experience Builder.

lightning:availableForFlowScreens

1import { LightningElement, api } from 'lwc';
2import { FlowAttributeChangeEvent, FlowNavigationNextEvent } from 'lightning/flowSupport';
3  @api name;
4  @api quantity;
5
6  handleChange(event) {
7    this.name = event.target.name;
8    this.quantity = event.target.quantity;
9  }

In *.js-meta.xml:

1<targets>
2  <target>lightning__FlowScreen</target>
3</targets>
4<targetConfigs>
5  <targetConfig targets="lightning__FlowScreen">
6      <property name="name" type="String" label="Name" />
7      <property name="quantity" type="Integer" />
8  </targetConfig>
9</targetConfigs>

Indicates that the component can be used in a flow screen. See Configure a Component for Flow Screens.

lightning:hasPageReference

1import { CurrentPageReference } from 'lightning/navigation';
2  @wire(CurrentPageReference) pageRef;

Indicates that the component accepts a PageReference. See Navigate to Pages, Records, and Lists.

lightning:isUrlAddressable

In *.js-meta.xml:

1<isExposed>true</isExposed>
2<targets>
3  <target>lightning__UrlAddressable</target>
4</targets>

Indicates that the component is directly addressable via URL with the pattern /lightning/cmp/componentName. You can also navigate to the component using the standard__component page reference type. See Navigate to Pages, Records, and Lists.

lightning:utilityItem

In *.js-meta.xml:

1<targets>
2    <target>lightning__UtilityBar</target>
3  </targets>
4  <targetConfigs>
5    <targetConfig targets="lightning__UtilityBar">
6      <property name="greeting" type="String" description="Enter a greeting"/>
7    </targetConfig>
8  </targetConfigs>

Indicates that the component can be used as a utility item in an app’s utility bar. See Configure a Component for the Utility Bar.