Sourcing LWC in Lightning

Lightning Web Component has been taking over Aura Components in every aspect.

One of the capabilities that were lacking until a few days back was the capability to be plugged as a Quick Action.

With Spring '21 even that is also sorted out. Now we can use Lightning Web Component as a Quick Action.

Let's get started and look at where all can we source a LWC!

On a Record page

We can throw an LWC on to the record page and have customisation built on top of it.

This is how the meta.xml file is going to look like.

<targets>
      <target>lightning__RecordPage</target>
  </targets>
  <targetConfigs>
      <targetConfig targets="lightning__RecordPage">
          <property name="prop1" type="String" />
          <objects>
              <object>Account</object>
              <object>Opportunity</object>
              <object>Warehouse__c</object>
          </objects>
      </targetConfig>
      <targetConfig targets="lightning__AppPage, lightning__HomePage">
          <property name="prop2" type="Boolean" />
      </targetConfig>
  </targetConfigs>
meta.xml file of the web component that can be plugged on a record page

On a App page

Generally, we create custom App Pages for apps and we can also plug LWC on to them if we have the config that's shown below.

<targets>
   <target>lightning__AppPage</target>
</targets>
meta.xml file of the web component that can be plugged on an app page

On a Home page

We can also have the LWC placed on the Home Page. This is the target we need to have in place to get the LWC on to homepage.

<targets>
   <target>lightning__HomePage</target>
</targets>
meta.xml file of the web component that can be plugged on a home page

In a Flow Screen

Flows are becoming more and more powerful for every release and we can embed LWC in flow screens.

We can also expose the properties from LWC, fetch and assign the values assigned to them in the flow. This is how the configuration file is going to look like in that case.

<targets>
   <target>lightning__FlowScreen</target>
</targets>
<targetConfigs>
       <targetConfig targets="lightning__FlowScreen">
           <property name="startDate" label="Start 
                   Date" type="Date" role="inputOnly"/>			          
           <property name="account" label="Account Chosen"  type="@salesforce/schema/Account"/>
           <property name="annualRevenue" 
                     label="Annual Revenue" type="Integer"  role="outputOnly"/>
           <property name="name" label="Account Name" type="String" />
        </targetConfig>
</targetConfigs>
meta.xml file of the web component that can be plugged on a Flow screen

In Community Pages

Lightning Web Components are compatible with Communities too.

<targets>
   <target>lightningCommunity__Page</target>
   <target>lightningCommunity__Default</target>
</targets>
<targetConfigs>
      <targetConfig targets="lightningCommunity__Default">
         <property name="string" type="String" default="jsMetaValue"></property>
         <property name="boolean" type="Boolean" default="true"></property>
         <property name="integer" type="Integer" default="5"></property>
         <property name="picklist "type="String" default="value3" datasource="value1,value2,value3" />
         <property name="backgroundColor" type="Color"  default="#ff00ff"></property>
      </targetConfig>
</targetConfigs>
meta.xml file of the web component that can be plugged on a community page

In Utility Bar

This is the configuration that we should have to embed a component in Utility Bar.

<targets>
   <target>lightning__UtilityBar</target>
</targets>
<targetConfigs>
 <targetConfig targets="lightning__UtilityBar">
   <property name="prop1" type="Boolean" />
 </targetConfig>
</targetConfigs>
meta.xml file of the web component that can be plugged on a utility bar

In Custom Tabs

We can plug the component to a tab and this is one of the easiest ways to test if a component is working as expected. Here is the target to plug a component in the tab.

<targets>
   <target>lightning__Tab</target>
</targets>
meta.xml file of the web component that can be plugged as a custom tab

In Quick Actions

Starting Spring '21 we can embed LWC in quick actions too and as of now the documentation doesn’t specify how the target should look like, but if I were to take an educated guess it's going to be something like this.

<targets>
   <target>lightning__QuickAction</target>
</targets>
meta.xml file of the web component that can be plugged as a quick action