Showing popup while switching ADF Panel tab

Requirement-

In ADF when we use adf panel tab component we often come across requirement where when user switches tabs we want to show user popup saying “Do you really want to switch Tabs? Any uncommitted changes will be lost”. In case user say No we want to keep user on the same tab. 

Solution –

My panel tab jsf/jspx code is as below 

 

Here as highlighted above you can notice that I have java script method which is getting called on disclosure event of af:showDetailItem. 

Java Script code is as below.

1. First declare two java script variable that are global on page one for tab to close and one for tab to open
2. Using disclosure event initialize the two global variables (theTabToClose, theTabToOpen)and then cancel the disclosure event as we want to show popup to user which will ask for confirmation.
3. using popup.show(); show popup to user asking for confirmation.Popup code is as below 

1. In Popup that opens there would be two buttons Ok/Cancel. On each button click call handlePopupOkCancel java script method and pass action(Ok/Cancel) as parameter to javascript method using af:clientAttribute .
2. In handlePopupOkCancel in case action is Ok then we close the tab using javascript as below .After this cancel button event and hide popup.

if (butPressed == 'OK') {

                  theTabToClose.setDisclosed(true);

              }

Final result when user switches tab –Here if you click cancel then tab is not switched and if you click ok tab will be switched.Please note the database rollback code you can write in disclosureListener of af:showDetailItem which would be java method in backing bean.