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.

salesforce developer console controller

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.

  • salesforce kid lightning component

  • Now Hit Press Me

  • salesforce kid lightning component

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 >>

CLIENT-SIDE CONTROLLER CLIENT-SIDE CONTROLLER Reviewed by on Rating: 5

5 comments:

  1. what is use of extends = "force:slds"

    ReplyDelete
    Replies
    1. It is allowing you to use Salesforce Design System as a style. Without "force:slds" if you click on preview then It will show you default browser style(CSS).

      Delete
  2. Failed to save AddComponentApp.app: No COMPONENT named markup://c:SumOfTwoNumber found: Source
    I am getting this error while saving lightning application.Please help

    ReplyDelete
    Replies
    1. Hello Manish,

      Thanks for reaching out.

      As per the error, check in your component if "c:SumOfTwoNumber" this component is included and just remove or comment it and try again.

      Hope that helps.

      Delete
  3. 👍⚡ Great post explaining client-side controllers in Lightning components! The step-by-step example of adding two numbers is super clear and helps demystify how the .js controller works. The sample code snippets make it easy to follow along. Any better way to enable dark mode in Salesforce, found post https://arrify.com/salesforce-dark-mode/

    Kudos for sharing your Salesforce knowledge! 🙌📚✨

    ReplyDelete

HELP !! SHARE !! SUGGEST !!

Powered by Blogger.