Creating Custom Popup to Indicate Page Expiry

Introduction

This tutorial provides step-by-step instructions for implementing a custom pop-up to indicate page expiry. It demonstrates how to display a pop-up reminder prompting users to refresh the page (when it contains a form) after a defined interval, helping prevent 403 Forbidden errors caused by CSRF token expiration during form submission.

How does it work?

 Step-by-step guide for the sample application:

1. Launch the app.
2. Click Manage Sample Form > New.
   
3. Stay Idle for 3 minutes (The user can change the timeout value).
4. A pop-up notifying the user that the page has expired will be displayed.
   

Implementing the Custom Popup using SweetAlert2 JavaScript code

1. Open App Center and log in as Administrator, and navigate to the application's App Composer page.
2. Click the UI from the UI Builder.
   
3. Click Settings > Theme > Advanced.
4. Copy the following JavaScript code to the Sub Header or Sub Footer.
   

   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

   
5. Copy the following JavaScript code to the Custom JavaScript.
   

   var sessionTimeoutId = null;
   $(document).on('page_loaded', function(){
       clearTimeout(sessionTimeoutId);
       if($('form').length > 0){
           sessionTimeoutId = setTimeout(function(){
               Swal.fire({
                   title: '',
                   html: 'The page has expired due to inactivity.<br>Please refresh and try again.',
                   icon: 'warning',
                   allowOutsideClick: false, 
                   allowEscapeKey: false,  
                   showConfirmButton: true,
                   showCancelButton: true,
                   confirmButtonText: 'Refresh',
                   cancelButtonText: 'Cancel',
                   confirmButtonColor: 'var(--theme-button-bg)',
               }).then((result) => {
                   if (result.isConfirmed) {
                       $("#content.page_content").addClass('ajaxloading');
                       $("#content.page_content").attr('data-content-placeholder', 'form');
                       location.reload();
                   }
               });
           }, 180000);
       }
   })

   
6. Click Save.

Modify the Timeout Value

The current timeout value is 180000 milliseconds (3 minutes = 3 x 60 x 1000 milliseconds). Modify the timeout value according to the user's session timeout value. 

For further configurations, please refer to sweetalert2.

Expected outcome

After 3 minutes of inactivity while a user is completing a form, a pop-up will be triggered.

Download sample app