Sample Student App – Part 2

by | Aug 30, 2018 | Lightning | 0 comments

Lets’s again take a look at the StudentFormHelper.js



This method simply checks the validity of the model. In this case we are simply checking whether the student object is valid or not. We check for null/blank checks and for age we check 0.



Now this method is responsible for saving the student record back to the server. This obviously means we need to call an Aura method on the server side Apex controller which we saw earlier.

For this we need to create an action that is mapped to the server side aura method. A few points to remember here.

The name of the action (component.get(‘‘)) should match the server side Aura Method. Even the case.


The name of your javascript controller method should not match the name of the server side Aura method, case or no case. If you do that you might face erroneous situations like an endless loop. Not sure if salesforce has fixed this yet but just to be safe please avoid it.

So going back. You create an action and you can even set parameters on it if your server side aura method is expecting it. In this case we are passing the student record.

Showing and hiding (toggling) the spinner

The line below it invokes the lightning spinner. Why do we do it here? because we are going to perform an action which might take time. So to engage the user and let him/her know that it is in progress we will show this spinner. To do this I am simply toggling the css class on it. Initially I set it to ‘slds-hide‘ which essentially keeps the spinner hidden until we need it. Now toggling this css class simply makes it visible. We will again toggle it to make it disappear once we have received a successful response from the server.

DO NOT USE tha aura:waiting and aura:donewaiting events for toggling the spinner


These are legacy system events and have been deprecated. using them for the spinner makes the appearance and disappearance of the spinner unpredictable. You don’t have any control over it as these events fire whenever there is a server trip. If your component is in a lightning page or a tab with other components, you won’t be able to stop it from firing even if your component is not doing a server trip.

A lot of salesforce blogs are still referring to that obsolete method. DONOT follow it. Even salesforce has the same thing to say.

salesforce deprecated system events

salesforce deprecated system events

salesforce deprecated system events

salesforce deprecated system events

Below that line we have the callback method. we are simply setting the callback method on the action. I hope you know what a callback method is. If you don’t, simply think of it as a method which is called once the control is returned back from the server.

we need to check here if the component is still valid. It simply means whether the component still exists and is not destroyed.

We also need to check if the state of the response is SUCCESS. This response state is quite similar the HTTP codes of 200 that we are used to. This is the same. It just tells us that everything went well on the server and that we have received a response successfully.

Upon receiving a successful response we are again resetting the student object with a blank record so that the form becomes clear. Standard practice to avoid the user hitting the save button again and submitting a duplicate record.

Ignore the lines below for now. They are just to fire an event with the student record created just now. yes we received the created student record in the response from the server. we are just using this event to pass this value to the other component (the list display) where we will show it.

In the else part, we are checking if the response state is “ERROR” in which case we need to log it in the console.

There is one more state which is INCOMPLETE.  As the name suggests, the response was incomplete signifying we didn’t receive a response from the server. This could indicate a network issue or this could also mean the server is down.

There are other action states (but the above 3 are the ones we mostly use.) which you can find here.

Below all this you would see a small line $A.enqueueAction(action);

You might have an idea what this does. Simply put, all that you saw above won’t work at all if this line is not placed at the end. This is a common mistake and a  lot of people keep pulling their hair and bang their heads when stuff doesn’t work only to realise later they forgot to add this line.

What it does? It simply queues the action so that it would get executed. All the actions are placed in a queue and  fired by lightning framework when resources are available. And that’s why we need the callback method as mentioned earlier. Because we don’t know when we would receive the response. Usually this happens almost instantly.

So this is how you save the student record. Now comes the easier part. We will just show it in the list in the other component. Yey!!

    isValid : function(component) {
        console.log("Validating component");
        var student = component.get("v.student");
        return !($A.util.isEmpty(student.Name) || student.Age__c === 0 
                 || $A.util.isEmpty(student.Department__c));
    save : function(component){
        console.log("Saving component");
        var action = component.get("");
        //  console.log(JSON.stringify(component.get("v.student")));
            student: component.get("v.student")
        action.setCallback(this, function(response){
            //  console.log(response.getState());
            if(component.isValid() && response.getState()==="SUCCESS"){
                var blankStudent = {sobjectType:'Student__c',
                component.set("v.student", blankStudent);
                console.log("Firing appplication event");
                var updateStudentEvent = $A.get("e.c:updateStudents");
                        student : response.getReturnValue()
                console.log("Firing component event");
                var compEvent = component.getEvent("compEvent");
                console.log("StudentID:" + response.getReturnValue().Id);
                    studentID : response.getReturnValue().Id
            else if(response.getState()==="ERROR"){
                var errors = response.getError();
                    if(errors[0] && errors[0].message)
                    console.log("Unknown error!")
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