Last Updated on July 7, 2022 by Rakesh Gupta
Big Idea or Enduring Question:
- How to surface the Lightning Web Components in Salesforce mobile and Lightning Experience as Custom Tabs?
After reading this blog, you’ll be able to:
- Understand the difference between surface components in App Builder pages vs Tabs
- Add the right target to make a Lightning web component available as a custom tab
- Create a custom lightning component tab for the lightning web component
- and much more
In the past written a few articles on Lightning Web Component. Why not check them out while you are at it?!
- Access Static Resources, Content Asset Files in Lightning Web Component
- Access Custom Labels in Lightning Web Component
- Create a Form with a Progress Bar in Lightning Web Component
Business Use case
Keegan Watson is working as a Junior Developer at Gurukul on Cloud (GoC). By now, she has created a form with a progress bar after reading this article, as shown below:
Now she wants to learn how to make progressBarExample lightning web component is available as a custom tab in a Lightning Experience app and the Salesforce app.
Add Lightning Web Components in App Builder Pages vs Tabs
There are different ways to make lightning web components available for Salesforce mobile and lightning experience. These fall under two categories, as mentioned below:
|App Builder Pages||Tabs|
|Layout built using drag and drop the component on the template||Layout fully controlled by developers|
|Can be built and configured by business users||Business users cannot customize it|
|Includes title bar, which may consist of quick actions|
|Activation automatically creates tabs and allows easy addition to apps and the mobile navigation menu|
Target specifies where the component can be added, such as on a type of Lightning Page or in Embedded Service Chat. If you want your component to appear in the Lightning App Builder or in Experience Builder, specify at least one Lightning page type. Valid values for the target are:
|lightning__AppPage||Enables a component to be used on an App page in Lightning App Builder.|
|lightning__FlowScreen||Enables a component to be used on flow screens in Flow Builder.|
|lightning__HomePage||Enables a component to be used on a Home page in Lightning App Builder.|
|lightning__Inbox||Enables a component to be used in Lightning App Builder to add to email application panes for the Outlook and Gmail integrations.|
|lightning__RecordAction||Enables a component to be used as a quick action on a record page.|
|lightning__RecordPage||Enables a component to be used on a record page in Lightning App Builder.|
|lightning__Tab||Enables a component to be used in a custom tab in Lightning Experience or the Salesforce mobile app.|
|lightning__UtilityBar||Enables a component to be used as a utility item on the utility bar in the App Manager.|
|lightningSnapin__PreChat||Enables a custom prechat component to be selected from Embedded Service Chat Setup.|
Automation Champion Approach (I-do):
There are three steps to solve Keegan’s business requirement using Lightning Web Component and a custom tab. We must:
- Add the lightning__Tab target to the component’s configuration file
- Create a lightning component tab for the lightning web component
- Add a lightning component Tab to the Salesforce Mobile Navigation Menu and Lightning Experience
Step 1: Add the lightning__Tab Target to the Component’s Configuration File
Add the lightning__Tab target to the component’s configuration file. The progressBarExample.js-meta.xml configuration file defines the metadata values for the component, including the setting to allow usage in a custom tab.
<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>54.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__RecordPage</target> <target>lightning__AppPage</target> <target>lightning__HomePage</target> <target>lightning__Tab</target></targets> </LightningComponentBundle>
Deploy the changes to the source org via Visual Studio Code.
Step 2: Create a Lightning Component Tab for the Lightning Web Component
A Lightning Component tab for the lightning web component can be created manually in the setup interface.
- Click Setup.
- In the Quick Find box, type Tabs.
- Select Tabs, navigate to Lightning Component Tabs , then click on the New.
- Enter the details as shown in the following screenshot:
- Enter a description of the tab, if desired, and click Next.
- Choose the user profiles you want access to in the new custom tab.
- Click Save.
Step 3: Add a Lightning Component Tab to the Salesforce Mobile Navigation Menu and Lightning Experience
The lightning Component tab can be manually added to the Mobile Navigation menu in the setup interface.
The lightning Component tab can be manually added to the Lightning Experience by adding App(s) to the setup interface.
Proof of Concept
Now onwards, business users can access the lightning component tab from Salesforce mobile under the navigation menu as shown below:
I want to hear from you!
What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? Feel free to share in the comments below.
3 thoughts on “Add Lightning Web Components in Mobile and Lightning Experience as Tabs”