+ Start a Discussion
MaheemSamMaheemSam 

Pop page when user login in lightning

Hi, 

   When user logs in using lightning is there  a way to build a popup page with a message please suggest me how to implement this feature. 

Thanks
Sudhir
Best Answer chosen by MaheemSam
Ramesh DepaiahRamesh Depaiah
Put this lightning component on Home page:
Note: This popup will show only once when the user logins in first time, if you want this to show n times please reomve temperorySession condition

Aura Component:
<aura:component 
               implements="flexipage:availableForAllPageTypes"
                access="global">
    <aura:handler name='init' action="{!c.init}" value="{!this}" />
    <aura:attribute name="isOpen" type="boolean" default="false" />
    <div class="slds-backdrop" aura:id="Modalbackdrop"></div>
    <aura:if isTrue="{!v.isOpen}">
        <div role="dialog" tabindex="-1" aria-labelledby="header43" class='pop-up slds-modal' aura:id="popupDiv1">
            <div class="slds-modal__container">
                <div class="slds-modal__pinner">
                    <div class="message">
                        <p>You logged into salesforce Lightning </p>                    
                    </div>
                    <div class="slds-form-element">
                        <lightning:button variant="success" label="Ok" title="ok" onclick="{! c.close }" />
                        
                    </div>
                </div>
            </div>
        </div>
    </aura:if>
</aura:component>
JS Controller:
({
    init : function(component, event, helper) {
        var temperorySession = localStorage.getItem('tempSession');
        if(temperorySession == '1')
        {  
            component.set("v.isOpen", false);
        }
        else
        {
            component.set("v.isOpen", true);
            var cmpTarget1 = component.find('popupDiv1');
            var cmpBack1 = component.find('Modalbackdrop1');
            $A.util.addClass(cmpTarget1, 'slds-fade-in-open');
            $A.util.addClass(cmpBack1, 'slds-backdrop--open');
        }
        localStorage.setItem('tempSession', '1');
        
    },
    close: function(component, event, helper) {
        component.set("v.isOpen", false);
    }
})
STYLE:
.THIS.pop-up {
    display: block;
    opacity: 1;
    visibility: visible;
}

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

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

OutPut:
User-added image


I hope you find the above solution helpful. If it does mark as best answer to help others too.
Thanks,
Ramesh D

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi,

Greetings to you!

You can use Login Flows. Please refer to the below links which might help you further with the above requirement.

http://docs.releasenotes.salesforce.com/en-us/winter15/release-notes/rn_forcecom_security_login_flows.htm

https://developer.salesforce.com/docs/atlas.en-us.securityImplGuide.meta/securityImplGuide/security_login_flow_examples.htm

https://automationchampion.com/2014/12/11/display-notice-when-users-log-in-to-salesforce-3/

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
Ramesh DepaiahRamesh Depaiah
Put this lightning component on Home page:
Note: This popup will show only once when the user logins in first time, if you want this to show n times please reomve temperorySession condition

Aura Component:
<aura:component 
               implements="flexipage:availableForAllPageTypes"
                access="global">
    <aura:handler name='init' action="{!c.init}" value="{!this}" />
    <aura:attribute name="isOpen" type="boolean" default="false" />
    <div class="slds-backdrop" aura:id="Modalbackdrop"></div>
    <aura:if isTrue="{!v.isOpen}">
        <div role="dialog" tabindex="-1" aria-labelledby="header43" class='pop-up slds-modal' aura:id="popupDiv1">
            <div class="slds-modal__container">
                <div class="slds-modal__pinner">
                    <div class="message">
                        <p>You logged into salesforce Lightning </p>                    
                    </div>
                    <div class="slds-form-element">
                        <lightning:button variant="success" label="Ok" title="ok" onclick="{! c.close }" />
                        
                    </div>
                </div>
            </div>
        </div>
    </aura:if>
</aura:component>
JS Controller:
({
    init : function(component, event, helper) {
        var temperorySession = localStorage.getItem('tempSession');
        if(temperorySession == '1')
        {  
            component.set("v.isOpen", false);
        }
        else
        {
            component.set("v.isOpen", true);
            var cmpTarget1 = component.find('popupDiv1');
            var cmpBack1 = component.find('Modalbackdrop1');
            $A.util.addClass(cmpTarget1, 'slds-fade-in-open');
            $A.util.addClass(cmpBack1, 'slds-backdrop--open');
        }
        localStorage.setItem('tempSession', '1');
        
    },
    close: function(component, event, helper) {
        component.set("v.isOpen", false);
    }
})
STYLE:
.THIS.pop-up {
    display: block;
    opacity: 1;
    visibility: visible;
}

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

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

OutPut:
User-added image


I hope you find the above solution helpful. If it does mark as best answer to help others too.
Thanks,
Ramesh D
This was selected as the best answer
MaheemSamMaheemSam
Thanks Ramesh for you reply I am trying your suggestion I am new to lightning please guide me since I am learning lightning components. 

I created Aura component. Please let me know how to add JS controller and Syle should this be included in the component itself please suggest

Thanks
Sudhir
Ramesh DepaiahRamesh Depaiah
Follow this and let me know 
User-added image
Thanks
Ramesh
MaheemSamMaheemSam
Thanks Ramesh one last question need a help I created component with name LogoinPop.cmp how should this be called from home page.  Do i have to create a page and add this component ?

 
Ramesh DepaiahRamesh Depaiah
Go to  Home page --> setup--> edit page-->

User-added image


and drag your component anywhere and then click Save

Thanks
Ramesh D
MaheemSamMaheemSam
Thanks Ramesh it is working now you solved my request. One last this can we grey out the background please let me know when popup shows. 
Ramesh DepaiahRamesh Depaiah
add this property to pop-up CSS
.THIS.pop-up {
    display: block;
    opacity: 1;
    visibility: visible;
    background-color:grey;
}
Output:
User-added image

I hope you find the above solution helpful. If it does mark as best answer to help others too.
Thanks,
Ramesh D
MaheemSamMaheemSam
Thanks Rames below is the changes I made. 
 
.THIS.pop-up {
    display: block;
    opacity: 1;
    visibility: visible;
    background-color:#000;
    opacity: 0.8;
}

 
Ramesh DepaiahRamesh Depaiah
Awesome, good work! Hope you learned something..
MaheemSamMaheemSam
Hi Ramesh, 

    Can we use this feature in salesforce mobile please let me know. 

Thanks
 
Harry McDonaldHarry McDonald
Hi Ramesh, I am trying to implement this code into my org. You have mentioned about 'removing the condition' to have it appear on every log in, not just the first. How would I remove this condition?
Thanks