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? 

Objectives:

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?!

1. Access Static Resources, Content Asset Files in Lightning Web Component
2. Access Custom Labels in Lightning Web Component
3. 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: 

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:

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:

1. Add the lightning__Tab target to the component’s configuration file
2. Create a lightning component tab for the lightning web component
3. 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. 

1. Click Setup.
2. In the Quick Find box, type Tabs.
3. Select Tabs, navigate to Lightning Component Tabs , then click on the New.
4. Enter the details as shown in the following screenshot:
   1. Select the progressBarExample Lightning component in the Lightning Component.
5. Enter a description of the tab, if desired, and click Next.
6. Choose the user profiles you want access to in the new custom tab.
7. 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:

Formative Assessment:

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.