CLIENT-SIDE CONTROLLER

CLIENT-SIDE CONTROLLER

In the previous Episode, we have discussed how to create a UI Button and give action to that button.

Now in this Episode, we are gonna discuss what will happen after pressing that button? here is the climax where the client-side controller or .js controller comes in a picture.

Let's understand the working of a client-side controller or .js controller with the help of an example of an addition of two number on button click.

COMPONENT :  AddComponent.cmp

=============================================

<aura:component >

    <aura:attribute name="num1" type="Integer" default="30"/>

    <aura:attribute name="num2" type="Integer" default="20"/>

    <aura:attribute name="sum" type="Integer" />

    

  {!v.num1} + {!v.num2} = {!v.sum}

   <br></br>

  <ui:button label= "Press Me" press="{!c.add}"/>

</aura:component>

=============================================

Now on right hand side below component there is option called as controller click on that.

Add below code into it and then we'll understand the working of that controller.

CONTROLLER : AddComponent.js 

=============================================

({

add : function(component) {

        var xyz = component.get("v.num1") + component.get("v.num2");

        component.set("v.sum",xyz);

                                              }

})

=============================================

The code will get the value of num1 and num2 with get() method as well as add them and store inside xyz and again set the value of xyz inside v.sum. 

As its .js controller no need to use {} brackets for "v.sum" attribute.

Now add this component to a lightning application and test it.

APPLICATION : AddComponent.app

=============================================

<aura:application extends = "force:slds">

    <c:SumOfTwoNumber/>

</aura:application>

=============================================

Now hit on preview option available on the right-hand side in the developer console.

OUTPUT: 

=============================================

• First output will look like this.

• 

• Now Hit Press Me

• 

SUCCESS !!! You can create the same for addition, subtraction, division and play with it.
You can also create your cool calculator which can perform some calculations and test it.

If you have any doubt feel free to comment below the post.

WOHOOOO !!! YOU HAVE JUST CREATED LIGHTNING COMPONENT BY USING CLIENT-SIDE CONTROLLER 

If you like this salesforcekid learning platform please let me know in the Comment section...Also, Share with your salesforce folks wish you 

Happy learning ☁️⚡️ (Learn. Help. Share.)

<< PREVIOUS                                                      NEXT >>