Learn ECMAScript 2016 Before Creating Lightning Web Components

Lightning Web Components is very simple for Node JS and React Developers. However, it become complex for Salesforce developer who know only basic of JavaScript. Lightning Web Component creating by extending LightningElement class of lwc module. I will suggest you to learn ECMAScript 2015. By reading this blog and i sure after reading this blog you will became a LWC developer. To learn new technology learn fundamental of technology.

Here I will explain about ES5 and ES6 basic usage in Lightning Web Components

  1. named import
  2. default import
  3. default export
  4. named export
  5. Web Component
  6. module?
  7. class
  8. promise

 

Very BadBadAverageGoodExcellence (No Ratings Yet)
Loading...

How to Get Custom Label Value in Lightning Component?

Custom Label in Salesforce is text that will be covert to any language that Salesforce support. To access Custom Label in Lightning Component use following syntax.

<ui:outputText value=”{!$Label.c.LabelName}”/> where is namespace. Default namespace of an org is c. If you have created a namespace myapps, then your code to access custom label is {!$Label.myapps.LabelName}

If you have created a Custom Label which name is description, then your code in lightning component is {!$Label.c.description}.

In JavaScript controller or helper you can get custom label value $A.get(“{!$Label.c.description}”)

var desc = $A.get(“{!$Label.c.description}”);

Very BadBadAverageGoodExcellence (2 votes, average: 5.00 out of 5)
Loading...

Lightning:helpText Comonent in Lighting Out

There is some issue of CSS classes in lightning out if you are using <lightning:helpText> in lightning out. Here we are providing some CSS classes to use in your Cisualforce page.

Let’s create a lightning component which use <lightning:helpText> component named helpTextInLightningOut.cmp.

<aura:component>
<lightning:helptext
content=”The tooltip displays on the lower left of the icon or above the icon if space is available. It automatically adjusts its position according to the viewport.”
/>
</aura:component>

Create a Visualforce page to use above created lightning component. In your Visualforce page use <style> tag and  paste following CSS style.

.slds-popover__body,
.slds-popover__footer,
.slds-popover__header {
	position: relative;
	padding: .5rem .75rem;
	word-wrap: break-word
}

.slds-popover {
	position: relative;
	border-radius: .25rem;
	width: 20rem;
	min-height: 2rem;
	z-index: 6000;
	background-color: #fff;
	display: inline-block;
	box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .16);
	border: 1px solid #d9dbdd
}

.slds-popover--tooltip,
.slds-popover_tooltip {
	width: auto;
	max-width: 20rem;
	background: #16325c;
	border: 0
}
.slds-popover--tooltip .slds-popover__body,
.slds-popover_tooltip .slds-popover__body {
	font-size: .75rem;
	color: #fff
}

.slds-fall-into-ground {
	visibility: hidden;
	opacity: 0;
	transform: translate(0, 0);
	transition: opacity .1s linear, visibility .1s linear, transform .1s linear;
	will-change: transform
}

.slds-nubbin--bottom-left:before,
.slds-nubbin_bottom-left-corner:before,
.slds-nubbin_bottom-left:before {
	width: 1rem;
	height: 1rem;
	position: absolute;
	transform: rotate(45deg);
	content: '';
	background-color: inherit;
	bottom: -.5rem;
	margin-left: -.5rem
}

.slds-nubbin--bottom-left:after,
.slds-nubbin--bottom-left:before,
.slds-nubbin_bottom-left-corner:after,
.slds-nubbin_bottom-left-corner:before,
.slds-nubbin_bottom-left:after,
.slds-nubbin_bottom-left:before {
	left: 1.5rem;
	top: 100%;
	margin-top: -.5rem
}

.slds-nubbin--bottom-left:after,
.slds-nubbin_bottom-left-corner:after,
.slds-nubbin_bottom-left:after {
	box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .16);
	z-index: -1
}

.slds-popover :last-child {
	margin-bottom: 0
}

If you used above style in your Visualforce page, then Lightning:helpText component also work properly in lightning out same as it work in lightning community or in Salesforce lightning interface

Output:

Learn more about lightning:helpText click here.

 

Very BadBadAverageGoodExcellence (1 votes, average: 5.00 out of 5)
Loading...

How To Create Lightning Component?

