Implementing a Custom WorkProtect Popup

Context

In addition to customizing the standard WorkProtect popup by configuration, you can replace it by your own custom implementation.

Procedure

Develop a portal application that implements a custom WorkProtect popup box.

This box is displayed by the portal as a modal window. It should return one of the following values:

DESKTOP : discard the changes and open the new page in the same window
NEWWIN : protect the unsaved data by opening the new page in a new window
CANCEL : cancel navigation and stay on the page to save the changes

All other values are ignored.

The following example shows a basic HTML page that displays three buttons. Each button returns one of the values specified above:

Sample Code

                     
<html>
        <head>
                <script>
                        function btnClicked(btntype) {
                                if (btntype == 'continue') returnValue='DESKTOP'; 
                                if (btntype == 'new_win') returnValue='NEWWIN';
                                if (btntype == 'go_back') returnValue='CANCEL';
                                window.close();
                        }
                </script>
        </head>   
        <body>
                <br>You are about to navigate from the page that contains unsaved data. Click 'Continue' to discard the changes, 
                <br>'New Window' to preserve the changes and open the page in a new window, or 'Cancel' to stay on the page.</br>                   
                <table>
                        <td>      
                                <button type="button" id='continue' onClick="btnClicked('continue')">Continue</button>
                        </td>
                        <td>
                                <button type="button" id='new_win' onClick="btnClicked('new_win')">New Window</button>
                        </td>
                        <td>
                                <button type="button" id='go_back' onClick="btnClicked('go_back')">Cancel</button>
                        </td>
                </table>
        </body>   
</html>

Build and deploy your application.
Configure the following parameters of the EPCF service:

workprotect.mode.layout = external

workprotect.popup.external.url = myCompany.myPortalWorkProtectPopup (the name of your component)

For more information, see Configuring the EPCF Service .