Progress bar

[nathan]

Hi,
I would like to know if there is a way to show a progress bar on a form to indicate the progress of a php procedure so that the user knows that the procedure is running and the progress ?

Thank you in advance for all your help
Nathan

[kev1n]

Hi,

Here's an example of a simple jQuery plugin that creates a popup with a spinning progress bar.

Add JavaScript

Add this JavaScript in the form's Custom Code/Edit field:

edit_js.png

Code: Select all

 

(function($) {
  $.fn.progressPopup = function(options) {
    var settings = $.extend({
      message: 'Loading...',
      bgColor: '#fff',
      spinnerColor: '#333',
      isOpen: false
    }, options);

    // Check if a progress popup already exists
    var popup = $('.progress-popup');

    if (popup.length === 0) {
      // Create the popup for the first time
      popup = $('<div/>', { 'class': 'progress-popup' })
                .css('display', settings.isOpen ? 'block' : 'none')
                .appendTo('body');

      $('<img/>', {
        'src': 'core/graphics/ajax-loader.gif',
        'class': 'progress-spinner'
      }).appendTo(popup);

      $('<div/>', {
        'class': 'progress-message',
        text: settings.message
      }).appendTo(popup);
    } else {
      // Update the message and display state if it already exists
      popup.find('.progress-message').text(settings.message);
      if (settings.isOpen) {
        popup.show();
      } else {
        popup.hide();
      }
    }

    // Expose methods to show/hide the popup
    this.showPopup = function() {
      popup.show();
    };

    this.hidePopup = function() {
      popup.hide();
    };

    return this;
  };
}(jQuery));

function runProcedureWithProgressMessage(procedure, msg) {
  // The progress popup is now only created once. Subsequent calls will just update and show it.
  window.progress_popup = $('<div/>').progressPopup({
    message: msg,
    isOpen: true
  });

  nuRunPHPHidden(procedure);
}

Add CSS Style:

And the CSS styles under the form's Custom Code -> Style:

style.png

Code: Select all

    .progress-popup {
      background-color: #fff;
      opacity: 0.7;
      position: fixed;
      top: 200px;
      left: 50%;
      transform: translate(-50%);
      width: 200px;
      height: 100px;
      z-index: 999;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .progress-message {
      text-align: center;
      margin-top: 15px;
    }

    .progress-spinner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
 

Usage:

To use this plugin, call runProcedureWithProgressMessage() which will execute a nuBuilder procedure and show the progress popup while the procedure is running.

Example: Call the procedure with code "my_procedure' and set "Loading data..." as progress popup title:

Code: Select all

runProcedureWithProgressMessage('my_procedure', 'Loading data...');

To hide the popup, add this line at the end of the procedure:

Code: Select all

nuJavaScriptCallback('window.progress_popup.hidePopup();');

Upon invoking the runProcedureWithProgressMessage() function, a progress modal will be displayed with the specified message, the corresponding PHP procedure will be executed, and upon its completion, the progress modal will be dismissed.

progress.gif

To tailor the plugin to your unique requirements, various aspects can be customised. For instance, you can modify the CSS styles, alter the message content, adjust the dimensions and placement of the modal, or even add or remove features as desired..

[nathan]

Thank you so much this is exactly what I was looking for, worked great on first try ....I put the code in the Browse/edit custom code since I am launching the procedure from a browse screen.
Thank you once again for your great support I hope one day I will be good enough to contribute.
Nathan

[kev1n]

When the code is intended solely for use in a browsing screen, the code may be placed under Custom Code/Browse.

[nathan]

Thank you
I have a follow-up question
Can I use thhis for a function instead of a procedure and how would i go about doing this ??
Nathan

[kev1n]

Yes, you can:

Code: Select all

  
function functionWithProgressBar() {

    //  Show progress bar:
    window.progress_popup = $('<div/>').progressPopup({
        message: 'starting'
        , isOpen: true
    });

    // other code here...

    // Hide  progress bar:
    window.progress_popup.hidePopup()

}

[nathan]

Thank you once again !!!

Nathan

[ricklincs]

Hi Kev1n, is there a way this function can be used whilst copying and pasting information into subform rows? At present the user sees a pop up saying Page Unresponsive Wait or Exit Page? If copying a lot of rows they have to click wait 2 or 3 times. No major problem but a progress bar would tidy things up. Thank you in advance.

[kev1n]

Hi,

Are you using nuSubformEnableMultiPaste() to enable pasting of data?

[ricklincs]

Hi Kev1n, no just a straight copy and paste (the subform and spreadsheet match).

After trying nuSubformEnableMultiPaste() the copy and paste is still coming up with Wait or cancel 2 or 3 times, is there a way I can call the progress bar at this point?