Before start learning about Lightning Component you have to know about Apex Class, Javascript & HML also OOPs Concept.  After reading this article you will be able to create, extends and implements Lightning Components. Here you also learn about lightning method  in lightning component.
Note: You must registered a domain under My Domain. To register your domain Click Here

Let’s create a component named HelloWorld.

Step 1: Go-to Developer Console–> Files–> New–>Lightning Component

Create New Lightning Component

Enter Component Name HelloWorld and click on Submit Button. Lightning component root tag is <aura:component ></aura:component>.

Step 2 Let’s create attribute

<aura:component>

<aura:attribute name=”fullname” type=”String” default=”Your Name” description=”User full name”/>

<aura:attribute name=”email” type=”String” default=”” description=”User email address”/>

</aura:component>

We have created two attribute fullname and email while defined attribute name follow variable naming rule.

Do not use space in attribute name like name=”full name” this is Wrong, it should be like above attribute name.

Step 3 How to get attribute value in component?

This is very simple {!v.attributename}, if you want to get fullname and email attributes value then you should write {!v.fullname} and {!v.email}.

Step 4 Let’s create a lightning button and bind with component controller

<aura:component>

<aura:attribute name=”fullname” type=”String” default=”Your Name” description=”User full name”/>

<aura:attribute name=”email” type=”String” default=”” description=”User email address”/>

<lightning:button onclick=”{!c.alertName}” label=”Alert Name”/>

</aura:component>

To bind controller action with lightning button we use {!c.actionName}

Lightning Component Controller

HelloWorldController.js

({
      //Action alertName 
      alertName : function(component, event, helper) {
	  alert(component.get("v.fullName"));
          //Using component getting attribute value here same as in component.
      },
      // you can write another action here
      //parameter name can be change
      action2: function(com,ev,help){
          //getting attibute value here
          com.get("v.attributename");
      }
})

<h2> Test your created component</h2>

Now Create a lightning App in same way as you follow previous steps. Go to developer console -> file -> new -> Lightning Application. Enter DemoApp in App name and click submit button.

<aura:application exends=”force:slds”>
<c:HelloWorld/>
</aura:application>

Note: Use Ctr+S to save component or any file in developer console. click on preview button to see result of your create component. Here we used exends=”force:slds” in app that means by default salesforce lightning design system apply in your app.

 

 

Very BadBadAverageGoodExcellence (No Ratings Yet)
Loading...

How to create multi-picklist in salesforce lightning component

Multi picklist in salesforce lightning component.
There are only four steps to create mullti picklist in salesforce ligthning component.

multi picklist in salesforce lightning component

Step – 1

let’s create a lightning component named “demoMultipicklistCmp.cmp

