{"id":2596,"date":"2017-07-14T09:01:50","date_gmt":"2017-07-14T09:01:50","guid":{"rendered":"http:\/\/www.greytrix.com\/blogs\/salesforce\/?p=2596"},"modified":"2025-05-09T07:11:11","modified_gmt":"2025-05-09T07:11:11","slug":"using-nested-lightning-components-in-salesforce","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2017\/07\/14\/using-nested-lightning-components-in-salesforce\/","title":{"rendered":"Using Nested Lightning Components in Salesforce"},"content":{"rendered":"

We have already gone back and forth on how Lightning is beneficial and yet minimalistic, how it could be rendered on VisualForce Pages<\/a> and how to implement their design system on Salesforce Classic<\/a> if you want a taste of both worlds. Since its emergence, a large swarm of developers has gone on tireless approaches to make Lightning productive and materialistic at the same time. And since its framework is readily supported by Salesforce 1 and Classic future implementations of Salesforce components in Lightning makes more sense.<\/p>\n

As mentioned earlier, we have already seen how Lightning components can be implemented in the Visualforce page, following the same track in this blog we are going to see how to implement nested Lightning components in Visualforce. For our demo purpose, we would be creating a CSS based auto text slider so without further ado let\u2019s jump right into it.<\/p>\n

First, you need to create a Lightning component, this Lightning component will consist of all the attributes that we will be using for sliding animation, refer the below code-<\/p>\n

\"1.<\/a>

1. First Lightning Component<\/p><\/div>\n

Now, create another Lightning component this component will consist of all the logic of the CSS will be implemented here. The components helper class will consist of all the logic which will control the styling, the delay how long the slide should appear and how the content should be displayed, refer the below code-<\/p>\n

\"2.<\/a>

2. Second Lightning Component<\/p><\/div>\n

\"3.<\/a>

3. Component controller<\/p><\/div>\n

\"4.<\/a>

4.1. Component helper class-1<\/p><\/div>\n

\"5.<\/a>

4.2. Component helper class-2<\/p><\/div>\n

\"6.<\/a>

4.3. Component helper class-3<\/p><\/div>\n

\"7.<\/a>

5.1. Style class for Second component<\/p><\/div>\n

\"8.<\/a>

5.2. Style class for Second component-2<\/p><\/div>\n

\"9.<\/a>

5.3. Style class for Second component-3<\/p><\/div>\n

\"10.<\/a>

5.4. Style class for Second component-4<\/p><\/div>\n

And now, finally, we will create one more component which would consist of both the components that we created. This third component will have an attribute \u201cimplements\u201d which should be \u201cflexipage:availableForAllPageTypes\u201d and its \u201caccess\u201d should be set to \u201cglobal\u201d so that they would be available for use in Lightning as well as in Classic.<\/p>\n

\"11.<\/a>

6. Third component<\/p><\/div>\n

Now, create a Lightning App which would consist of all the three Lightning components that we created. Refer the below code for the same-<\/p>\n

\"12.<\/a>

7. Slider App<\/p><\/div>\n

Finally, we will be creating a Visualforce page that would refer all these components and display them. We created a Visualforce page named \u201cNestedCompDemo\u201d and implemented the following logic-<\/p>\n

\"13.<\/a>

8. NestedCompDemo-Vf page<\/p><\/div>\n

Once you are done you can preview the page and see the changes for yourself. Although this blog main emphasis was to give you a brief of how nested Lightning components can be implemented by the end of this demo you would successfully implementing an auto text slider. For more advanced example visit this blog.<\/p>\n

\"14.<\/a>

9. Nested Lightning Components<\/p><\/div>\n

About Us<\/strong>
\nGreytrix<\/a> is one stop solution provider for Sage ERP and Sage CRM needs. We provide complete end-to-end assistance for your technical consultations, product customization\u2019s, data migration, system integrations, third party add-on development and implementation expertise.<\/p>\n

Greytrix<\/a> have some unique solutions for Cloud CRM such as Salesforce integration with Sage X3<\/a>, Sage 100<\/a> and Sage 300<\/a>. We also offer best-in-class Cloud CRM Salesforce customization and development services<\/a> to business partners and end users. Greytrix<\/a> have some unique solutions for On-Premise CRM such as Sage CRM integration with Sage X3<\/a>, Sage 100<\/a>, Sage 300<\/a>, Sage 500<\/a> and Sage 50 . We also offer best-in-class On-Premise Sage CRM customization and development services<\/a> to business partners and end users.<\/p>\n

For more information, please contact us at salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n","protected":false},"excerpt":{"rendered":"

We have already gone back and forth on how Lightning is beneficial and yet minimalistic, how it could be rendered on VisualForce Pages and how to implement their design system on Salesforce Classic if you want a taste of both worlds. Since its emergence, a large swarm of developers has gone on tireless approaches to\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[206,208,213,388,392,469,526],"class_list":["post-2596","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-lightning","tag-lightning-component","tag-lightning-out","tag-salesforce-classic","tag-salesforce-development","tag-slds","tag-visualforce-page"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/2596","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=2596"}],"version-history":[{"count":3,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/2596\/revisions"}],"predecessor-version":[{"id":10672,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/2596\/revisions\/10672"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=2596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=2596"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=2596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}