Sourcing LWC in Lightning
Sourcing LWC in Lightning - It's very important to know where all can we source an LWC.
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>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>
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>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>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>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>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>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>