Community Effort - Progress Bar Snippet

  • 1
  • Question
  • Updated 4 years ago
On the progress bar I'd like something that is usable for anyone with commented instructions on how to implement it.

I need some pointers on adding elements to the HTML created by the Block UI action.



Using the suggestion from Moshe to use jQuery progressbar I think I can go from there.

I would like to have two progress bars.
  1. One for the current set of tasks being completed with text below detailing what is being done. 
  2. Another for the total tasks being completed.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
I actually have to build a progress bar myself, we can set up some collaboration on github. Rob, does that sound like a good idea?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Woohoo!!! I have a github account but have never used it.
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Pat check this out, I got it to work :) https://github.com/moshekarmel1/SkuidStuff
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Got to work or got it to work?
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Both
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Alternatively - If you are willing to host this within the Skuid's Github Page repo I could copy the files there.  That might get more exposure within the skuid communithy (not to minimize the massive exposer of Moshe's Github presence...)
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Yeah Rob I'm just blowing up on github... :) I would love if you would copy it to the skuid repo. It looks like it should be fairly easy to add this as a component (quick win for skuid). I'm not sure how we would handle progress updates, maybe via the action framework calling a snippet to push the progress further by whatever increment you choose. 

Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
I'd like to put the progress in the message block UI. Then I want to have blocks of code that could be copied into the appropriate places of the snippet that is actually doing the work.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
What do you think?
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
OK do you mean something like this: http://jqueryui.com/progressbar/#label ? Do you want to show the actual progress of the process that's being run or (much easier) just make it up?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Yes. I like that the label of the progress bar to show percentage and current task.

Similar to the Conga Composer progress bar. With a Cancel Button would be cool too!

Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Try this as a snippet called by a button or something:

var params = arguments[0],	$ = skuid.$;
$.blockUI({
    message: $("#progressbar")
});
var progressbar = $( "#progressbar" ),
  progressLabel = $( ".progress-label" );
progressbar.progressbar({
  value: false,
  change: function() {
    progressLabel.text( progressbar.progressbar( "value" ) + "%" );
  },
  complete: function() {
    progressLabel.text( "Complete!" );
    $.unblockUI();
  }
});
function progress() {
  var val = progressbar.progressbar( "value" ) || 0;
  progressbar.progressbar( "value", val + 2 );
  if ( val < 99 ) {
    setTimeout( progress, 80 );
  }
}
setTimeout( progress, 2000 );

And this in a template field:

<div id="progressbar"><div class="progress-label">
</div>
</div>
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Try this snippet, you can read up on blockUI over here: http://malsup.com/jquery/block/ And progress bars over here: http://jqueryui.com/progressbar/#label