Build your first Lightning Component

Build your first Lightning Component

What a great day of accomplishment for me it is. I won a lottery. Can you guess the worth? I won your next visit…Yipeeeeeeeeeeee!!!!!!!!

After too much of blabbering in my previous blog Start Salesforce Lightning Journey let’s jump into the action and build our very own first custom lightning componenent. Now, how cool is that???

coderoom first lightning component

The very first thing you have to do is login to your salesforce org and open developer console. Now to create a lightning component, Goto File->New->Lightning Component.

Your component should not feel lost so give it a name, say MyHelloworldComp

coderoom comp description

Your learning begins here! The popup window you get for naming your component has some initial configurations for your your component. Did you notice? Yes??  Oh see!! how sharp you are!! 

There is a list of five checkboxes. These are basically interfaces that you can implement in your component.

NoInterfaceResult
1 Lightning tab If checked,you are implementing force:apphostible intrface. If checked, this results into < aura:component implements="force:appHostable"> . The force:appHostable interface makes the component available for use as a custom tab. It doesn’t require you to add anything else to the component.
2 Lightning Page Results into < aura:component implements="flexipage:availableForAllPageTypes" access="global">. Implement this interface to make your component available for record pages and any other type of page.
3 Lightning Record Page results into < aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >. Implement this interface to make your component available for record pages only..If you want record pages and any other type of page, use the flexipage:availableForAllPageTypes interface.
4 Lightning Communities page If you select this interface, you component configuration will look like < aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >. Implement this interface, to make your component appear in Community Builder.
5 Lightning Quick Action Checking this checkbox is equivalent to adding force:lightningQuickAction in your component configuration. This interface is implemented in a component to allow it to be used as a custom action in Lightning Experience or the Salesforce mobile app.

You can add access=”global” in your component to make it usable outside its native org.  For example, if you want a component to be usable in an installed package or by a Lightning App Builder user or a Community Builder user in another org,  use access=”global”.

Now since your component is ready to be coded, let’s fill some and see the magic of aura!

To start, I will show you some client side action using javascript that is well handled by the lightning bundles, and to add further in your learning, navigate to out other blogs. 

If you are a blogger or want to begin your blogging journey, you are most welcome. Just signup and start blogging today!

In first component, try your luck and learn with fun.


MyHelloworldComp

<aura:component implements=”force:appHostable, flexipage:availableForAllPageTypes,flexipage:availableForRecordHome, force:hasRecordId,forceCommunity:availableForAllPageTypes ,force:lightningQuickAction” access=”global” >
<aura:attribute type=”String” name=”userName” default=”” />
<aura:attribute type=”String” name=”luckfactor” default=”” />
<lightning:input aura:id=”usName” class=”myCSS” name=”userName” label=”Enter your name…” />
<lightning:button variant=”neutral” label=”Check” title=”Base action” onclick=”{! c.CheckLuck }”/>

<div class=”slds-box”>

Hello {!v.userName} !!! <br/>
Your luck factor says:- {!v.luckfactor}
</div>
</aura:component>

Put your name in the box and click the button to read your luck.

The idea behind is an array is declared in controller, and on button click a number from 0-9 is generated and that random number is used to pick a vlaue from array. Pure luck!! Isn’t it??

Tags like <Lightning:button …./> or <lightning:input …. /> are resolved to html tags <input …./> and <button …../>. Like you define id of an element in html, aura:id is provided to get the elements context in controller(js).

anyEvent=”{!c.methodName}” is the syntax to call a controller method on occurrence of an event, like here on button click, the method CheckLuck is called(onclick=”{!c.CheckLuck”}. Like all other methods have a logic, youe controller method will have some logic too. Sometimes setting a variable value, sometimes calling an apex method(server side calling). All these will be covered in upcoming blogs.

{!v.attributename} is used to show value of an attribute. If the attribute has no value nothing will be visible, but as soon as the attribute value is changed, it is reflected in the UI.

 

Did you notice variant keyword used in button? If you want to know more about variants, click here

*******************controller*********************

Copy below code and paste in your MyHelloworldCompController.js

({

CheckLuck : function(component, event, helper) {

       helper.CheckLuck(component, event);      

}

})

*************helper***************

Copy below code and paste in your MyHelloworldCompHelper.js

({

CheckLuck : function(component, event) {

         var luckBox = [“You’re going to earn well in near future!”,

                      “Your health is gonna improve.”,

                      “You can get onsite opportunities.”,

                      “You’re going to meet that special one next week!!!!”,

                      “You’re awesome!! You are going to be a potential coderoom user!!”,

                      “your favourite team is going to win this season.”,

                      “You’re going to make your parent proud!!”,

                      “You’re the next superstar, just keep your eyes and mind open!”,

                      “Your best friend is going to give you a present!”,

                      “You’re going to a trip on your favourite hillstation! Pack your bags!!”];

        component.set(“v.userName”,component.find(“usName”).get(“v.value”));

        component.set(“v.luckfactor”,luckBox[Math.floor(Math.random() * 10)]);

        event.getSource().set(“v.label”,”Recheck”);

}

})


In order to add some css paste below code in  MyHelloworldComp.css

.THIS.myCSS{

    width:40%;

}

On button click, the method CheckLuck is called, which sets the value of attributes userName and luckfactor. The magic is no sooner do you click the button , the values of the attributes are changed and same is reflected on your page. 

Math.Random() function generates a random number and is mutiplied by 10 and enclosed in floor function to make sure the number doesn’t exceed 9. event.getSource() method is used to return the reference of the source  which intitiated the event, like here the button’s reference is returned.

component.find(“tagid”) is equivalent document.getElementById and is basic Dom method to get value from or change value using mere id.

The next step you need to to is create a lightning app and add your component into it.

Its a good practice to write all your client side logic in helper bundle rather than writing it all in controller. Create a method in yout helper and call it from controller using helper.methodname().

You app code will looke like this:-

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

<c:MyHelloworldComp />

</aura:application>

Just click on the preview button in right bundle of the screen and see the out put.

If you have any suggestions or doubt, please add a comment. I will try to work on your queries.

Output goes below:-  

(Visited 393 times, 1 visits today)

2 Replies to “Build your first Lightning Component

Leave a Reply