Salesforce How to create a tab in salesforce and use ?

What is a Tab in Salesforce?

A tab in Salesforce provides users access to specific objects or web pages. You can create:

• Custom Object Tabs – For your custom objects
• Web Tabs – For embedding external web pages or Visualforce pages
• Lightning Page Tabs – For Lightning components or apps

⚙️ Step-by-Step: Create a Custom Tab in Salesforce

Step 1: Create a Custom Object (if needed)

If you don’t already have a custom object:

1. Go to Setup → Object Manager → Create → Custom Object
2. Enter:
   • Label: Project
   • Plural Label: Projects
   • Object Name: Project
   • Record Name: Project Name
3. Save it.

Step 2: Create a Custom Tab

1. Go to Setup → Tabs
2. Under Custom Object Tabs, click New
3. Choose your custom object (e.g., Project)
4. Select a Tab Style (icon)
5. Choose profiles that should have access
6. Save it.

✅ The new tab will now appear in the App Launcher or navigation bar (if added to an app).

🧭 Step 3: Add the Tab to a Lightning App

1. Go to Setup → App Manager
2. Choose an app (like “Sales”) → Edit
3. In the Navigation Items section:
   • Click Add Item
   • Select your new Project tab
4. Save and Assign to Profiles.

Now, users can access the tab directly in that app.

⚡ Step 4: Add Functionality using Lightning Components

You can display dynamic content under your tab using a Lightning App Page or Lightning Component.

Example: Create a Lightning Component (LWC)

📁 File 1: projectList.html

<template>
    <lightning-card title="Project List" icon-name="custom:custom63">
        <lightning-datatable
            key-field="Id"
            data={projects}
            columns={columns}
        ></lightning-datatable>
    </lightning-card>
</template>

📁 File 2: projectList.js

import { LightningElement, wire, track } from 'lwc';
import getProjects from '@salesforce/apex/ProjectController.getProjects';

export default class ProjectList extends LightningElement {
    @track projects;
    columns = [
        { label: 'Project Name', fieldName: 'Name' },
        { label: 'Status', fieldName: 'Status__c' },
        { label: 'Start Date', fieldName: 'Start_Date__c', type: 'date' }
    ];

    @wire(getProjects)
    wiredProjects({ data, error }) {
        if (data) {
            this.projects = data;
        } else if (error) {
            console.error(error);
        }
    }
}

📁 File 3: ProjectController.cls

public with sharing class ProjectController {
    @AuraEnabled(cacheable=true)
    public static List<Project__c> getProjects() {
        return [SELECT Id, Name, Status__c, Start_Date__c FROM Project__c LIMIT 50];
    }
}

📁 File 4: projectList.js-meta.xml

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

🚀 Step 5: Create a Lightning Tab for the Component

1. Go to Setup → Tabs → Lightning Component Tabs
2. Click New
3. Choose your component (projectList)
4. Select an icon and label (Project Dashboard)
5. Save.

You now have a Lightning Tab showing a live Project List.

🎯 Usage Summary