Learn Salesforce Lightning with Examples – Part 3 (Display and Select list of records using Wrapper Class in Lightning Component)

Learn Salesforce Lightning with Examples – Part 3 ( Display and Select list of records using Wrapper Class in Lightning Component) is the third part of the series – “Learn Salesforce Lightning with Examples” where We would share the key practical examples and experience with lightning.We are focusing on Lightning Components for now.

Background,Blog Contributors and Pre-Requisites

To get started for this blog you need to fulfill all the Pre-requisites mentioned here.In this link,you will also get to know the background and blog contributors for this series.

Display and Select list of records using Wrapper Class in Lightning Component

Business Case:

Adam is working as a Senior Application Developer in Universal Containers. Company wants to move their traditional (classic version )recruitment app to lighting. Adam needs to do a Proof of Concept by building a custom lighting component for creating the Candidate’s record into Salesforce. Now that he has created the first and second part which is explained here,He would like to showcase even users know how to display a list of records and select couple of them and bring them into  Apex and perform any action they want.

Solution:

Adam decides to show position records and decided to create the flow in such a way that the wrapper is used to display the list of positions and wrapper is used again to perform apex operations for selected records.Adam just add a debug log in Apex for demonstrate purposes however he can do any apex operation there as per the client requirements later.

Before getting started,Adam makes sure that he doesn’t miss any pre-requisites mentioned here.Below are the steps Adam takes for creating the solution after completing the pre-requisites.If you have followed my previous blogs,then you just need to update the components and follow these steps(Please note that if you just copy paste the complete code then you need not follow my previous blog,but I would insist you to do so if you want to learn in details):

1. Create 3-4 dummy records for position object for demo purpose.
2. Create New Lightning Component to display and select the list of position records.
3. Create a common wrapper class to define the wrapper.Also,We would add all the wrapper classes here in future.
4. Create new apex class to add the apex logic for this newly created lightning component.
5. Send data into JSON format and deserialize the JSON in apex class.
6. Test and host lightning component in app(ManageCandidate.app) and debug logs.

Create dummy position records

You need to set up the data to display ,so make sure you have set up some dummy data for the same.

Create lightning component,its controller and helper

You have to create a lightning component which will be used to display the list of position records and select the records to perform apex action.You have to add different code for the Here is the code for lightning component,its controller and its helper:

Lightning component code

[codeblocks name=’DisplayPositions.cmp’] 

Lightning component controller code

[codeblocks name=’DisplayPositionsController.Js’] 

Lightning component helper code

[codeblocks name=’DisplayPositionshelper.Js’] 

Create a common wrapper class

Create a wrapper class where you can store all relevant wrapper classes for this series.For now,add a wrapper class to hold position record data.A boolean variable isSelected is added which is used for referring the selected records from lightning screen.Here is code snippet:

[codeblocks name=’CommonWrapperClass.apex’] 

Create apex class

Create new apex class to add the apex logic for this newly created lightning component.The apex logic will :

• fetch position records and set them into wrapper
• deserialize the data received in JSON format from lightning controller.
•  set up debug logs to display/test the requirements.

[codeblocks name=’DisplayPositions.apex’] 

Host and test the application

You need to host the component into the application : managecandidate.app

[codeblocks name=’maangecandidate1.app’]

Now just access the app by using the URL in this format : https://{Domain Name}.lightning.force.com/c/{App Name}.app

Now select any number of records and then hit the Perform Action button:

Now go to debug log and check the debug log used in apex class for showing the list of all records and the selected records:

Just search for the debug statement for the list of position records in wrapper:

Now just search for the debug statement used in apex for selected records and you will find that selected records are ready to be used for apex logic by just differentiating them with a Boolean value:

You can also download the code from the github repository here.

Hope you enjoyed the blog!If you have missed any,then you can go and check here for complete series. Stay tuned and there will be more examples to come ..