In the previous post, we discussed about the Introduction of Lightning Components and now, we will create a Simple Lightning Component.

Prerequisite:

Before we create a Lightning Component, we need to make sure that My Domain is enabled in our Salesforce Org as it is Required to Use Lightning Components in Lightning component tabs, Lightning pages, the Lightning App Builder, or standalone apps. We will not cover this topic here and you can refer the link https://help.salesforce.com/articleView?id=domain_name_overview.htm&type=5 for more information.

Create a new Lightning Component:

Since we have already enabled MyDomain in our Salesforce Org, let us create a simple Lightning component to show all the Partner Accounts(Type=’Technology Partner’) in the drop down and we will also have a button called “Submit”, upon clicking on it, it will show the selected account. This Lightning Component will be added as a tab in Lightning Experience.

Output:

Tab accessed from All Items

Accounts sorted in asc order based on the account name:

Upon clicking on Submit button:

Steps to create a Lightning Component:

Step 1:

We will have to open Developer console and create a new Lightning Component Bundle

Step 2:

File -> New->Lightning Component

No spaces are allowed in the Name hence I have given ‘PartnerAccountsDisplay’ and given a meaningful description. I have not selected anything in the Component Configuration for now. Then, click on Submit button.

This creates a new ‘PartnerAccountsDisplay’ component bundle, with two open tabs. Close the first tab, and keep the PartnerAccountsDisplay.cmp tab open. We need to write our code in component editor between aura:component tags.

As we mentioned earlier, Lightning Component will have JavaScript(called as Client Side Controller) on the client side to handle validations, events, calling the apex class method and handle the response as well etc and on the server side, it is apex which will query all the Partner accounts in this case and send the output as a list to the Client Side Controller which will then be used to display them as options in the Combo-box(drop down).

Apex class:

global with sharing class ManageAccount {

    @AuraEnabled(cacheable=true)
    public static List<Account> GetAccount( String userId ) {
        String query;
        List<Account> accountList;
        query='SELECT Id,Name from Account WHERE Type=\'Technology Partner\' ORDER BY Name asc';
        accountList = new List<Account>();
        accountList = (List<Account>)Database.query(query);
        return(accountList);
    }
    
}

To make this method GetAccount available to our Lightning Component code (Client-Side Controller), there are two specific things done as given below:

• The @AuraEnabled annotation before the method declaration.
• The static keyword. All @AuraEnabled controller methods must be static methods, and either public or global scope.

PartnerAccountsDisplay.cmp

<aura:component access="global" implements="force:appHostable" controller="ManageAccount">
	<aura:attribute name="AccountSelectValue" type="String" default="" />
    <aura:attribute name="SelectOptions" type="List" />
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
                
                    <lightning:combobox aura:id="select" name="selectcombo" label="Technology Partner Accounts" 
                     required="true" value="{!v.AccountSelectValue}" options="{! v.SelectOptions }" style="background-color: #fceabd;"/>
    <lightning:button variant="brand" label="Submit" title="Base action" onclick="{! c.handleClick }"/>
                    
</aura:component>

What we have done in the Component code

1. We have given global access for the component and implemented the interface “force:appHostable” as it is needed to allow the Component to be exposed as a custom tab in Lightning Experience. Also, we wire up the component to the server-side Apex controller(ManageAccount apex class).
2. The <aura:handler> tag is used to handle any specific event and we are handling init event with the doInit action handler in our client side controller.
3. We have created 2 attributes in the component, one of them(AccountSelectValue) is to store the selected value from the drop down and the other one(SelectOptions) is a list which stores all the drop down options retrieved by the apex class method GetAccount. Attributes on components are like instance variables in objects. We can set the Component attributes when we create it or during the Component lifecycle, in response to actions the user takes, or events that happen elsewhere and so on.
4. Then, we have used lightning:combobox Base Lightning Component to create a dropdown with the values as names of the Technology Partner Accounts.
5. We created a button by using lightning:button Base Lightning Component and clicking on it(onclick event), will call handleClick method in our client side controller.

P.S:if c. is used in the component, Salesforce will understand that it refers to the corresponding Client side Controller(js) and using c. in the Client Side controller will refer to the Server Side Controller(apex class). Also, note the usage of v. whereas v is something called a value provider. Basically, think of v as an automatic variable that’s made available for us to use to access Component’s attributes.

PartnerAccountsDisplayController.js(Client Side Controller)

({
	doInit : function(component, event, helper) {
		var action = component.get("c.GetAccount");
        //action.setParams({ userId : $A.get("$SObjectType.CurrentUser.Id") });
        action.setCallback(this, function(response){
            var state = response.getState();
            console.log('>>>>> state'+ state );
            if (state === "SUCCESS") {
            	console.log('======');
            	console.log(response.getReturnValue());
                var options = [];
                var allData = response.getReturnValue();
                console.log('resp',allData);
			    for(var x in allData){
			    	options.push({ value: allData[x].Name, label: allData[x].Name});
			    }
			    console.log('options : ',options);
			    component.set("v.SelectOptions", options);
	}
})
        $A.enqueueAction(action);
    },
    
    
    handleClick: function (cmp, event) {
        // This will contain the string of the "value" attribute of the selected option
        var selectedOptionValue = cmp.get("v.AccountSelectValue");
        alert("Selected Partner Account is: '" + selectedOptionValue + "'");
    }


});

What we have done in the Client Side Controller code:

1. doInit – This action handler calls apex class method to load options for “Technology Partner Accounts” combobox. Calling the apex class method involves 3 steps:
2. Create a remote method call – var action = component.get(“c.GetAccount”); -> This line of code creates a remote method call or remote action.
3. Set up what should happen when the remote method call returns.-This is achieved in the next line of code, action.setCallback(…), is a block of code that will run when the remote method call returns.
4. Queue up the remote method call. – $A.enqueueAction(action); adds the server call to the Aura component framework request queue. It, along with other pending server requests, will be sent to the server in the next request cycle.
5. handleClick – This action handler is called when user click on Submit button. Here, we get the value of the attribute ‘AccountSelectValue’ which stores the selected value from the Technology Partner Account drop down and using alert, we show the value in the pop up.

Lightning Tab:

Finally, we created a Lightning tab as per the screenshot below to launch the Component.

We can talk about Lightning Design System and the Component Bundle such as Helper, Style, Documentation, Renderer, Design and SVG in the upcoming blog post.

I have given a very simple example of the Lightning Component as above and I have experience in building Simple, medium and complex Lightning Components including Lightning Communities for various clients. I am happy to help you to develop new Lightning Components and modify the existing Components based on the requirement. Please reach me at balabemdu@gmail.com for more information. Also, you can give your comments below reg any questions on this blog post.