How to add Progress Bar in Save Controller Magento2?

Question

I wanted to add a progress bar while the code in Save controller is executing on Clicking Save Button in Ui_component Form in Magento2?

How Can I implement this

Thanks !!

Answer 1

You can add a progress bar to show the progress of the save action in the following steps:

1. Add a progress bar HTML element to your form's UI component file. For example, you can add it to the bottom of the form container like this:

   <container name="progress_bar_container" htmlTag="div" htmlClass="progress-bar-container">
        <htmlContent>
            <div class="progress-bar">
                <div class="progress-bar-fill"></div>
            </div>
        </htmlContent>
    </container>
   

2. Create a JavaScript file that will handle the progress bar functionality. For example, you can create a file called save-progress-bar.js in your module's view/adminhtml/web/js directory.

3. In the JavaScript file, you can listen to the click event of the save button and show the progress bar. Then, you can make an AJAX call to the save controller and update the progress bar accordingly. Once the save action is completed, you can hide the progress bar. Here's an example code:

   define([
        'jquery',
        'mage/url'
    ], function ($, url) {
        'use strict';
   
        return function (config) {
            var progressBar = $('.progress-bar'),
                progressBarFill = $('.progress-bar-fill'),
                saveButton = $('#' + config.saveButtonId);
   
            saveButton.on('click', function (e) {
                e.preventDefault();
   
                progressBar.show();
   
                var saveUrl = url.build('module/controller/save');
                $.ajax({
                    url: saveUrl,
                    type: 'POST',
                    dataType: 'json',
                    beforeSend: function () {
                        progressBarFill.css('width', '0%');
                    },
                    success: function (response) {
                        progressBar.hide();
                    },
                    xhrFields: {
                        onprogress: function (e) {
                            if (e.lengthComputable) {
                                var percentComplete = (e.loaded / e.total) * 100;
                                progressBarFill.css('width', percentComplete + '%');
                            }
                        }
                    }
                });
            });
        };
    });
   

4. Finally, you need to add the JavaScript file to your form's UI component file by adding the following code:

   <jsComponent name="save-progress-bar" />
   

With these steps, you should now have a progress bar that shows the progress of the save action when the save button is clicked in your UI component form.