function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Pavan Kumar 862Pavan Kumar 862 

Show pop up when data changed and closing with out saving in Lightning componenet

I have implimented the custom component where it will have few input componenets and save button.
If user is changed or given data in input componenets and without savibg button if the user tries to navigate to other page by clickig the Back button(Custom Lightining button) i shoud show the alert telling that "unsaved items are availible in page.Please check and go".

Please let me know how to acheie this requirement in lightining components.
Amit Singh 1Amit Singh 1
Hi Pavan,

call a controller method when clicking on "Back" button and put an alert message in that method.

Sample code is given below:
For button on Lightning Component. 
<ui:button value="Back" press "{!c.goBack}"/>
Controller method which will be written in YourcYour componentroller.js 
goBack : function(component, event, helper){
       alert("unsaved items are availible in page.Please check and go");   
}

Let me know if this helps :)

Thanks,
Amit Singh.
 
sfdcMonkey.comsfdcMonkey.com
hi Pavan  Kumar 
try below sample code
* create a bolean attribute and make it by default false.
* add a change event event in your all input fields.
if the any field value is add or change then make isChange attribute is true , 
* if user click on the save button then make isChange attribute is false, 
* if user click on the back button then check first if the isChange attribute value is false then navigate to other page or it true(means changes are made in any fields ). give a alert error message .

sample code here  
<aura:component>
    <aura:attribute name="isChange" type="boolean" default="false"/> 
    
    <ui:inputText change="{!c.changeFieldValues}" value="test" />
    <ui:inputText change="{!c.changeFieldValues}" value="test2" />
    
    <ui:button press="{!c.save}" label="Save" />
    <ui:button press="{!c.back}" label="back" />
</aura:component>
  
({
	changeFieldValues : function(component, event, helper) {
		component.set("v.isChange" , true);
	},
    
    save : function(component, event, helper) {
      // if the user click on the save button first then set isChange to false		
        component.set("v.isChange" , false);
	},
    
    back : function(component, event, helper) {
	  var getFieldStatus = component.get("v.isChange");
        // if value is false means fields value is not change(bydefault) 
        // if any field value is change so,changeFieldValues function is call and make 
        // isChange value is true
        
        if(getFieldStatus == false){
         // nevigate to another page    
            
        }else{
            alert('unsaved items are availible in page.Please save first');
        }
        
	},
     
    
})

i hope it helps you.
Let me inform if it helps you and kindly mark it best answer if it helps you so it make proper solution for others ,thanks 
http://sfdcmonkey.com