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 30 minutes (or less by changing the timeout value).
4. A pop-up notifying the user that the page has expired will be displayed.
   

Creating a sample application

1. Open App Center and log in as Administrator.
2. Click Add New > Design App > Create New App > Create A Blank App.
3. Fill in the App ID and App Name, and click Save.
   
4. Click the + button at Form Builder.
   
5. Fill in the Form ID, Form Name, and Table Name, and click Save.
   
6. Create a sample form by dragging a few palettes into the form.
   
7. Click Apply Changes > Save > Generate App.
8. Tick the box of GENERATE CRUD and click Generate.
   

Implementing the Custom Popup

1. Navigate to App Composer and click the UI from the UI Builder.
   
2. Click Settings > Theme > Advanced.
3. Copy the following JavaScript code to the Sub Header or Sub Footer.
   

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

   
4. 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();
                   }
               });
           }, 1800000);
       }
   })

   
5. Click Save.

Modify the Timeout Value

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();
                }
            });
        }, 1800000);
    }
})

The current timeout value is 1800000 milliseconds (30 minutes = 30 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 30 minutes of inactivity while a user is completing a form, a pop-up will be triggered.

Download sample app