{"id":2389,"date":"2017-03-27T08:53:08","date_gmt":"2017-03-27T08:53:08","guid":{"rendered":"http:\/\/www.greytrix.com\/blogs\/salesforce\/?p=2389"},"modified":"2025-06-12T07:19:57","modified_gmt":"2025-06-12T07:19:57","slug":"add-lightning-components-to-visualforce-page","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2017\/03\/27\/add-lightning-components-to-visualforce-page\/","title":{"rendered":"Add Lightning Components to VisualForce Page"},"content":{"rendered":"

Salesforce has reimagined the platform from Classic to Lightning. With the lightning version, accessing data and tools has become easier. The major advantage of Salesforce Lightning over Salesforce Classic is its faster response time with enhanced user interface. Lightning uses its own set of components and design system which is different from Salesforce Classic. The Lightning apps are built around lightning components and till date the use of lightning components were restricted to Lightning apps. However, for all those users who were keen on using Lightning components in their VisualForce page, there is a work around.<\/p>\n

This post shows how to implement this functionality of adding Lightning Components to VisualForce Page. Proceed with the following steps: –<\/p>\n

    \n
  1. \n

    Create a lightning component, named \u201cLightningCompForVF\u201d either through developer console or through your IDE. Use the below mentioned code in your lightning component.<\/p>\n<\/li>\n<\/ol>\n

    \"Lightning<\/a>

    Lightning Component<\/p><\/div>\n

      \n
    1. \n

      Post creation of lightning component, create a style class for the same component and use the below code in the class.<\/p>\n<\/li>\n<\/ol>\n

      \"Style<\/a>

      Style class for lightning component<\/p><\/div>\n

        \n
      1. \n

        Now use this Lightning component in a Lightning app. For this, we recommend you to create a new Lightning app, named \u201cLightningAppForVF\u201d and use the lightning component in this app.<\/p>\n<\/li>\n

      2. \n

        Create a VisualForce page that will display this lightning component.<\/p>\n<\/li>\n

      3. \n

        VisualForce page should provide the interface where the lightning component that we are going to use in the page can be viewed. Use the below code in your VisualForce page.<\/p>\n<\/li>\n<\/ol>\n

        \"Visualforce<\/a>

        Visualforce page code<\/p><\/div>\n

        Once the page is created and previewed, the Lightning component will appear in your VisualForce page. Although this is just a demo, it does open doors for developers to experiment and implement lightning components in VisualForce pages.<\/p>\n

        \"Vf<\/a>

        Vf page preview<\/p><\/div>\n

        With the help of Lightning components, the VisualForce page will be less monotonous and you can enjoy the functionalities of Salesforce Classic page, a perfect example of best of both the worlds.<\/p>\n

        For an advanced example and in depth understanding please visit the site- http:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-lightning-component-in-visualforce-page\/<\/a><\/p>\n

        About Us<\/strong><\/span>
        \n        Greytrix<\/a>\u00a0as a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners across the globe. We offers Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that requires apex code incorporation into the Salesforce platform.<\/p>\n

        Greytrix<\/a>\u00a0has some unique solutions for Cloud CRM such as Salesforce integration with\u00a0Sage Enterprise Management (Sage X3<\/a>),\u00a0Sage Intacct, Sage 100\u00a0<\/a>and\u00a0Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM\u00a0Salesforce customization and development services<\/a> along with services such as Salesforce Data Migration<\/a>, Integrated App development<\/a>, Custom App development<\/a> and Technical Support<\/a> to business partners and end users.<\/p>\n

        Greytrix GUMU™ integration for Sage ERP \u2013 Salesforce is a 5-star app listed on Salesforce AppExchange<\/a>.<\/p>\n

        For more information, please contact us at\u00a0salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n

        Related Posts<\/strong><\/span><\/p>\n