function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Camila CamargoCamila Camargo 

Don't Show This Again Checkbox

Hi, everyone.

I'm a Salesforce beginner and I need help with this code. I want to this "Don't show this again checkbox" makes the modal to stop showing up instead of the handler doInit. I thought that I could only change the function position on the component, but it doesn't work. Can any of you help me step by step to make this works, please? I appreciate your time and patience. Here is my code:

Component
<aura:component implements="flexipage:availableForAllPageTypes"
                access="global">
    
<!--<aura:handler name="init" action="{!c.doInit}" value="{!this}"/>-->
<aura:attribute name="isModalOpen" type="boolean" default="false"/> 
    
	<div class="demo-only">
        <!--Use aura:if tag to display/hide popup based on isModalOpen value-->  
        <aura:if isTrue="{!v.isModalOpen}">
  <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small" aria-labelledby="welcome-mat-95-label" aria-describedby="welcome-mat-95-content" aria-modal="true">
    <div class="slds-modal__container">
      <header class="slds-modal__header slds-modal__header_empty">
        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
      </header>
      <div class="slds-modal__content" id="welcome-mat-95-content" style="overflow: hidden">
        <div class="slds-welcome-mat slds-welcome-mat_splash">
          <div class="slds-welcome-mat__content slds-grid">
            <div class="slds-welcome-mat__info slds-size_1-of-1">
              <div class="slds-welcome-mat__info-content">
                <h2 class="slds-welcome-mat__info-title" id="welcome-mat-95-label">The Lightning Experience is here!</h2>
                <div class="slds-welcome-mat__info-description slds-text-longform">
                  <p>Welcome to Lightning Experience, the modern, beautiful user experience from Salesforce. With a sales-and service-centric mindset, we focused on reinventing the desktop environment to better support your business processes.</p>
                </div>
                <div class="slds-welcome-mat__info-actions">
                  <button class="slds-button slds-button_brand">Learn More</button>
                 <div class="slds-m-top_large">
                    <div class="slds-form-element">
                      <div class="slds-form-element__control">
                        <div class="slds-checkbox">
                          <input type="checkbox" name="init" id="checkbox-8" onchange="{!c.doInit}" value="{!this}" />
                          <label class="slds-checkbox__label" for="checkbox-8">
                            <span class="slds-checkbox_faux"></span>
                            <span class="slds-form-element__label">Don&#x27;t show this again</span>
                          </label>
                        </div>
                      </div>
                    </div>
                  </div> 
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
            
  <div class="slds-backdrop slds-backdrop_open"></div>
     </aura:if>
</div>
</aura:component>

Controller
({
   doInit: function(component, event, helper) { 
 var temperorySession = sessionStorage.getItem('tempSession');
  if(temperorySession == '1')
        {  
      console.log('===== in If');
            component.set("v.isModalOpen", false);
  }
        else
        {
      console.log('===== in else');
      component.set("v.isModalOpen", true);
  }
   sessionStorage.setItem('tempSession', '1');
 },
  
   closeModel: function(component, event, helper) {
      // Set isModalOpen attribute to false  
      component.set("v.isModalOpen", false);
   },
})

Style
 
.THIS.pop-up {
    display: block;
    opacity: 1;
    visibility: visible;
    background-color: transparent;
}

.THIS .slds-modal__inner {
    background: yellow;
    padding: 20px;
    text-align:left;
}

.THIS .slds-modal__pinner {
    background: #fff;
    padding: 20px;
}

Best Regards,

Camila Camargo
Full Stack Developer
Best Answer chosen by Camila Camargo
Khan AnasKhan Anas (Salesforce Developers) 
Hi Camila,

Greetings to you!

You need to use init handler also so that when component refreshes it should get tempSession. But you need to set its value on button or checkbox click (according to your requirement). I have made a few changes to the code. If you click on a button without selecting checkbox it will display modal again on refresh but if you click on a button after selecting a checkbox the modal will not show again for that session.

Kindly modify the code as per your requirement.

Component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="isModalOpen" type="boolean" default="true"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    <div class="slds-m-around_xx-large" >
        
        <!--Use aura:if tag to display/hide popup based on isModalOpen value-->  
        <aura:if isTrue="{!v.isModalOpen}">
            
            <!-- Modal/Popup Box starts here-->
            <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">
                    <!-- Modal/Popup Box Header Starts here-->
                    <header class="slds-modal__header" style="border-bottom: none; padding: 0">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                    </header>
                    <!--Modal/Popup Box Body Starts here-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1" style="overflow: hidden">
                        <img src="/resource/1556211422000/polybday26" alt="Aniversario Polyorganic" />
                    </div>
                    
                    <!--Modal/Popup Box Footer Starts here-->
                    <footer class="slds-modal__footer">
                        <div class="slds-m-top_large">
                            <div class="slds-form-element">
                                <div class="slds-form-element__control">
                                    <div>
                                        <ui:inputCheckbox aura:id="checkbox-8" 
                                                          change="{!c.doInit}" 
                                                          label="Don&#x27;t show this again   "/>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                        

                        <lightning:button variant="brand"
                                          label="OK"
                                          title="OK"
                                          onclick="{!c.submitDetails}"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
            
        </aura:if>
    </div>
