How to Add a Visualforce Page in Salesforce Lightning Pages?

In the Salesforce Lightning experience, we can customize a large section on the user interface using clicks or low code. To use the functionalities of Visualforce, we can embed that Visualforce page in Lightning pages with the help of Salesforce Lightning App Builder.

This Salesforce tutorial will teach us how to add or embed a visualforce page in Salesforce Lightning pages.

Add a Visualforce Page in Salesforce Lightning Pages

To add a visualforce page in Salesforce Lightning pages, we first need to enable the permissions from the visualforce page to make it available in the Lightning app builder.

Enable Visualforce Pages in Lightning Experience

To enable Visualforce pages in the Salesforce Lightning experience, navigate to the Setup and follow the steps below.

1. On the Setup page, go to the quick find box and search, then select Visualforce pages.

2. In the visualforce setup, click on the Edit button of the page you want to add to the Lightning experience.

3. In the Visualforce page setup, select the “Available for Lightning Experience” checkbox and click the Save button.

With this setting, the visualforce page will be available to add or embed in the Salesforce Lightning pages.

Add Visualforce Pages to the Salesforce Lightning pages.

To add a virus force page to the Salesforce Lightning app page, we will use the Lightning app builder.

1. On the setup page of Lightning, go to the quick find box, search, and select Lightning App Builder.

2. To add a visualforce page, click on the Edit button on the Lightning page, and if you do not have the Lightning page, first create the Lightning app page.

3. As we open the Lightning app page or record page, it will open in the Lightning app builder. Here, go to the components section in the left sidebar, then drag and drop the Visualforce component to the page region.

4. After adding the component, go to the right side of the window and select the Visualforce page from the available options. Only those visualforce pages that you have made available for the Lightning experience.

5. Now, to set the visibility on the visualforce page component, click on the Set Component Visibility, and here you can apply the filter for the visibility of the visualforce page on the Lightning page.

6. We can also add device visibility to the visualforce page. For example, if you want to make this visualforce page for Desktop and restrict it from opening on mobile, then you can apply the Filter Type as Device, Field as Form Factor, and Value as Desktop.

After applying the filter, click on the Done button.

7. At last, click on the Save button.

Now, navigate to the Lightning app page, where you will see the visualforce page in the page component.

This way, we can embed a Visualforce page on a Salesforce Lightning page.

Add a Visualforce Page to the Home Page in Salesforce Lightning

In the above example, we have learned how to add the visualforce page to the app page of a Lightning application.

To add a visualforce page to a new home page in Salesforce Lightning, navigate to the setup and follow the steps below.

1. Navigate to the Lightning App Builder from Setup > Lightning App Builder.

2. In the Lightning App Builder setup, click on the New button.

3. In the next window, select the option Home page and click on the Next button.

4. Enter the label for the home page and click Next.

5. In this step, we have to select the template for the home, and for that, we have two options.

• Standard Page templates – This option will give you a blank canvas with the selected template format.

• Clone Salesforce default page – This option will create a clone from the default home page, which you can modify in the app builder.

6. After selecting or cloning the template format, it will open in the Lightning App Builder. Here, go to the components section, then drag and drop the Visualforce component to the page template region.

7. After this, select the visualforce page from the field Visualforce Page Name, and here, you can also apply the component visibility as we did in the above example.

Click Save to apply the changes.

8. The activation window will open as we click the save button. Here, click Activate to make the changes visible to the users.

9. In the next window, you will see the assignment options for the custom home page. Here, you can select that you want to make it the default for any application to assign to profiles.

10. At last, save the page and navigate to the application where you have deployed the home page, and there, you will see the embedded visualforce page on the Lightning Home page.

This way, we can add or embed the visualforce page in the Salesforce Lightning Home page using the Lightning app builder.

Conclusion

In this Salesforce tutorial, we have learned about embedding a Visualforce page into a Salesforce Lightning page. In the above example, we have embedded a visualforce page to an existing home page, and later, we created a home page and added a visualforce component to that home page.

By enabling Visualforce pages for Salesforce Lightning Experience and using the Lightning app builder, you can integrate the visualforce pages into Lightning pages as components.

You may also like to read:

• Visualforce Page Tags in Salesforce
• Implement Pagination in Salesforce Visualforce Pages
• Create Forms using Visualforce Page in Salesforce
• Use Apex Controllers with Visualforce Pages

Bijay Kumar

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.