Add Visualforce Page as Custom Tab in Salesforce

While working as a Salesforce developer, I got a requirement to create a custom search page using a Visualforce Page. This page should allow users to search records by entering multiple input field values.

The search results should display in a table format on the same page, so users can quickly find and view the records they need without navigating to multiple screens.

Next, we need to add this search page as a tab in Salesforce, allowing users to access it from the navigation menu easily.

In this article, we will learn how to add a Visualforce page as a tab in Salesforce. In this, I will explain Visualforce tabs and how we can create one in a Salesforce environment.

This Tutorial Covers:

Visualforce Tabs in Salesforce

In Salesforce, users access Visualforce pages through a Visualforce Tab. This tab is a part of the user interface that lets you show a Visualforce page inside Salesforce.

You can make a Visualforce Tab by creating a custom tab and linking it to your Visualforce page. This way, users can access the page directly from the Salesforce navigation bar.

You can create a Visualforce Tab from the Tabs setup in Salesforce or create the Visualforce page itself from the Developer Console.

By creating a custom tab for the Visualforce Page, users don’t have to search for it in the setup or bookmark the URL; they can click the tab whenever they want to perform a search.

Add a Visualforce Page As a Tab in Salesforce

In the steps below, I will first explain how to create the Visualforce Page for our custom search functionality.

Next, I will explain how to add the Visualforce Page as a custom tab in Salesforce, allowing easy access from the navigation bar. Finally, you will have a working search page that can be opened directly from a tab.

Create a Visualforce Page in Salesforce

Now, create the Visualforce page that shows fields, input text, and a search button with result records in a table.

First, we need to define the controller that will provide the data and logic for the Visualforce page. The controller retrieves the registration records and displays them in a table based on the search fields.

We created an Apex class (EventRegistrationSearchController), and its name needs to be passed as the controller in the Visualforce page. This way, the page can use the logic and data from that Apex class.

Next, we defined the inputText tag to pass the Apex variable. That means when the user provides any name in this text, this will pass to the Apex class, and then the query will retrieve records according to the values.

We also added the picklist values for the fields in the event registration object.

The <apex:pageBlockTable> tag is used to create a table in a Visualforce page. It displays a list of records in rows and columns. In this, we provided the {!registrations} value, which we declared in the Apex class, and stored the searched records.

<apex:page controller="EventRegistrationSearchController" docType="html-5.0">
    <apex:form>
        <apex:pageBlock title="Event Registration Search">
            <apex:pageBlockSection columns="2">

                <!-- Search by Name -->
                <apex:inputText value="{!searchName}" label="Name" />

                <!-- Event Name Picklist -->
                <apex:selectList value="{!searchEvent}" size="1" label="Event Name">
                    <apex:selectOption itemLabel="-- All --" itemValue=""/>
                    <apex:selectOption itemLabel="Dreamforce" itemValue="Dreamforce"/>
                    <apex:selectOption itemLabel="TrailblazerDX" itemValue="TrailblazerDX"/>
                    <apex:selectOption itemLabel="Agentforce + Einstein Copilot sessions" itemValue="Agentforce + Einstein Copilot sessions"/>
                    <apex:selectOption itemLabel="Salesforce Service Summit" itemValue="Salesforce Service Summit"/>
                    <apex:selectOption itemLabel="Salesforce World Tour Essentials" itemValue="Salesforce World Tour Es