+ Start a Discussion
MaheemSamMaheemSam 

popup page should not display, When user confirms not to display.

Hi, 

  I want to implement a logic in pop-page component, add a checkbox on page when user confirms not to display page it should not display further. How to implement this logic.

Thanks
Sudhir 
Khan AnasKhan Anas (Salesforce Developers) 
Hi Sudhir,

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.

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​​​​​​​