Salesforce Lightning Modal Container

Below is the code for creating custom modal in salesforce lightning.

<!-- Below lines of code in the component.cmp file -->

<div aria-hidden="true" role="dialog" class="slds-modal slds-modal--prompt slds-fade-in-hide" aura:id="accountModalDialog">  
      
        <div class="slds-modal__container">   
         
            <div class="slds-modal__header slds-theme--info">
                <h2 class="slds-text-heading--medium">Approve Transaction</h2>                
            </div>

<div class="slds-modal__content slds-p-around--medium">
                              
                         
                 <div aura:id="nameLblId" class="slds-form-element__label slds-m-top--medium slds-text-body--regular ">
                     <label class="slds-align-middle" >FullName<abbr class="slds-required" title="required">*</abbr></label>
                 </div>
                 <ui:inputTextArea class="slds-m-top--medium" aura:id="name" Label="Name" rows="3" value="{!v.Name__c}" />
                              
                              
             </div>
             <div aura:id="btnpanelId" class="slds-modal__footer">
                <ui:button class="slds-button slds-button--brand" press="{!c.SaveName}" label="Submit" />
                <ui:button class="slds-button slds-button--neutral" press="{!c.CloseWindow}" label="Cancel" />
             </div>
</div>

</div>

<!-- below button will show the modal when clicked -->

<ui:button press="{!c.showModal}" label="Show Modal>


<!-- Add below lines of code in the controller.js file -->

ShowModal : function(component, event, helper) {

        helper.showPopupHelper(component, 'accountModalDialog', 'slds-fade-in-');
helper.showPopupHelper(component,'accountModalDialog','slds-backdrop--');
       
},
   
hideModal : function(component,event,helper){
       
        helper.hidePopupHelper(component, 'accountModalDialog', 'slds-fade-in-');
helper.hidePopupHelper(component, 'accountModalDialog', 'slds-backdrop--');
     
    }

<!-- Add below lines of code in the helper.js file, this method will hide and unhide the modal on the UI -->


    showPopupHelper : function(component, componentId, className){
        var modal = component.find(componentId);
        $A.util.removeClass(modal, className+'hide');
        $A.util.addClass(modal, className+'open');
    },  
    hidePopupHelper: function(component, componentId, className){
        var modal = component.find(componentId);
        $A.util.addClass(modal, className+'hide');
        $A.util.removeClass(modal, className+'open');
       

    }

Salesforce Lightning Use of aura:if

Use of <aura:if> is very critical in salesforce lightning when displaying UI components conditionally.

 Please note the markup in the <aura:if> will not be initiated until the condition is met.

for example:

<aura:component>

<aura:if isTrue="{!v.pass}">

<ui:inputText aura:id="comments" value="{!v.passComments}" />

<aura:set attribute="else">

<ui:inputText aura:id="comments" value="{!v.failComments}" />

</aura:set>

</aura:if>

</aura:component>


In the above markup please note both the inpuText markup in if and else sections has same aura:id for comments. it is possible to use same id for inputText markup in if and else condition only because the salesforce DOM structure will not recognize the aura:id until the condition is satisfied.

This will allow us to use the same aura:id reference in controller js file. By doing this we can eliminate some extra code.

Retrieve All Picklist Values for specifid fields through APEX

Below code will retrieve all picklist values for specified fields based on specific object



    public static Map<String,List<String>> getPickListValues(){
       
        Map<String,List<String>> mapOptions = new Map<String,List<String>>();      
       
        Schema.sObjectType sobject_type = Account.getSObjectType(); 
       
        Schema.DescribeSObjectResult sobject_describe = sobject_type.getDescribe();
       
        Map<String, Schema.SObjectField> field_map = sobject_describe.fields.getMap(); 
       
        list<String> fieldList = new list<String> 
 {'Field1__c','Field2__c','Field3__c','Field4__c','Field5__c'};
       
        for(String s:fieldList){
           
            List<Schema.PicklistEntry> pick_list_values = field_map.get(s).getDescribe().getPickListValues(); //grab the list of picklist values for the passed field on the sobject
            List<String> sOptions = new List<String>();
            for (Schema.PicklistEntry a : pick_list_values) { //for all values in the picklist list
               
                sOptions.add(a.getValue()); //add the value and label to our final list
               
            }
           
            mapOptions.put(s,sOptions);
       
        }    
       
        return mapOptions;

}

