-- Email : training@crsinfosolutions.com    
India flag 9347854179  or 6303567490   
(Please try WhatsApp chat)

How to Use Visualforce in Salesforce Lightning Communities?

Home  >>  Software Training  >>  How to Use Visualforce in Salesforce Lightning Communities?

How to Use Visualforce in Salesforce Lightning Communities?

On May 5, 2018, Posted by , In Software Training, With No Comments

We have excellent feature in Salesforce Lightning that is we can reuse the elements which create in Lightning Community. The popular elements we create in Lightning community are Visualforce pages, actions, buttons, links, and canvas apps which are used for Salesforce Tabs + Visualforce template-based communities.

For example, say that you have the Salesforce CPQ app installed in your org. You can create a quote detail page and use the Visualforce Page component to display the quote line editor or other pages. If you have configured actions, buttons, and links, associated with standard or custom objects, they work in communities as well. And canvas app overlays let you host third-party applications in your community.

Available in: Salesforce Classic and Lightning Experience
Available in: EnterprisePerformanceUnlimited, and Developer Editions
User Permissions Needed
To create, customize, or publish a community: Create and Set Up Communities AND View Setup and Configuration
  1. Give Visualforce page access to users by profile.
    1. From Setup, enter Profiles in the Quick Find box, then select Profiles.
    2. Click the name of the profile you want to modify.
    3. On the Profile page, click Enabled Visualforce Page Access.
    4. In the Enabled Visualforce Page Access section of the Profile page, click Edit.
    5. In the Available Visualforce Pages list, select the Visualforce pages that you want to make available to this profile and then click Add.

    6. Click Save.
  2. Make the Visualforce page available for your community.
    1. From Setup, enter Visualforce Pages in the Quick Find box, then select Visualforce Pages.
    2. Click Edit for the page you want to make available for your community.
    3. Select Available for Salesforce mobile apps and Lightning Pages and click Save.

Visualforce Page Component—To add a Visualforce page to your Customer Service (Napili) community, drag and drop the Visualforce Page Component from the Components panel to the page. Select the Visualforce page you want to use in the property editor.

Custom Actions—If you have custom actions with an action type of Custom Visualforce associated with a Visualforce page, these actions work in published communities. When users click the action button, the associated Visualforce page displays.

Custom Buttons and Links—If you have custom buttons and links with a content source of Visualforce Page, these buttons and links work in published communities. When users click the button or link, the associated Visualforce page displays.

Canvas Apps—You can use canvas apps as custom actions to give users access to the functionality of your apps in communities. Configure your canvas app for Lightning Component and Visualforce Page in Canvas App Settings. You can then load the canvas app inside a Visualforce page, Visualforce action, and Lightning components in published communities.

Best Practices for Using Visualforce in Communities

  • Community Branding—When developing your Visualforce page code, set the showHeader attribute to true. That way, branding properties you set in Administration | Branding in Community Workspaces or Community Management also apply to the Visualforce page component in your Customer Service (Napili) community. To modify the default gray background for Visualforce components, change the Header Background property on the Branding page.
  • Mobile—To enable Visualforce pages to display community branding on mobile, set standardStylesheets=true orshowHeader=true in your Visualforce page code.
  • URLs—If your Visualforce page contains links to other Visualforce pages, ensure that the Visualforce markup includes http:// or https:// at the start of the URL. Also, if your page is locked in a frame, use the target=“_top”attribute to open the page in the full body of the window. For example,

    <a href=“https://yourVFpageURL.com” target=“_top” >Name of Visualforce Page</a>

  • JavaScript Sources—Use JavaScript sources such as connection.jsapex.jsdebugshell.js, and util.js in Visualforce pages in either of the following ways:

    <apex:includeScript value=“/soap/ajax/36.0/connection.js”/> or


  • Images—Hard-coded image URLs in Visualforce pages are not supported in Community Builder preview. We recommend that you upload images as static resources as follows:

    <img alt=“{{msg.severity}}” class=“msgIcon” src=“{!$Resource.spacerImage}” title=“{{msg.severity}}”/>

Leave a Reply

Request Live Demo Invitation

Get notified on our Free Interactive Online Demo Session.

Please wait...

Check Reviews
Go to Contact Us

Registration Form

Please wait...