How to create tab for LWC in Salesforce

As part of your Salesforce development journey, you would have done custom development using LWC, Aura, VFPage etc. Once created these UI Components needs to be rendered in the screen for custom interaction, one such use-case can be to show LWC component in a tab. In today’s session we are going to walk through the process to create tab for LWC in Salesforce.

Watch the complete implementation below

This article covers:

• Create an LWC Component and Expose it
• Create a Lightning Component Tab
• Add custom tab to Salesforce App
• Conclusion

Create an LWC Component and Expose it

Create an LWC Component and make the below code changes.

HTML Code

<template>
    <div style="background:white;height:500px">
        Welcome to my website {websiteName}
    </div>
</template>

This HTML is just a placeholder where we are showing a binding variable from the JS file.

JS Code

import { LightningElement } from 'lwc';

export default class CustomTab extends LightningElement {
    websiteName = 'SFDCRocks247'
}

This is a minimalistic code were are creating a variable and assign it a value.

Meta.xml Code

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>55.0</apiVersion>
    <isExposed>false</isExposed>
    <targets>
        <target>lightning__Tab</target>
    </targets>
</LightningComponentBundle>

The above configuration in meta.xml is the most important one, this is what enables this LWC to be available as an option when creating a custom tab.

Create a Lightning Component Tab

Create New Lightning Component Tab from Salesforce Setup.

From your Salesforce setup, search for Tabs and select the Tabs option under the User Interface option.

After opening the Custom Tabs scroll down to the Lightning Component Tabs section and click on the New button.

In the New Lightning Component Tab section, search for your LWC Component. You should be able to see and select your component.

Set the profile level visibility for the tab created, for our example we have given the visibility for each profile.

Add custom tab to Salesforce App

Add the new tab to the Salesforce App.

After successfully creating the New Lightning Component Tab, we should add it to an Application.

In Salesforce setup search for app and select App Manager.

Select an app where we want to add this newly created Tab, and click on edit option(extreme right down arrow icon)

In the App Settings, click on Navigation Items and search for the Custom Lightning Tab created and move it to the right hand, selected items, side.

You should now be able to see your custom lightning tab with your LWC Component in the App.

Conclusion

Showing an LWC Component in a Custom Tab is one of the basic use cases that developers come across in their projects. In this article we have create a custom LWC component and a lightning tab then have included it in the Salesforce App.

Do follow these steps to create tab for LWC in Salesforce and see live changes on the customization you do on the component.

Do let us know your thoughts in the comment box below and share this article with your friends. Make sure to subscribe to our blog and get notified of new content being created.