As mentioned in our previous blogs we have already seen how to use Lightning Components in our Visualforce pages and we have also seen how to implement the look and feel of Lightning in our Visualforce pages using SLDS system. As it stands it does seem like one way traffic as we are only implementing Lightning and its design systems in our Salesforce Classic environment, so in this blog we would like to go the other way around and implement something that’s available in Salesforce Classic into our Lightning system.
The “” tag can create a collapsible panel/section which based on click can expand and collapse the section/panel based on whether the user wants to see the section/panel or not. Although implemented in Visualforce pages for Salesforce Classic after some research we did find a quick solution to implement a collapsible panel in lightning as well.
For its creation, we need to create a Lightning component which will constitute of controller, helper class and style class. And for previewing and testing purpose we will be creating a Lightning app for the same. So without any further ado, let’s jump right into it.
Create a Lightning Component via your developer console or through your IDE. Let’s say the name of your Lightning component is “Expand_Collapse_Panel” it’s relevant controller and other classes will be created. Use the below mentioned code in your Lightning component.
Your Controller for Lightning component will consist of the below mentioned lines of code.
And its helper class would be as below.
Include the style classes so that you are able to toggle back and forth for expanding and collapsing the panel.
And finally, to preview and test the same we will create a Lightning App that will refer your Lightning component and you can test the changes accordingly.
For a more detailed and advanced example you can refer to this blog which would not only help you understand but would also help you delve on the same.
Greytrix 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’s, data migration, system integrations, third party add-on development and implementation expertise.
Greytrix have some unique solutions for Cloud CRM such as Salesforce integration with Sage X3, Sage 100 and Sage 300. We also offer best-in-class Cloud CRM Salesforce customization and development services to business partners and end users. Greytrix have some unique solutions for On-Premise CRM such as Sage CRM integration with Sage X3, Sage 100, Sage 300, Sage 500 and Sage 50 . We also offer best-in-class On-Premise Sage CRM customization and development services to business partners and end users.
For more information, please contact us at firstname.lastname@example.org. We will be glad to assist you.