0

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 !!

1 Answer 1

0

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.

2
  • It's not working getting errors HtmlTag HtmlClass etc Mar 9, 2023 at 6:29
  • You have to check correct tag and reference in form's UI component file. I just give an idea but actually don't know you module or code which you are working on. Mar 9, 2023 at 6:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.