Tag Archives: Lightning Component

Combobox in Lightning Component

Sample Lightning Component:

<!--Sample.app-->
<aura:component>
    <aura:attribute name="statusOptions" type="List" default="[]"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="slds-m-around_xx-large">
        <!--Combobox Component-->
        <lightning:combobox aura:id="selectItem" name="status" label="Case Status"
                            placeholder="Case Status"
                            value="new"
                            onchange="{!c.handleOptionSelected}"
                            options="{!v.statusOptions}"/>
    </div>
</aura:component>

Sample Lightning Component JS Controller:

({
    doInit: function (component, event, helper) {
        var options = [
            { value: "new", label: "New" },
            { value: "Working", label: "Working" },
            { value: "Escalated", label: "Escalated" },
            { value: "Closed", label: "Closed" }
        ];
        component.set("v.statusOptions", options);
    },
    handleOptionSelected: function (cmp, event) {
        //Get the string of the "value" attribute on the selected option
        var selectedValue = event.getParam("value");
        alert("Selected Option: '" + selectedValue + "'");
    }
})

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:Sample />
</aura:application>

Output:

Tooltip or Helptext in Lightning Component

A lightning:helptext component displays an icon with a popover containing a small amount of text describing an element on screen. The popover is displayed when you hover or focus on the icon that’s attached to it. This component is similar to a tooltip and is useful to display field-level help text. HTML markup is not supported in the tooltip content.

Sample Lightning Component:

<!--Sample.app-->
<aura:component >
    <div class="slds-m-around_xx-large">
        <div class="slds-form-element">
            <lightning:input aura:id="email" placeholder="Please enter your email" required="true" type="email" label="Email" name="email" />
            <!--Helptext and tooltip component-->
            <lightning:helptext iconName="utility:info" content="Your email address will be your login name" />
        </div>
    </div>
</aura:component>

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:Sample />
</aura:application>

Output:

Find Out Which Button was Clicked in Lightning Component

To find out which button was clicked in a component containing multiple buttons, we can use Component.getLocalId().

Here is an example with multiple lightning:button components. Each button has a unique local ID, set by an aura:id attribute.

Sample Lightning Component:

<!--Sample.cmp-->
<aura:component>
    <aura:attribute name="clickedButton" type="String" />
    <div class="slds-m-around_xx-large">
        <p><b>You Clicked: {!v.clickedButton}</b></p>
        <br/>
        <lightning:button aura:id="button1" name="btn1" label="Click Me" onclick="{!c.buttonClick}"/>
        <lightning:button aura:id="button2" name="btn2" label="Click Me" onclick="{!c.buttonClick}"/>
    </div>
</aura:component>

In the JS controller, we can use one of the following methods to find out which button was clicked.
event.getSource().getLocalId() returns the aura:id of the clicked button.
event.getSource().get("v.name") returns the name of the clicked button.

Sample Lightning Component JS Controller:

({
    buttonClick : function(cmp, event, helper) {
        var clickedBtn = event.getSource().getLocalId();
        alert(clickedBtn);
        cmp.set("v.clickedButton", clickedBtn);
    }
})

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:Sample />
</aura:application>

Output:

Progress Indicator in Lightning Component

Progress Indicator Component:

<!--ProgressIndicator.cmp-->
<aura:component >
    <aura:attribute name="selectedStep" type="string" default="step1"/>
    <div class="slds-m-around_xx-large">
        
        <lightning:progressIndicator currentStep="{!v.selectedStep}" type="base">
            <lightning:progressStep label="Step One" value="step1" onclick="{!c.selectStep1}"/>
            <lightning:progressStep label="Step Two" value="step2" onclick="{!c.selectStep2}"/>
            <lightning:progressStep label="Step Three" value="step3" onclick="{!c.selectStep3}"/>
            <lightning:progressStep label="Step Four" value="step4" onclick="{!c.selectStep4}"/>
        </lightning:progressIndicator>
        
        <div class="slds-p-around--medium">
            <div class="{!v.selectedStep == 'step1' ? 'slds-show' : 'slds-hide'}">
                <p><b>Step 1</b></p>
            </div>
            <div class="{!v.selectedStep == 'step2' ? 'slds-show' : 'slds-hide'}">
                <p><b>Step 2</b></p>
            </div>
            <div class="{!v.selectedStep == 'step3' ? 'slds-show' : 'slds-hide'}">
                <p><b>Step 3</b></p>
            </div>
            <div class="{!v.selectedStep == 'step4' ? 'slds-show' : 'slds-hide'}">
                <p><b>Step 4</b></p>
            </div>
        </div>
        
        <div>
            <button disabled="{!v.selectedStep != 'step1' ? '' : 'disabled'}" class="slds-button slds-button--neutral" onclick="{!c.handlePrev}">Back</button>  
            <aura:if isTrue="{!v.selectedStep != 'step4'}">
                <button class="slds-button slds-button--brand" onclick="{!c.handleNext}">Next</button>
            </aura:if>
            <aura:if isTrue="{!v.selectedStep == 'step4'}">   
                <button class="slds-button slds-button--brand" onclick="{!c.handleFinish}">Finish</button>  
            </aura:if>
        </div>
    </div>
