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
abu saleh khan 8abu saleh khan 8 

2. Don’t show this checkbox/modal again

Hi all,

I have a requirement to create a lightning component in which I need a modal box with checkbox, which should stop showing up when user select a checkbox.

I have referred many Javascript examples but unfortunately I am not able to figure it out.

Thanks.
 
Best Answer chosen by abu saleh khan 8
Khan AnasKhan Anas (Salesforce Developers) 
Hi Abu,

Greetings to you!

You can use localStorage 'tempSession'. You need to use init handler so that when component refreshes it should get tempSession. And you need to set its value on button or checkbox click (change according to your requirement). Below is a sample code which might help you. 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.

Below is the sample code. 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">
                    <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>
                    <div class="slds-modal__header">
                        <p>Modal Box</p>
                    </div>
                    
                    <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