December 18, 2019

Popup using Salesforce Lightning Component

The below code will open Contacts tab when the popup is closed.

Sample Code:

Lightning Component:


  1. <aura:component implements="flexipage:availableForRecordHome,force:hasRecordId" access="global" >  
  2.          
  3.     <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">  
  4.           
  5.         <div class="slds-modal__container">  
  6.               
  7.             <!-- Modal/Popup Box Header-->  
  8.             <header class="slds-modal__header">  
  9.                 <lightning:buttonIcon iconName="utility:close"  
  10.                                       onclick="{! c.closeModel }"  
  11.                                       alternativeText="close"  
  12.                                       variant="bare-inverse"  
  13.                                       class="slds-modal__close"/>  
  14.                 <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Header</h2>  
  15.             </header>  
  16.             <!--Modal/Popup Box Body-->  
  17.             <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">  
  18.                 Sample Body  
  19.             </div>  
  20.             <!--Modal/Popup Box Footer-->  
  21.             <footer class="slds-modal__footer">Footer</footer>  
  22.               
  23.         </div>  
  24.           
  25.     </section>  
  26.       
  27. </aura:component>  

Lightning Component Controller:


  1. ({  
  2.     closeModel : function(component, event, helper) {  
  3.           
  4.         var homeEvent = $A.get("e.force:navigateToObjectHome");  
  5.         homeEvent.setParams({  
  6.             "scope""Contact"  
  7.         });  
  8.         homeEvent.fire();  
  9.           
  10.     }  
  11. })  

Output:


No comments:

Post a Comment