Add progress bar to wizard component

  • 4
  • Question
  • Updated 3 years ago
  • Answered
Has anyone been able to add a progress bar to the wizard component?  I looked all over this community and did not find anything.

Here is an example of what I am trying to accomplish.

http://jqueryui.com/progressbar/

Thanks!

Photo of Michael Marshall

Michael Marshall

  • 362 Points 250 badge 2x thumb

Posted 5 years ago

  • 4
Photo of Zach McElrath

Zach McElrath, Employee

  • 50,694 Points 50k badge 2x thumb
Hi Michael,

Here is an example that implements a Progress Bar as a Basic Custom Component. The Custom Component uses the Wizard's "currentstep" property (documentation forthcoming) to determine what progress to display, and listens for the wizard's "stepchange" Event to know when necessary to reevaluate progress.

For this example, we have a Wizard on our page, which we give a unique Id of "MainWizard", so that we can uniquely refer to it with jQuery.

The wizard has 2 steps.

We put our Custom Progress Bar component in the right panel of a Panel Set. 




Then we define our WizardProgressBar Component by adding a new JavaScript Resource of type Inline (Component):



Here is the code for the Custom Component's body:

var element = arguments[0],   
   $ = skuid.$;
element.append($('<span><b>Wizard Progress:</b>&nbsp;</span>'));
var progressBar = $('<div>').css({
    width: '400px',
    padding: '4px'
}).progressbar({
    value:0,
    max:100
}).appendTo(element);
var progressByStepId = {
    'step1':0,
    'step2':50
};
var wizardEl;
var updateProgress = function(){
    var wizard = wizardEl.data('object');
    var currentStep = wizard.currentstep;
    var progressValue = progressByStepId[currentStep];
    console.log('progress value: ' + progressValue);
    progressBar.progressbar('value',progressValue);
};
$(function(){
    wizardEl = $('#MainWizard');
    
    // Determine initial progress
    updateProgress(); 
   
   // Set up a listener so that whenever our wizard's step changes,
    // we recalculate progresss
    wizardEl.on('stepchange',function(){
       updateProgress(); 
    });
});

And here's what it looks like in action (not styled very well, but i'll leave that to you :)

STEP 1



STEP 2