Add A Warning Pop-up To Warn Unsaved Changes In Form

by ADMIN 53 views

Warning Users of Unsaved Changes

As users interact with forms in NetBox, it's not uncommon for them to forget to submit their changes before leaving the page. This can lead to lost data and a frustrating experience for the user. To mitigate this issue, we propose adding a warning pop-up to alert users of unsaved changes when they attempt to leave a form.

NetBox Version and Feature Type

This feature is designed for NetBox version 4.2.1 and is classified as a new functionality.

Proposed Functionality

To implement this feature, we will add JavaScript code to NetBox that triggers a pop-up warning when a user attempts to leave a form with unsaved data. The code will be based on the beforeunload event, which is supported by most modern browsers.

Existing Code and Testing

Before implementing the new code, we tested a similar solution based on the Mozilla Developer Network documentation. The code worked as expected in our local installation:

<form action="" method="post" enctype="multipart/form-data" class="object-edit mt-5">
    <script type="text/javascript">
        const beforeUnloadHandler = (event) => {
            // Recommended
            event.preventDefault();

            // Included for legacy support, e.g. Chrome/Edge < 119
            event.returnValue = true;
        };

        document.addEventListener("input", (event) => {
            if (event.target.value !== "") {
                window.addEventListener("beforeunload", beforeUnloadHandler);
            } else {
                window.removeEventListener("beforeunload", beforeUnloadHandler);
            }
        });
    </script>

Use Case

The use case for this feature is straightforward:

  1. A user is filling out a form in NetBox (e.g., a site or device form).
  2. The user wants to leave the page but forgets to submit the form.
  3. A pop-up warning appears, reminding the user that the page has unsaved changes.

Database Changes

No database changes are required to implement this feature.

External Dependencies

No external dependencies are required for this feature.

Implementation Details

To implement this feature, we will follow these steps:

  1. Add the JavaScript code to NetBox, which will listen for the input event on form elements.
  2. When the user interacts with a form element (e.g., types in a field), the code will add an event listener to the beforeunload event.
  3. When the user attempts to leave the page, the beforeunload event will trigger the pop-up warning.
  4. The pop-up warning will remind the user that the page has unsaved changes and provide an opportunity to submit the form or cancel the action.

Code Implementation

Here is the updated code that implements the warning pop-up:

<form action="" method="post" enctype="multipart/form-data" class="object-edit mt-5">
    <script type="text/javascript">
        const beforeUnloadHandler = (event) => {
            // Recommended
            event.preventDefault();

            // Included for legacy support, e.g. Chrome/Edge < 
            event.returnValue = true;

            // Display a pop-up warning
            alert("You have unsaved changes. Are you sure you want to leave this page?");
        };

        document.addEventListener("input", (event) => {
            if (event.target.value !== "") {
                window.addEventListener("beforeunload", beforeUnloadHandler);
            } else {
                window.removeEventListener("beforeunload", beforeUnloadHandler);
            }
        });
    </script>

Conclusion

Q: What is the purpose of the warning pop-up?

A: The warning pop-up is designed to remind users of unsaved changes when they attempt to leave a form in NetBox. This feature helps prevent users from losing their work and reduces the likelihood of errors.

Q: How does the warning pop-up work?

A: The warning pop-up is triggered by the beforeunload event, which is supported by most modern browsers. When a user interacts with a form element (e.g., types in a field), the code adds an event listener to the beforeunload event. When the user attempts to leave the page, the beforeunload event triggers the pop-up warning.

Q: What happens when the user clicks "OK" on the warning pop-up?

A: When the user clicks "OK" on the warning pop-up, the page will unload as usual. However, the user will be reminded of the unsaved changes and can take steps to save their work before leaving the page.

Q: Can I customize the warning pop-up message?

A: Yes, you can customize the warning pop-up message to suit your needs. Simply modify the alert statement in the code to display a different message.

Q: Does this feature work on all browsers?

A: The beforeunload event is supported by most modern browsers, including Google Chrome, Mozilla Firefox, and Microsoft Edge. However, older browsers may not support this feature.

Q: Can I disable the warning pop-up for certain forms?

A: Yes, you can disable the warning pop-up for certain forms by removing the event listener for the beforeunload event. This can be done by adding a conditional statement to the code that checks the form ID or class before adding the event listener.

Q: How do I implement this feature in my NetBox installation?

A: To implement this feature in your NetBox installation, follow these steps:

  1. Add the JavaScript code to your NetBox installation, which will listen for the input event on form elements.
  2. Modify the code to display a custom warning pop-up message, if desired.
  3. Test the feature to ensure it works as expected.

Q: What are the benefits of implementing this feature?

A: The benefits of implementing this feature include:

  • Improved user experience: The warning pop-up reminds users of unsaved changes, reducing the likelihood of errors and lost data.
  • Reduced support requests: By providing a clear warning, users are less likely to contact support with issues related to lost data.
  • Enhanced productivity: Users can focus on their work without worrying about losing their progress.

Q: Are there any known issues or limitations with this feature?

A: Yes, there are a few known issues and limitations with this feature:

  • Older browsers may not support the beforeunload event.
  • The warning pop-up may not display correctly in certain browsers or screen resolutions.
  • The feature may not work as expected if the form is loaded dynamically or using AJAX.

Q: How can I troubleshoot with this feature?

A: To troubleshoot issues with this feature, follow these steps:

  1. Check the browser console for errors or warnings related to the beforeunload event.
  2. Verify that the JavaScript code is loaded correctly and executed as expected.
  3. Test the feature in different browsers and screen resolutions to ensure it works as expected.