Custom Tab using (LWC) Lightning Web Component

by

In this post, we will implement Tabs in LWC to create Custom Tab using (LWC) Lightning Web Component. Let’s just hop into the implementation.

Implementation

In this implementation, we will create a Lightning Web Component to create an Account Record. We will open this Lightning Web Component as a Custom Tab in Lightning.

First, create a Lightning Web Component lwcCmp and use lightning-record-form to create and display Account records. If you want to know how to use lightning-record-form in Lightning Web Component, you can check the complete implementation here.

This is how our component will look:

lwcCmp.html

<template>
    <lightning-card title="Custom Tab using Lightning Web Component">
        <div class="slds-p-horizontal_small">
         
            <lightning-record-form object-api-name="Account" record-id={strRecordId}
            columns="2" mode="edit" fields={arrayFields}></lightning-record-form>
        </div>
    </lightning-card>
</template>

lwcCmp.js

import { LightningElement } from 'lwc';
 
export default class LwcCmp extends LightningElement {
    strRecordId;
    arrayFields = ['Name', 'Type', 'Phone', 'AccountNumber', 'Website'];
}

Lightning Web Component (LWC) as Custom Tab

Now, to use Lightning Web Component as Custom Tab, we need to update the metadata file for the component and add target as lightning__Tab. Our metadata file should look like below:

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

With target as lightning__Tab, we have enabled our Lightning Web Component to use as a Custom Tab. Now, we need to create a Tab itself.

Go to Tabs From Quick Find box, click New under Lightning Component Tabs, and select c:lwcCmp component for the Lightning Component select list along with other required fields. Click Save.

The Custom Tab should look something like below:

Lightning Web Component Custom Tab
Lightning Web Component Custom Tab

Once the Tab is created, add this Tab in Navigation Items either by editing an App or from Personalize your nav bar. And we are Done.

This is how our implementation will look:

Custom Tab using (LWC) Lightning Web Component
Custom Tab using (LWC) Lightning Web Component

If you don’t want to miss new implementations, please Subscribe here.

If you want to check more implementations using Lightning Web Components, you can check it here.

Below are some hand-picked implementations for you:

See you in the next implementation!

Leave a Comment