How to Add Your Visualforce Page in your Application as a Tab | Salesforce Guide

Introduction

Sometimes our requirement is to access our VF page as a tab in our application. So we gonna learn here how to use our VF page as a tab in your application. For this, I will create a sample Vf page example and  I will add it in our tab.

How to Create Visualforce Page

Step 1: Go to your ‘Developer Console’ and click on File → New → Visualforce Page.

Step 2: Now write your VF page name and write your code inside it.

Step 3: Now write Controller for your Vf Page and assign it in your Vf Page as above. Vf Page Controller is nothing but the Apex Class in Salesforce. And we assign this apex class to our vf page as controller. 

Step 4: Hence our Vf Page is ready now.

Don't forget to check out: Creating Multi Screen Wizard Using Apex and Visualforce Salesforce

How to Add VF Page to our App as a Tab?

Step 1: Go to the ‘Quick Find’ Box and search ‘Tab’ there. And click on ‘Tabs’.

Step 2: Go to the ‘Visualforce Tab’ section and click on the ‘New’ button.

Step 3: Now fill in details as follow:

• Visualforce Page - Select your Vf Page here from the drop-down list.  Here I selected - Training Page [Training Page].

• Tab Label - Write down a name for that Vf page according to your requirement. Here I write ‘Training Vf Page’.    

• Tab Name - It automatically catches ‘Tab Label’ with an underscore.
• Tab Style - Select tab style for your Vf Page.
• Description - Write a description according to your VF page.

Step 4: Click on the ‘Next’ button.

Step 5: Now again click the ‘Next’ button on this page also. Here you can give access to this tab to various profiles also. But keep it as it is.

Step 6: Now add your tab to all apps by clicking on ‘Include Tab’ or you can add this tab to a specific custom app according to your requirement. But I am not gonna add this tab to any of my apps for now. So I deselect the ‘Include Tab’ checkbox.

Step 7: Now click on save and hence your Vf Page tab is created.

Step 8: Now I am gonna add this tab to a particular app. So I search ‘App Manager’ on the Quick find box and click on it.

Check out another amazing blog by Rajat here: Page Layouts in Salesforce - Here's All You Need to Know

Step 9: You can see the whole list of Standard and Custom apps of your org. Now select any one app and click on edit from the down arrow at the end of the app name. Here I select the ‘BOOK MY HOME’ custom app and click on the ‘Edit’ button.

Step 10: Now click on ‘Navigation Items’ and search ‘Training’ on the search bar and then select ‘Training Vf Page’.

Step 11: Now click on ‘>’ this arrow to add this tab in ‘Select Items’  i.e. in the navigation bar of that app.

Step 12: Now add this tab in ‘Selected Items’ and click on ‘Save’.

Step 13: Now go to your app and click on that ‘Training Vf Page’ tab. And your VF page code runs properly and see your Vf Page output.

Step 14: Hence, our Vf Page is added in the app as a tab.

I hope this information will be helpful for you.

Thank you.