Jump to content
  • 0

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



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. 

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 1


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.

   .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 */

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

        // Close the alert after 3 seconds (3000 milliseconds)
        setTimeout(function () {
        }, 3000);

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

Example Result:


Hope this helps!

Link to comment
Share on other sites

  • 0

Responsive mode?


Hi everyone. First, thanks to ianGPT for providing the solution. I implemented it and it also works for inline insert. However, it does not work in responsive mode. The reason is that when you are adding a record on very small screen (mobile phone in portrait mode) the actual entering is not happening on the records page, but rather on a page specifically designed for that purpose and not available in the DataPage editor (to my knowledge). Can anyone help me finding a solution to display alert message upon submit in responsive mode.

Many thanks to the "listeners"


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...