APEX Get Record Type Details for specific object based on record type name

Below code will fetch the record type details for specific object based on record type name using APEX code

Schema.DescribeSObjectResult R = Account.SObjectType.getDescribe();

Map<String,Schema.RecordTypeInfo> rtMapByName = R.getRecordTypeInfosByName();

Schema.RecordTypeInfo rtInfo = rtMapByName.get('MyAccounts');

System.debug(rtInfo.getRecordTypeId());

Convert Salesforce object returned from Apex controller in lighting component js file into Key,Value pair

          

             

Below code details How to Convert Salesforce object returned from Apex controller into lighting component js file into Key,Value pair

       var clVar = response.getReturnValue();

                         

             var out = Object.keys(clVar).map(function(data){

                 console.log('Value of Data : ' + data);

                 if(data == "ComfortLevel"){                    

                    

                     component.set("v.comfortLevel",response.getReturnValue().ComfortLevel);

                    

                 }else if(data == "CallInter"){

                    

                                component.set("v.callInter",clVar(data));                    

                 }

                

                

                 return [data,clVar[data]];

             });

            

            

             console.log('Complete Output' + out);

             

In the above code Data is the Key/Field value returned from apex controller.

clVar(data)  - Will return the value of the field

Salesforce Lightning Spinner

Below are the steps to use spinner with in a single component in Salesforce Lightning


1) Add below two lines of code in lightning component

    <aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
    <aura:attribute name="instanceChanged" type="boolean" />

2) Add below <aura:if /> markup in the lightning component

<aura:if isTrue="{!v.instanceChanged}"> 
<div class="slds-spinner_container ">
<div role="status" class="slds-spinner slds-spinner--medium 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> 

3) Add below event to your lightning component. It depends on type of event you want to call the method. in my example iam calling the lightning controller methods on change event. You can call the method in click event or any other event you want and add below line of code to it

<ui:inputSelect class="dynamic" aura:id="inputSelectDynamic" change="{!c.instanceDetails}" />


4) Add below line of code in the instanceDetails method to unhide the spinner

       //Unhide the spinner
      
       component.set("v.instanceChanged",true);

5) Add below line of code to hide the spinner
   
 hideSpinner : function (component, event, helper) {
        //Hide the spinner
        component.set("v.instanceChanged",false);
    }

Please note, from above the hideSpinner method will be invoked when event doneWaiting is fired from step1

How to use jQuery in Lightning

Below are the steps with simple example on how to use jquery in Lightning component.

1) Import the jquery library as static resource in salesforce

2) Include below markup in the lightning component.

<ltng:require scripts="/resource/jquery/" afterScriptsLoaded="{!c.doInit1}"/>

Please note: I have named the static jquery library has 'jquery' that is why in the above markup for scripts attribute i have given value as /resource/jquery/. Name must be given as per thee static resource name given in step1

3) Write the below simple jquery code in your component js file for testing the jquery call.

  doInit1 : function(component, event, helper) {

      console.log('*************** Inside do Init1 Method *****************')
        
      jQuery("document").ready(function(){
          
         console.log('Inside jquery'); 
          
          alert("Jquery");
          
      });
        
}

4) When you execute your component, you should verify the browser console and alert should be popped up if jquery is successfully invoked.

Import point to note :

1) Either jQuery can be used to refer jquery code or $ can also be used in component js file. for example look into code given below

 var opts1 = {
                    "class1": "optionClass1",
                    "class2": "optionClass1",
                    "class3": "optionClass1"
                  };
         
                
$.each(opts1,function(key,value){
              
             console.log('Key is' + key);
              
});

2) In the markup for lightning component which includes the js script. afterScriptLoaded is not mandatory.