</aura:component>

Progress Indicator Component JS Controller:

({
    handleNext : function(component,event,helper){
        var getselectedStep = component.get("v.selectedStep");
        if(getselectedStep == "step1"){
            component.set("v.selectedStep", "step2");
        }
        else if(getselectedStep == "step2"){
            component.set("v.selectedStep", "step3");
        }
         else if(getselectedStep == "step3"){
            component.set("v.selectedStep", "step4");
        }
    },
    
    handlePrev : function(component,event,helper){
        var getselectedStep = component.get("v.selectedStep");
        if(getselectedStep == "step2"){
            component.set("v.selectedStep", "step1");
        }
        else if(getselectedStep == "step3"){
            component.set("v.selectedStep", "step2");
        }
        else if(getselectedStep == "step4"){
            component.set("v.selectedStep", "step3");
        }
    },
    
    handleFinish : function(component,event,helper){
        alert('Finished...');
        component.set("v.selectedStep", "step1");
    },
    
    selectStep1 : function(component,event,helper){
        component.set("v.selectedStep", "step1");
    },
    selectStep2 : function(component,event,helper){
        component.set("v.selectedStep", "step2");
    },
    selectStep3 : function(component,event,helper){
        component.set("v.selectedStep", "step3");
    },
    selectStep4 : function(component,event,helper){
        component.set("v.selectedStep", "step4");
    },
})

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:ProgressIndicator />
</aura:application>

Output:

Note: To create “base” style progress indicator you have need to add type="base" attribute in your lightning:progressIndicator tag in lightning component.

Modal Box in Lightning Component

Modal Popup Component:

<!--ModalPopup.app-->
<aura:component>
    <aura:attribute name="openModal" type="boolean" default="false"/>
    <div class="slds-m-around--xx-large">
        <button class="slds-button slds-button--brand" onclick="{!c.handleOpenModal}">Open Modal</button>  
        <aura:if isTrue="{!v.openModal}">
            <!--Modal Box Start--> 
            <div role="dialog" class="slds-modal slds-fade-in-open ">
                <div class="slds-modal__container">
                    <div class="slds-modal__header">
                        <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.handleCloseModal}">
                            X
                            <span class="slds-assistive-text">Close</span>
                        </button>
                        <h1 class="slds-text-heading--medium">Biswajeet Samal</h1>
                    </div>
                    
                    <!--Modal Box Header--> 
                    <div class="slds-modal__content slds-p-around--medium">
                        <center> <p><b>
                            Welcome to Biswajeet Samal's Blog
                            </b>
                            </p></center>
                    </div>
                    <!--Modal Box Button--> 
                    <div class="slds-modal__footer">
                        <button class="slds-button slds-button--brand" onclick="{!c.handleCloseModal}">Cancel</button>
                    </div>
                </div>
            </div>
            <div class="slds-backdrop slds-backdrop--open"></div>            
        </aura:if>
    </div>
</aura:component>

Modal Popup Component JS Controller:

({
    handleOpenModal: function(component, event, helper) {
        //For Display Modal, Set the "openModal" attribute to "true"
        component.set("v.openModal", true);
    },
    
    handleCloseModal: function(component, event, helper) {
        //For Close Modal, Set the "openModal" attribute to "fasle"  
        component.set("v.openModal", false);
    }
})

Lightning Test App:

<!--Test.app-->
<aura:application extends="force:slds">
    <c:ModalPopup />
</aura:application>

Output: