{"id":6136,"date":"2021-03-30T06:11:19","date_gmt":"2021-03-30T06:11:19","guid":{"rendered":"https:\/\/www.greytrix.com\/blogs\/salesforce\/?p=6136"},"modified":"2021-03-30T06:11:21","modified_gmt":"2021-03-30T06:11:21","slug":"how-to-use-lightning-component-in-visualforce-page","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/03\/30\/how-to-use-lightning-component-in-visualforce-page\/","title":{"rendered":"How to Use Lightning Component in Visualforce page"},"content":{"rendered":"\n<p>In this blog, we will discuss on how to use Lightning component in Visualforce page. Kindly follow the below steps in order to use Lightning component in Visualforce page.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><em>Create Lightning Component<\/em><\/strong><\/h4>\n\n\n\n<p><strong>SampleComponent<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Firstly, in this lightning component, we are using &#8216;<strong>PassesValueFromVF<\/strong>&#8216; attribute which is set\/pass from Visualforce page. Refer the below code to define component:-<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;aura: component>\r\n    &lt;aura: attribute name=\"PassesValueFromVF\" type=\"string\"\/>\r\n    &lt;b>Account Name from vf&lt;\/b> : {!v.PassesValueFromVF}\r\n    &lt;p> \r\n    &lt;button class=\"slds-button slds-button_brand\" \r\n    onclick=\"{! c.showMessage}\">Show Message&lt;\/button>          \r\n    &lt;\/p>\r\n&lt;\/aura:component>\r<\/code><\/pre>\n\n\n\n<p><strong>SampleComponentController<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Secondly, we are using this controller to display alert message by clicking on the &#8220;<strong>Show Message<\/strong>&#8221; button which we define in the above component.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>({\r\n\tshowMessage: function(component, event, helper) {\r\n        alert('Message from Lightning Component');\r\n\t}\r\n})<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><em>Create Lightning Application<\/em><\/strong><\/h4>\n\n\n\n<p><strong>SampleApplication<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Firstly, to display the Lightning component in Visualforce page, we need to create Lightning application.<\/li><li>In addition, the Lightning application include <em>&lt;aura: dependency><\/em> tag which indicate that it uses custom lightning component. Under the &lt;aura: dependency> tag we need to mention our Lightning component name as shown in below code.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;aura: application extends=\"ltng:outApp\" access=\"global\">\r\n        &lt;aura: dependency resource=\"c:SampleComponent\"\/>\r\n&lt;\/aura: application><\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\"><strong><em>Create Visualforce Page<\/em><\/strong><\/h4>\n\n\n\n<p><strong><em>sampleVF<\/em><\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Firstly, we need to add <strong>&#8220;&lt;apex:includeLightning \/&gt;<\/strong>&#8221; tag&nbsp; which includes the Lightning component for Visualforce JavaScript library.<\/li><li><strong>&#8220;$Lightning.use()<\/strong>&#8221; method is used to refer Lightning application in which we need to add our Lightning application name.<\/li><li><strong>&#8220;$Lightning.createComponent<\/strong>&#8221; is used to create Lightning component dynamically in which we need to add our Lightning component name.<\/li><li>&#8220;<strong>PassesValueFromVF<\/strong>&#8221; is a parameter, which is used to pass the value from Visualforce to Lightning component. (refer the below code)<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;apex:page>\r\n  &lt;apex:includeLightning \/>\r\n    &lt;div  id=\"compContainer\" \/>\r\n  &lt;script>\r\n     $Lightning.use(\"c:SampleApplication\", function() {\r\n         $Lightning.createComponent(\"c:SampleComponent\",\r\n             {PassesValueFromVF:\"Micro System\"},\r\n             \"compContainer\",\r\n             function(cmp) {\r\n          console.log(\"c:VFPageApp loaded successfully in VF page\");\r\n             }\r\n         );\r\n     });\r\n  &lt;\/script>\r\n&lt;\/apex:page><\/code><\/pre>\n\n\n\n<p>Here is the output, where we display account name \u201c<strong>Micro System<\/strong>\u201d which we pass from visualforce page. Also, when user click on \u201c<strong>Show Message<\/strong>\u201d button an alert message will through from lightning controller method.<\/p>\n\n\n\n<center><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/03\/Output.png\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" class=\"size-full\" style=\"border: 1px solid #A9A9A9; padding: 2px; margin: 2px; align: center;\" src=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-content\/uploads\/2021\/03\/Output.png\" alt=\"Output while using Lightning Component in Visualforce Page\"><\/a><\/center>\n<font size=\"2\"><center><i>Output while using Lightning Component in Visualforce Page<\/i><\/center><\/font>\n\n\n\n<p>This way, you can use Lightning component in Visualforce page. We hope you may find this blog resourceful and helpful. If you still have concerns and need more help, please contact us at\u00a0<a href=\"mailto:salesforce@greytrix.com\">salesforce@greytrix.com<\/a>.<\/p>\n\n\n\n<p style=\"text-align: justify\"><b>About Us<\/b><\/br>\n<p><a href=\"https:\/\/www.greytrix.com\/\">Greytrix<\/a> \u2013 a globally recognized and one of the oldest Sage Development Partner and a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners and Sage PSG across the globe. We offer Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that require apex code incorporation into the Salesforce platform.<br><br> Greytrix has some unique solutions for Cloud CRM such as <a href=\"\">Salesforce Sage integration<\/a> for <a href=\"https:\/\/www.greytrix.com\/sage-x3-erp\/integration\/\">Sage X3<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-100-integration\/\">Sage 100<\/a> and <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/sage-300-integration\/\">Sage 300 (Sage Accpac)<\/a>. We also offer best-in-class Cloud CRM <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Salesforce customization and development services<\/a> along with services such as Salesforce <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/data-migration-support\/\">Data Migration<\/a>, <a href=\"https:\/\/www.greytrix.com\/salesforce-cloud-services\/crm-development\/\">Integrated App development<\/a>, Custom App development and Technical Support business partners and end users. Salesforce Cloud CRM integration offered by Greytrix works with Lightning web components and supports standard opportunity workflow. Greytrix GUMU&#x2122; integration for Sage ERP \u2013 Salesforce is a 5-star rated app listed on <a href=\"https:\/\/appexchange.salesforce.com\/appxListingDetail?listingId=a0N30000000psM5EAI\" target=\"_blank\" rel=\"noopener\">Salesforce AppExchange<\/a>.<br> The GUMU&#x2122; Cloud framework by Greytrix forms the backbone of cloud integrations that are managed in real-time for processing and execution of application programs at the click of a button.<br><br> For more information on our Salesforce products and services, contact us at <a href=\"mailto:salesforce@greytrix.com\">salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n\n\n\n<p><strong>Related Posts<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/02\/12\/using-aura-method-to-pass-value-from-child-component-to-parent-component-with-example\/\" target=\"_blank\">Using Aura method to pass value from Child component to Parent component (with example)<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/01\/22\/salesforce-how-to-get-row-index-of-lightning-table-rows\/\" target=\"_blank\">Salesforce \u2013 How to get row index of lightning table rows<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this blog, we will discuss on how to use Lightning component in Visualforce page. Kindly follow the below steps in order to use Lightning component in Visualforce page. Create Lightning Component SampleComponent Firstly, in this lightning component, we are using &#8216;PassesValueFromVF&#8216; attribute which is set\/pass from Visualforce page. Refer the below code to define\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.greytrix.com\/blogs\/salesforce\/2021\/03\/30\/how-to-use-lightning-component-in-visualforce-page\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[1120,562,206,1122,1055,207,208,215,367,651,1121,522,523,524,526],"class_list":["post-6136","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-call-lightning-from-vf","tag-code-in-visualforce-page","tag-lightning","tag-lightning-application","tag-lightning-aura-component","tag-lightning-basics","tag-lightning-component","tag-lightning-to-visualforce-page","tag-salesforce","tag-salesforce-lightning-component","tag-use-lightning-component-in-visualforce-page","tag-visualforce","tag-visualforce-code","tag-visualforce-component","tag-visualforce-page"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6136","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=6136"}],"version-history":[{"count":1,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6136\/revisions"}],"predecessor-version":[{"id":6138,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/6136\/revisions\/6138"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=6136"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=6136"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=6136"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}