</aura:component>

Controller:
({
    doInit: function(component, event, helper) {
        var temperorySession = localStorage.getItem('tempSession');
        if(temperorySession == '1')
        {  
            console.log('===== in If');
            component.set("v.isModalOpen", false);
        }
        else
        {
            console.log('===== in else');
            component.set("v.isModalOpen", true);
        }
        //localStorage.setItem('tempSession', '0');
    },
    
    openModel: function(component, event, helper) {
        // Set isModalOpen attribute to true
        component.set("v.isModalOpen", true);
        
        
    },
    
    closeModel: function(component, event, helper) {
        // Set isModalOpen attribute to false  
        component.set("v.isModalOpen", false);
    },
    
    submitDetails: function(component, event, helper) {
        // Set isModalOpen attribute to false
        //Add your code to call apex method or do some processing
        var checkCmp = component.find("checkbox-8");
        var resultCmp = checkCmp.get("v.value");
        console.log('resultCmp-> ' + resultCmp);
        if(resultCmp==true){
            localStorage.setItem('tempSession', '1');
        }
        component.set("v.isModalOpen", false);
    },
})

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas​​​​​​​

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Camila,

Greetings to you!

You need to use init handler also so that when component refreshes it should get tempSession. But you need to set its value on button or checkbox click (according to your requirement). I have made a few changes to the code. If you click on a button without selecting checkbox it will display modal again on refresh but if you click on a button after selecting a checkbox the modal will not show again for that session.

Kindly modify the code as per your requirement.

Component:
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:attribute name="isModalOpen" type="boolean" default="true"/>
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    <div class="slds-m-around_xx-large" >
        
        <!--Use aura:if tag to display/hide popup based on isModalOpen value-->  
        <aura:if isTrue="{!v.isModalOpen}">
            
            <!-- Modal/Popup Box starts here-->
            <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">
                    <!-- Modal/Popup Box Header Starts here-->
                    <header class="slds-modal__header" style="border-bottom: none; padding: 0">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                    </header>
                    <!--Modal/Popup Box Body Starts here-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1" style="overflow: hidden">
                        <img src="/resource/1556211422000/polybday26" alt="Aniversario Polyorganic" />
                    </div>
                    
                    <!--Modal/Popup Box Footer Starts here-->
                    <footer class="slds-modal__footer">
                        <div class="slds-m-top_large">
                            <div class="slds-form-element">
                                <div class="slds-form-element__control">
                                    <div>
                                        <ui:inputCheckbox aura:id="checkbox-8" 
                                                          change="{!c.doInit}" 
                                                          label="Don&#x27;t show this again   "/>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                        

                        <lightning:button variant="brand"
                                          label="OK"
                                          title="OK"
                                          onclick="{!c.submitDetails}"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
            
        </aura:if>
    </div>
</aura:component>

Controller:
({
    doInit: function(component, event, helper) {
        var temperorySession = localStorage.getItem('tempSession');
        if(temperorySession == '1')
        {  
            console.log('===== in If');
            component.set("v.isModalOpen", false);
        }
        else
        {
            console.log('===== in else');
            component.set("v.isModalOpen", true);
        }
        //localStorage.setItem('tempSession', '0');
    },
    
    openModel: function(component, event, helper) {
        // Set isModalOpen attribute to true
        component.set("v.isModalOpen", true);
        
        
    },
    
    closeModel: function(component, event, helper) {
        // Set isModalOpen attribute to false  
        component.set("v.isModalOpen", false);
    },
    
    submitDetails: function(component, event, helper) {
        // Set isModalOpen attribute to false
        //Add your code to call apex method or do some processing
        var checkCmp = component.find("checkbox-8");
        var resultCmp = checkCmp.get("v.value");
        console.log('resultCmp-> ' + resultCmp);
        if(resultCmp==true){
            localStorage.setItem('tempSession', '1');
        }
        component.set("v.isModalOpen", false);
    },
})

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas​​​​​​​
This was selected as the best answer
Camila CamargoCamila Camargo
Thanks Khan Anas! It's exactly what I was wishing. Have a incredible day!
mayur K 12mayur K 12
thanks to this solution for Don't Show This Again Checkbox.
Regard: https://www.vbtcafe.com/
johnnydeljohnnydel
Thank you Anas! perfect as expected
Goldy Raj 9Goldy Raj 9
Hi,

It seems you are also using a custom welocme mat.Please help!

If you are using aura component how are u specifing the url can you please give url example.
Also how to set welcome mat background image.I want it of astro.

Its quiet urgent Please reply.

Thankyou in Advance.