In the following example, I have used a custom field on the Contact object to avoid showing the popup when the Experience/Community cloud Site user logs in for the first time.
1. Create a Custom Field in Contact object.
![](https://www.infallibletechie.com/wp-content/uploads/2020/02/Check2Bbox2BContact2Bobject2BSalesforce.jpg)
2. Create the below Apex Class.
public with sharing class CommunityDetailsCheckController {
@AuraEnabled( cacheable = true )
public static String fetchContactInfo() {
User objUser = [ SELECT ContactId FROM User WHERE Id =: UserInfo.getUserId() ];
if ( string.isNotBlank( objUser.ContactId ) )
return objUser.contactId;
else
return null;
}
}
3. Create the below Lightning Web Component.
HTML:
<template>
<template if:true = {objContact}>
<div class="demo-only" style="height: 640px;">
<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">
<div class="slds-modal__container">
<header class="slds-modal__header">
<button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
<lightning-icon icon-name="utility:close" size="medium">
</lightning-icon>
<span class="slds-assistive-text">Close</span>
</button>
<h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Please confirm your details</h2>
</header>
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
<lightning-record-edit-form record-id={objContact}
object-api-name="Contact"
onsuccess={handleSuccess}>
<lightning-messages>
</lightning-messages>
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-2">
<lightning-input-field field-name="FirstName">
</lightning-input-field>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input-field field-name="LastName">
</lightning-input-field>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input-field field-name="Phone">
</lightning-input-field>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input-field field-name="Email">
</lightning-input-field>
</div>
<div class="slds-col slds-size_1-of-2">
<lightning-input-field field-name="Confirm_Details__c">
</lightning-input-field>
</div>
</div>
<lightning-button class="slds-m-top_small"
variant="brand"
type="submit"
name="update"
label="Update">
</lightning-button>
</lightning-record-edit-form>
</div>
<footer class="slds-modal__footer">
<center><h1 style="color:green;">Please select Confirm Details
check box to avoid seeing this pop up!!!</h1></center>
</footer>
</div>
</section>
<div class="slds-backdrop slds-backdrop_open"></div>
</div>
</template>
<template if:true = {error}>
{error}>
</template>
</template>
JavaScript:
import { LightningElement, track } from 'lwc';
import fetchContactInfo from '@salesforce/apex/CommunityDetailsCheckController.fetchContactInfo';
export default class CommunityDetailsCheck extends LightningElement {
@track error;
@track objContact;
connectedCallback() {
fetchContactInfo()
.then(result => {
this.objContact = result;
})
.catch(error => {
this.error = error;
});
}
handleSuccess( ) {
this.objContact = null;
}
closeModal() {
this.objContact = null;
}
}
JS-META.XML:
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>47.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightningCommunity__Page</target>
</targets>
</LightningComponentBundle>
4. Create Audience in Community Cloud like below.
![](https://www.infallibletechie.com/wp-content/uploads/2020/02/Create2BAudience2BSalesforce2BCommunity.jpg)
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.
![](https://www.infallibletechie.com/wp-content/uploads/2020/02/Lightning2BWeb2BComponent2BVisibility2Bin2BSalesforce2BCommuniyt.jpg)
Output:
Once the user select “Confirm Details” check box and clicks “Update”, the pop up won’t appear again for the user.