How to display custom alert message if you have successfully added a record in tabular page using inline-add?

[CapNcook]

Hi Everyone,

Is there a way we can display an alert message when we add a record? I have a lot of records in my tabular page and I have to scroll down to confirm if the records have been added so I was thinking it would be great if we have some alert message upon clicking the add button.  A green alert box with message success would be great functionality in our website. Any help would be appreciated! Thank you. 

[ianGPT]

Hi,

For that one, you need to use a custom code. A combination of CSS and JS to be exact.

I have achieved this use-case using the following code.

1.) Add a header and footer in your result configuration.
2.) In the header add the following CSS code.
 

<style>
   .success-alert {
       background-color: #4CAF50;
            color: white;
            border: 1px solid #45A049;
            padding: 10px;
            text-align: center;
            font-weight: bold;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 300px; /* Adjust the width as needed */
        }
</style>

3.) In the footer add the following JS code.

<script type="text/javascript">
  const addButton = document.querySelector('.cbResultSetAddButton');

    addButton.addEventListener('click', function () {
        // Custom success message
        const successMessage = 'You have successfully added a record.';
        
        // Create an alert with a custom class
        const successAlert = document.createElement('div');
        successAlert.className = 'success-alert';
        successAlert.textContent = successMessage;

        // Add the alert to the body
        document.body.appendChild(successAlert);

        // Close the alert after 3 seconds (3000 milliseconds)
        setTimeout(function () {
            document.body.removeChild(successAlert);
        }, 3000);
    });
</script>

I have included comments to make it easier for you to modify as needed.


Example Result:



Hope this helps!

[Meekeee]

Hi @CapNcook - you may also refer to this post for custom Alert. This post uses: https://sweetalert2.github.io/