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.
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 Essentials"/>
<apex:selectOption itemLabel="Tableau Conference" itemValue="Tableau Conference"/>
<apex:selectOption itemLabel="Salesforce Basecamp" itemValue="Salesforce Basecamp"/>
</apex:selectList>
<!-- Session Picklist -->
<apex:selectList value="{!searchSession}" size="1" label="Session">
<apex:selectOption itemLabel="-- All --" itemValue=""/>
<apex:selectOption itemLabel="Morning Session (9 AM – 12 PM)" itemValue="Morning Session (9 AM – 12 PM)"/>
<apex:selectOption itemLabel="Afternoon Session (1 PM – 4 PM)" itemValue="Afternoon Session (1 PM – 4 PM)"/>
<apex:selectOption itemLabel="Q&A Session (4:30 PM – 5:30 PM)" itemValue="Q&A Session (4:30 PM – 5:30 PM)"/>
</apex:selectList>
<!-- Status Picklist -->
<apex:selectList value="{!searchStatus}" size="1" label="Status">
<apex:selectOption itemLabel="-- All --" itemValue=""/>
<apex:selectOption itemLabel="Registered" itemValue="Registered"/>
<apex:selectOption itemLabel="Attended" itemValue="Attended"/>
<apex:selectOption itemLabel="Cancelled" itemValue="Cancelled"/>
</apex:selectList>
<apex:input type="date" value="{!regDate}" label="Registration Date"/>
</apex:pageBlockSection>
<apex:pageBlockButtons>
<apex:commandButton value="Search" action="{!search}"/>
</apex:pageBlockButtons>
<!-- Results Table -->
<apex:pageBlockTable value="{!registrations}" var="reg">
<apex:column value="{!reg.Name__c}" headerValue="Name"/>
<apex:column value="{!reg.Email__c}" headerValue="Email"/>
<apex:column value="{!reg.Phone__c}" headerValue="Phone"/>
<apex:column value="{!reg.Registration_Date__c}" headerValue="Registration Date"/>
<apex:column value="{!reg.Event_Name__c}" headerValue="Event Name"/>
<apex:column value="{!reg.Session__c}" headerValue="Session"/>
<apex:column value="{!reg.Status__c}" headerValue="Status"/>
</apex:pageBlockTable>
</apex:pageBlock>
</apex:form>
</apex:page>Add a Visualforce Page as a Custom Tab in Salesforce
In the steps below, I will explain how to create a Visualforce Tab to access our custom search page directly from the Salesforce navigation bar.
On the home page, go to the Quick Find and search for the tabs, then select Tabs.
In the tabs setup window, go to the section Visualforce Tabs and click on the New button.
Select the Visualforce page to display in the tab, then enter the Tab Name and Tab Label.
- After this, select the Tab style and enter the description for the Visualforce tab.
- At last, click on the Next button.
In this step, we select the profiles for which the new tab will be available. We have two options to set the tab visibility for the profiles.
- Apply one tab visibility to all profiles: This option allows us to select one tab visibility for all user profiles, which can be Defaulted on, Defaulted off, or tab hidden.
- Apply different tab visibility for all Profiles: To use this option, go to the tab visibility dropdown adjacent to the profile names and select the desired tab visibility: default on, off, or hidden.
Select the applications for which the custom visualforce tab will be available. This tab is available only for the selected applications. To make it visible to all apps, select the Include Tab checkbox.
At last, click on the Save button.
Now, we can see the created custom visualforce tab in the section Visualforce tabs of the tabs setup.
To view the Visualforce tab, navigate to the application. As we click on the tab, it will display the visualforce page that you selected while creating the visualforce tab.
This way, we can create a custom Visualforce tab in Salesforce and add visualforce pages in it to display on the user interface.
Conclusion
I hope you have got a clear idea about how to add a Visualforce Page as a tab in Salesforce. By creating a custom Visualforce Tab, you can make your page easily accessible to users and improve their experience.
This method is helpful for any custom Visualforce page, whether it’s a search page, a dashboard, or any other custom functionality you build in Salesforce.
You may like to read:
- How to Create Web Tabs in Salesforce
- How to Create Custom Tabs in Salesforce
- How to Create Lightning Page Tabs in Salesforce
I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.
