How to align Lightning Button To Center, Right Or Left in LWC & Aura Components

How to align Lightning Button To Center, Right Or Left in LWC & Aura Components

salesforcepoint → Sunday, 20 September 2020

Lightning Button Alignment

In many cases we need button alignment to left, center or right. Event though we used correct slds classes, alignment will be not at expected position. In that cases we need to use "slds-clearfix" class for above div of the button, so that we can able to display lightning button at required place. 

Slds CSS class for center alignment:  slds-align_absolute-center

Slds CSS class for right alignment: slds-float_right

Slds CSS class for left alignment: slds-float_left

Button Alignment in LWC (Lightning Web Components)

ButtonAlignmentInLwc.html

<template>
    <div class="slds-clearfix">
        <lightning-button label="Left" class="slds-float_left"></lightning-button>
    </div>
    <div class="slds-clearfix">
        <lightning-button label="I am Center" class="slds-align_absolute-center"></lightning-button>
    </div>
    <div class="slds-clearfix">
        <lightning-button label="I am Right" class="slds-float_right"></lightning-button>
    </div>
</template>

Button Alignment In Lightning Aura Components:

ButtonAlignmentInAura.cmp

<aura:component >
    <div class="slds-clearfix">
        <lightning:button label="Left" class="slds-float_left"/>
    </div>
    <div class="slds-clearfix">
        <lightning:button label="I am Center" class="slds-align_absolute-center"/>
    </div>
    <div class="slds-clearfix">
        <lightning:button label="I am Right" class="slds-float_right"/>
    </div>
</aura:component>

Output

How To Get Record Id From aura:iteration In Lightning Component

How To Get Record Id From aura:iteration In Lightning Component

salesforcepoint → Sunday, 26 July 2020

Fetch Selected Record Id From Iteration Lightning Aura Component:

If we need to fetch record id or some element from aura:iteration we can use html property dataset. By using this html dataset attributes we can pass id from component to JavaScript function when some event occurs. The name of a custom data element starts with data-. By using html elements, we can get not only id but we can get any element that we set for data element (ex: data-id, data-name) in lightning component.

Example code for fetching record id in aura iteration:

In below example we are fetching all the student records, In aura iteration  for div element we added data-id ="{!student.Id}". on click on student we are passing selected student id to JavaScript function handleSelect by using event.target.dataset.id. If we need to pass other attribute then we can create new data attribute, for example if we need to pass name of selected student then we add new attribute data-name and in js function we can get that attribute by using event.target.dataset.name.

StudentController.cls

 public class StudentController {  
   @AuraEnabled  
   public static List<Student__c> getStudentList() {  
     List<Student__c> studentList = [SELECT Id, Name FROM Student__c];  
     return studentList;  
   }  
 }  

StudentList.cmp

 <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,  
               flexipage:availableForRecordHome,force:hasRecordId,  
               force:lightningQuickAction" controller="StudentController"  
         access="global" >  
   <aura:attribute name="studentList" type="List" />  
   <aura:handler name="init" action="{!c.fetchStudentList}" value="{!this}" />  
   <aura:iteration items="{!v.studentList}" var="student">  
     <div data-id ="{!student.Id}" class="slds-box slds-theme_shade" onclick="{!c.handleSelect}">  
       {!student.Name}  
     </div>  
   </aura:iteration>  
 </aura:component>  

StudentListController.js

 ({  
   fetchStudentList : function(component, event, helper) {  
     var action = component.get("c.getStudentList");  
     action.setCallback(this, function(response) {  
       var state = response.getState();  
       if(state === 'SUCCESS') {  
         var studentList = response.getReturnValue();  
         component.set("v.studentList",studentList);  
       }  
       else {  
         alert('Error in getting data');  
       }  
     });  
     $A.enqueueAction(action);  
   },  
   handleSelect: function(component, event, helper) {  
     var selectedId = event.target.dataset.id;  
     alert(selectedId)  
   }  
 })  

Output:

How to Show & Hide Lightning Spinner in Salesforce

How to Show & Hide Lightning Spinner in Salesforce

salesforcepoint → Wednesday, 18 April 2018

Spinner is component loading indicator that should be shown when retrieving data or performing slow computations or server operations. Spinner needs to be stop displaying after operations.


 we can get spinners in two ways.

1. with standard events like aura:waiting & aura:doneWaiting : We can use this when spinner needs to be shown when all server operations means calling apex classes and receiving response.

 2. With custom events: We use this type when we need to show spinner when event occurs only like 'I need to show Spinner when user clicks on Save button'. For this we need to to define on Boolean attribute to rendering spinner.

Show & Hide Lightning Spinner Example:

Spinner.cmp

<aura:component >
    <aura:attribute name="showSpinner" type="Boolean"/>
    <lightning:button variant="brand" label="cancel" onclick="{!c.cancel }" />
    <lightning:button variant="brand" label="Show Spinner" onclick="{!c.Show}" />
    <aura:if isTrue="{!v.showSpinner}">
        <div class="demo-only" >
            <div role="status" class="slds-spinner slds-spinner_large slds-spinner_brand">
                <span class="slds-assistive-text">Loading</span>
                <div class="slds-spinner__dot-a"></div>
                <div class="slds-spinner__dot-b"></div>
            </div>
        </div>
    </aura:if>
</aura:component>

SpinnerController.js

({
Show : function(component, event, helper) {
  component.set("v.showSpinner",true);
  },
cancel : function(component, event, helper) {
   component.set("v.showSpinner", false);
   }
}) 

OutPut:

Lightning Component Basics: Add Two Numbers

Lightning Component Basics: Add Two Numbers

salesforcepoint → Saturday, 16 December 2017

In this post we are going to learn what is Attributes in Lightning Component and how to use it in components.

Attributes: Lightning Component Attributes are like  member variables in apex class.

syntax: <aura:attribute name=" " type=" " default=" " />
 here name and type are required.

ex: <aura:attribute name="Salesforce" type="String"  />


Add2nums.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="Number1" type="Integer" default="20" />
        <aura:attribute name="Number2" type="Integer" default="30" />
        <aura:attribute name="Sum" type="Integer" />
          {!v.Number1}+{!v.Number2}={!v.Sum}
    <br/> <br />
    <ui:button label="Click Here" press="{!c.add}" />
</aura:component>

Add2numscontroller.js

({
add : function(component) {
        var add2=component.get("v.Number1")+component.get("v.Number2");
        component.set("v.Sum",add2);
}

})

Add2nums.app

<aura:application >
    <c:Add2nums/>
</aura:application>

output:

when we click button Java script function get called and will set the value to {!v.Sum}