How to Add Lightning Web Components as Custom Tabs in Salesforce?

In Salesforce, the Lightning Web Components can be displayed as a custom tab; for that, we need to define the target as lightning_tab, so that the Lightning component will be enabled to be deployed as a tab on the Lightning pages.

In this Salesforce tutorial, we will learn how to add Lightning web components as custom tabs.

Add Lightning Web Component as a Custom Tab in Salesforce

In the release of Winter ’20, Salesforce has allowed LWC components to be exposed or deployed as custom tabs.

In the steps below, we will create a custom LWC component, and after that, we will create a custom tab where the component will be deployed. Lastly, the tab will be added to a Salesforce app where users can view it.

In this example, I will display sample data as the current date. If you have an existing LWC component, then go to step three to configure the meta.xml file.

1. Create an LWC component and enter the code below in the HTML file.

<template>
         <lightning-card title="LWC Tab">
             <div class="slds-p-around_medium">
                Welcome to the custom LWC tab! Today's date is {currentDate}.
             </div>
         </lightning-card>
    </template>

2. Enter the code below in the JS file to handle the logic of displaying the date.

 import { LightningElement } from 'lwc';

     export default class LwcTab extends LightningElement {
         get currentDate() { 
             return new Date().toLocaleDateString();
         }
     }

3. Enter the code below inside the <LightningComponentBundle> tag in the meta.xml file to make the LWC component exposed to deploy as a custom tab.

For the existing Lightning web component, you have to make this change only.

<isExposed>true</isExposed>
         <targets>
             <target>lightning__Tab</target>
         </targets>

The tag <target>lightning__Tab</target> enables the component to be used as a custom tab.

Create a Custom Tab For the Lightning Web Component

After exposing the Lightning Web Component to the Lightning tabs, we will create a custom tab where the LWC component will be deployed.

Now, navigate to the Setup page of Salesforce Lightning and follow the steps below.

1. In the quick find box, search and then select Tabs. Then, in the tabs setup window, scroll down to the Lightning Component Tabs and click on the New button.

2. In this step, select the LWC component in the Lightning Component field. Then, enter the tab name and label. Select the tab style to display an icon on the tab.

After this, click on the Next button.

3. Select the User Profiles for which the new lightning component tab will be available. For this, you can apply one default tab visibility for all profiles or select a different tab visibility for each profile.

This creates the LWC component as a Lightning tab. Now, we need to deploy this tab to the Lightning application to make it visible to users.

Add Custom Lightning Web Component Tab to Salesforce Application

To make the tab visible in Lightning Experience or the Salesforce mobile app, we need to add it to a Salesforce app’s navigation menu, and for that, navigate to the setup page and follow the steps below.

1. In the quick find box, search and select App Manager.

2. In the app manager, go to the standard or custom application, click on the dropdown next to it, and select Edit.

3. In the app settings, select Navigation Items. Then, from the column Available Items, select the LWC component tab and move it to the Selected Items column with the arrow button key.

4. We can also adjust the tab position using the up and down arrow keys. At last, click Save to apply the changes.

Now, navigate to the application from the app launcher, and there you will see the LWC component tab in the navigation bar.

This way, we can deploy the Lightning Web Component as a custom tab in Salesforce.

Conclusion

In this Salesforce tutorial, we have learned how to add a Lightning Web Component as a custom tab in Salesforce. In the above example, we have created a custom LWC component and exposed it to the lightning tabs using the <target>lightning__Tab</target> target attribute.

After this, we created a custom LWC component tab and deployed it on the Lightning application from the app settings.

You may also like to read:

• Create Quick Actions With Lightning Web Components in Salesforce
• Concatenate Columns in LWC Lightning Datatable
• Reorder Rows Using Drag and Drop in LWC Data Table

Abhijeet

Abhijeet is a skilled Salesforce developer with experience in developing and integrating dashboards, data reports, and Salesforce applications. He is also skilled at optimizing processes and flow automation processes, coding, and executing complex project architecture. Read more about us | LinkedIn Profile.