<aura:component>
<aura:attribute name=”options” type=”list” default=”[]”/>
<aura:attribute name=”selectedOptions” type=”String” default=””/>
<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”/>
<div class=”slds-form-element”>
<label class=”slds-form-element__label” for=”combobox-unique-id-3″>Search</label>
<div class=”slds-form-element__control”>
<div class=”slds-combobox_container slds-size_small”><!–slds-is-open–>
<div aura:id=”dropdown” onmouseenter=”{!c.openDropdown}” onmouseleave=”{!c.closeDropDown}”    class=”slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-close” aria-expanded=”true” aria-haspopup=”listbox” role=”combobox”>
<div class=”slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right” role=”none”>
<input type=”text” class=”slds-input slds-combobox__input slds-combobox__input-value”
placeholder=”Select an Option” readonly=”true” onfocus=”{!c.openDropdown}” value=”{!v.selectedOptions}”/>
<span class=”slds-icon_container slds-icon-utility-down slds-input__icon slds-input__icon_right” title=”Down icon”>
<lightning:icon iconName=”utility:down” size=”xx-small” class=”slds-icon-text-default”/>
<span class=”slds-assistive-text”>Down icon</span>
</span>
</div>
<div id=”listbox-unique-id” role=”listbox”>
<ul class=”slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid” role=”presentation”>
<aura:iteration items=”{!v.options}” var=”item” indexVar=”ind”>
<li onclick=”{!c.selectOption}” id=”{!item.label+’#BP#’+item.isChecked}” role=”presentation” class=”slds-listbox__item”><!–slds-is-selected–>
<div id=”{!’listbox-option-unique-id-‘+(ind+1)}”
class=”{!item.isChecked==true?’slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center slds-is-selected’:’slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-media_center ‘}” role=”option”>
<span class=”slds-media__figure”>
<lightning:icon iconName=”utility:check” size=”xx-small” class=”slds-listbox__icon-selected”/>
</span>
<span class=”slds-media__body”>
<span class=”slds-truncate” title=”{!item.label}”> {!item.label}</span>
</span>
</div>
</li>
</aura:iteration>
</ul>
</div>
</div>
</div>
</div>
</div>
</aura:component>

Step-2
Javascript Controller Named “demoMultipicklistCmpController.cmp
Use following code to handle open, close and handle dropdown option selection.

({
    doInit:function(component,event,helper){
        var opt =[];
        for(var i=1;i<=5;i++){
            if(i==1){
             	opt.push({label:'Items '+i,isChecked:true});
            }
            else{
             	opt.push({label:'Items '+i,isChecked:false});   
            }
        }
        component.set("v.options",opt);
        helper.selectOptionHelper(component,'Item 1','true');       
    },
    openDropdown:function(component,event,helper){
        $A.util.addClass(component.find('dropdown'),'slds-is-open');
        $A.util.removeClass(component.find('dropdown'),'slds-is-close');
    },
    closeDropDown:function(component,event,helper){
        $A.util.addClass(component.find('dropdown'),'slds-is-close');
        $A.util.removeClass(component.find('dropdown'),'slds-is-open');
    },
    selectOption:function(component,event,helper){        
        var label = event.currentTarget.id.split("#BP#")[0];
        var isCheck = event.currentTarget.id.split("#BP#")[1];
        helper.selectOptionHelper(component,label,isCheck);
    }
})

Step-3
Require a helper named “demoMultipicklistCmpHelper.cmp” to handle dropdown selection

({
    selectOptionHelper : function(component,label,isCheck) {
        var selectedOption='';
		var allOptions = component.get('v.options');
        var count=0;
        for(var i=0;i<allOptions.length;i++){ if(allOptions[i].label==label) { if(isCheck=='true'){ allOptions[i].isChecked = false; }else{ allOptions[i].isChecked = true; } } if(allOptions[i].isChecked){ selectedOption=allOptions[i].label; count++; } } if(count>1){
            selectedOption = count+' items selected';
        }
        component.set("v.selectedOptions",selectedOption);
        component.set('v.options',allOptions);
    }
})

Step-4
Your component is created now you are able to use component in lightning app to test your component. Let’s create a lightning app named “demoMultipicklistApp.app“. app code will be

<aura:application extends=”force:slds”>
<c:demoMultipicklistCmp/>
</aura:application>

In app we are using Salesforce Lightning Design System by extending force:slds

HOw to set options of multi picklist in salesforce lightning component using apex controller

You can set options attribute from apex controller. Create a apex class “Demo_Controller”

public class Demo_Controller{
    @AuraEnabled
    public static List getOptions()
    {
        List optList = new List();
		
	optList.add(new PickListOptions('Option 1',false));
	optList.add(new PickListOptions('Option 2',true));
	optList.add(new PickListOptions('Option 3',false));
	return optList;
    }

	// wrapper class 
	public class PickListOptions
	{
		@AuraEnabled public String label;
		@AuraEnabled public boolean isChecked;
		public PickListOptions(String label,boolean isChecked){
			this.label = label;
			this.isChecked = isChecked;
		}
	}
}

Here using @AuraEnabled annotation that means method become available in lightning. Now update your helper and create a new helper method

getOpetionsHelper: function(component)
{
      	var action = component.get("c.getOptions");
	// set if using parameter in your apex controller action 
	//action.setParams({ paramName : 'paramvalue' });

	// Create a callback that is executed after        
	action.setCallback(this, function(response) {
		var state  = response.getState(); // return SUCCESS,INCOMPLETE or ERROR string
		var result = response.getReturnValue(); // list return by @AuraEnabled getOptions action 
		
		for(var i=0;i<=result.length;i++){            
			opt.push({label:result[i].label,isChecked:result[i].isChecked});
        }
        component.set("v.options",opt);
	});
	
	// $A.enqueueAction adds the server-side action to the queue.
	$A.enqueueAction(action);

} 

Note: your helper and JS controller method name must not equal to @AuraEnabled apex controller action name.

Very BadBadAverageGoodExcellence (No Ratings Yet)
Loading...