February 12, 2020

How to show a popup when a Salesforce community user logs in?

1. Create a Custom Field in Contact object.



2.  Create the below Apex Class.

  1. public with sharing class CommunityDetailsCheckController {  
  2.       
  3.     @AuraEnabled( cacheable = true )    
  4.     public static String fetchContactInfo() {    
  5.           
  6.         User objUser = [ SELECT ContactId FROM User WHERE Id =: UserInfo.getUserId() ];  
  7.         if ( string.isNotBlank( objUser.ContactId ) )  
  8.             return objUser.contactId;    
  9.         else   
  10.             return null;  
  11.             
  12.     }   
  13.       

3. Create the below Lightning Web Component.

HTML:

  1. <template>  
  2.   
  3.     <template if:true = {objContact}>  
  4.   
  5.         <div class="demo-only" style="height: 640px;">  
  6.   
  7.             <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">  
  8.   
  9.                 <div class="slds-modal__container">  
  10.   
  11.                     <header class="slds-modal__header">  
  12.   
  13.                         <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>  
  14.                             <lightning-icon icon-name="utility:close" size="medium">  
  15.                             </lightning-icon>  
  16.                             <span class="slds-assistive-text">Close</span>  
  17.                         </button>  
  18.                         <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Please confirm your details</h2>  
  19.   
  20.                     </header>  
  21.   
  22.                     <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">                              
  23.   
  24.                             <lightning-record-edit-form record-id={objContact}    
  25.                                                         object-api-name="Contact"    
  26.                                                         onsuccess={handleSuccess}>    
  27.                                 <lightning-messages>    
  28.                                 </lightning-messages>    
  29.                                 <div class="slds-grid slds-wrap">    
  30.                                     <div class="slds-col slds-size_1-of-2">                                
  31.                                         <lightning-input-field field-name="FirstName">    
  32.                                         </lightning-input-field>    
  33.                                     </div>    
  34.                                     <div class="slds-col slds-size_1-of-2">    
  35.                                         <lightning-input-field field-name="LastName">    
  36.                                         </lightning-input-field>    
  37.                                     </div>    
  38.                                     <div class="slds-col slds-size_1-of-2">                                
  39.                                         <lightning-input-field field-name="Phone">    
  40.                                         </lightning-input-field>    
  41.                                     </div>    
  42.                                     <div class="slds-col slds-size_1-of-2">    
  43.                                         <lightning-input-field field-name="Email">    
  44.                                         </lightning-input-field>    
  45.                                     </div>    
  46.                                     <div class="slds-col slds-size_1-of-2">    
  47.                                         <lightning-input-field field-name="Confirm_Details__c">    
  48.                                         </lightning-input-field>    
  49.                                     </div>    
  50.                                 </div>    
  51.                                 <lightning-button class="slds-m-top_small"    
  52.                                                 variant="brand"    
  53.                                                 type="submit"    
  54.                                                 name="update"    
  55.                                                 label="Update">    
  56.                                 </lightning-button>    
  57.                             </lightning-record-edit-form>    
  58.                               
  59.                     </div>  
  60.   
  61.                     <footer class="slds-modal__footer">  
  62.                         <center><h1 style="color:green;">Please select Confirm Details 
  63. check box to avoid seeing this pop up!!!</h1></center>  
  64.                     </footer>  
  65.   
  66.                 </div>  
  67.   
  68.             </section>  
  69.   
  70.             <div class="slds-backdrop slds-backdrop_open"></div>  
  71.         </div>  
  72.   
  73.     </template>  
  74.   
  75.     <template if:true = {error}>    
  76.     
  77.         {error}>    
  78.             
  79.     </template>   
  80.   
  81. </template

 JS:

  1. import { LightningElement, track } from 'lwc';  
  2. import fetchContactInfo from '@salesforce/apex/CommunityDetailsCheckController.fetchContactInfo';  
  3.   
  4. export default class CommunityDetailsCheck extends LightningElement {  
  5.   
  6.     @track error;   
  7.     @track objContact;  
  8.   
  9.     connectedCallback() {    
  10.     
  11.         fetchContactInfo()      
  12.         .then(result => {    
  13.   
  14.             this.objContact = result;    
  15.   
  16.         })    
  17.         .catch(error => {    
  18.   
  19.             this.error = error;    
  20.   
  21.         });   
  22.     
  23.     }   
  24.   
  25.     handleSuccess( ) {    
  26.             
  27.         this.objContact = null;  
  28.     
  29.     }   
  30.   
  31.     closeModal() {  
  32.   
  33.         this.objContact = null;  
  34.   
  35.     }   
  36.   

JS-META.XML:

  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">  
  3.     <apiVersion>47.0</apiVersion>  
  4.     <isExposed>true</isExposed>  
  5.   
  6.     <targets>  
  7.         <target>lightningCommunity__Page</target>  
  8.     </targets>  
  9. </LightningComponentBundle> 

4. Create Audience in Community Cloud like below.


5. Add the Lightning Web Component to the Home page of the Community.

6. Make sure the visibility of the Lightning Web Component is set to that Audience.


Output:


Once the user select "Confirm Details" check box and clicks "Update", the pop up won't appear again for the user.

No comments:

Post a Comment