Sample Student App – Part 3

by | Sep 1, 2018 | Lightning | 0 comments

Now, lets have a look at the StudentList component. This is the component that would retrieve the data from the server and receive the newly saved record via an event from the StudentForm component to eventually display the data. But before we do, let’s have a look at the video that I made just a while ago showing the entire functionality. Now, as promised I cleaned up the UI for the list and I used a lightning datatable to do that. A pretty handy base component. No heavy lifting while displaying a list of records. Here, it goes.


Now lets dissect this markup. As we can see, it inherits the same Apex controller as the previous component because they both are dealing with the same object. It is common to share an Apex controller between multiple components. We have two aura attributes students and columns. One being of type Object, the other one being of type List. 

The students attribute is there to receive the student records that we will retrieve from the server using the Apex controller. My code for the Apex controller is available in the previous post so I won’t be posting it here again. I will be focusing more on the lightning component here. we could have used a List of Student__c as the type but since we are using a lightning data table here we need to have it as Object. The columns attribute is for holding the column specifications for the columns of the records we choose to display.

Then, we have two event handlers for init and c:updateStudents. The init event is similar to Page_Load or init method in .Net. This event is fired when the component is initialising and whatever you wanna do here has to be done in the handler of that event. The second event handler is merely to capture the custom event we fired from the StudentForm component. This handler is just to capture that event and extract the student record that was passed over.

Then we have the markup for the data table. Pretty straight forward. Nothing much to explain.

Now lets have a look at the JS controller file and the JS helper file here.


	handleUpdateStudents : function(component, event, helper) {
		console.log("Handling update event");
        var student = event.getParam("student");
        var students = component.get("v.students");
        component.set("v.students", students);
    doInit : function(component, event, helper){
        console.log("Initializing student list component");
        var action = component.get("c.getAllStudents");
        action.setCallback(this, function(response){
           // console.log(response.getReturnValue());
            if(component.isValid() && response.getState()==="SUCCESS"){
                component.set("v.students", response.getReturnValue());
                console.log('Student list: '+JSON.stringify(response.getReturnValue()));




	setColumns : function(cmp) {
        console.log('Setting columns for the data table!!');
		var columns=[
            {label:'Name', fieldName:'Name', type:'text'},
            {label:'Age', fieldName:'Age__c', type:'number', cellAttributes: { alignment: 'justify' }},
            {label:'Department', fieldName:'Department__c', type:'text'}
        console.log('Columns: '+JSON.stringify(columns));


The doInit method is simply making an asynchronous call to the server side aura method and retrieving the data and setting it in the students attribute. It then also makes a call to the helper method setColumns. This method just prepares the list of columns that we plan to display in the lightning data table.


There is one more method, handleUpdateStudents. This method is the event handler for our custom event fired from the previous component StudentForm. This event contains a payload student which is the newest record created in the database and passed on to this component. This student was created after the list component initialised so the list won’t contain this record. Rather than querying the database again (SOQL limit needs to be respected in the multi-tenant cloud) we just received the latest record in an event and then extracted it and pushed it into the students attribute. And since it is already bound to the data table, we don’t need to do anything further here. 

In the final segment of the sample student app, I would like to show one tiny detail. I wrapped these two components in another parent component which was then wrapped inside a lightning app. we usually don’t need a lightning app for the components to work, but since we wanted to see them in action without embedding them in some lightning page or quick action button, we just chose to show them as an independent app. Here goes the markup for the parent component and the lightning app. It doesn’t have any JS controller or JS helper because we didn’t need them here.








I would like to mention that using lightning: datable alone didn’t fix the UI. I used lightning layout to align the two components as well. We will talk about the lightning layouts some other day.

Bishwambhar Sen
Bishwambhar Sen is an IT professional with over 10 years of industry experience. He is a Salesforce certified developer and admin. When he is not configuring and customising, he loves photography, traveling and blogging.
Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Share This